Collection UX

Shopify Product Options on Collection Page

Show available colors/sizes on the collection page — customer doesn't have to click into each product. Faster shopping.

Last updated: July 30, 2026By the Print It My Way team

Install Print It My Way — Free

Filters

Shopify Search & Discovery app: filter by variant options (Size, Color, Material). Customer narrows collection quickly.

Color swatches on collection cards

Show 5-8 available colors per product card. Customer sees at a glance without clicking. Selection previews the product image.

Setup

  1. Enable Shopify Search & Discovery
  2. Configure filters (Size, Color)
  3. Add swatch metafield
  4. Customize product-card.liquid to render swatches

Mobile UX

Filters as bottom sheet. Swatches sized for tap (44×44 px). Collection page becomes browsable, not just scrollable.

Frequently asked questions

How to show options on Shopify collection page?

Shopify Search & Discovery for filters. Product-card metafield for swatches.

Best filter setup for apparel collection?

Size + Color as primary filters. Category, Material, Price as secondary.

How to show color swatches on product cards?

Variant metafield 'Color' + product-card.liquid renders swatch. Requires theme customization.

Does filter affect SEO?

Filtered URLs can be canonicalized to base collection. Or index high-value filter URLs (e.g. /collections/shirts?color=red).

How many filters is optimal?

3-5. More overwhelms; fewer leaves customer scrolling.

Mobile filter UX?

Bottom sheet or full-screen modal. Persistent 'Apply' button.

Show sold-out variants in filter?

Filter to hide sold-out by default. Toggle to include.

Best app for collection filters?

Shopify Search & Discovery (native, free). Or Boost, Smart Product Filter.

Related reading

Try it free on Shopify

Print It My Way's permanent Free plan includes live preview, custom options, and Cart Transform pricing.

Install Print It My Way