Most shoppers decide which product to click from the collection page, before they ever see your variant picker. Showing options there (filters down the side, color swatches on each card) helps them find "the navy hoodie in XL" in two taps instead of opening six product pages. Shopify gives you most of this for free with the Search & Discovery app and a modern theme.
Filters
Shopify's free Search & Discovery app lets you add filters to collection and search pages. You can filter by product options such as Size, Color and Material, plus availability, price, product type, vendor, tags and metafields. Filters use your existing variant data, so if your options are named consistently, they work straight away.
Consistency is the catch. If one product's option is called "Colour" and another's "Color", or one uses "XL" and another "Extra Large", the filter shows them as separate values. Tidy option names before you turn filters on.
Which filters to offer
Pick the filters that match how your shoppers actually narrow down. A few starting points:
| Store type | Main filters | Secondary filters |
|---|---|---|
| Apparel | Size, Color | Product type, Material, Price |
| Wall art and prints | Size, Orientation | Frame color, Price |
| Personalized gifts | Product type, Occasion (tag or metafield) | Price, Material |
| Jewelry | Metal, Product type | Price, Birthstone |
Three to five filters is plenty for most collections. More than that makes the sidebar long and pushes products down the page. For apparel-specific setup, our guide to options for apparel stores goes deeper.
Color swatches on collection cards
Swatches on product cards let shoppers see every color a product comes in without clicking. On themes that support it, tapping a swatch also changes the card image to that color, which helps a lot for products like tumblers or tote bags that come in many shades.
Show a handful of swatches per card, and add a "+3" style count if there are more. A card crammed with 20 tiny circles is hard to read. To show the right image for each swatch, every color variant needs its own image; see our variant images setup guide.
Setup
- Install Shopify Search & Discovery from the Shopify App Store if it isn't already on your store.
- In the app, open Filters and add the options you want, such as Size and Color. Save.
- In your theme editor, open a collection template and make sure filtering is turned on in the product grid settings.
- For swatches, link your Color option to Shopify's color values (category metafields) so each value has a real color or image. Newer themes then show swatches automatically in filters and, if the theme supports it, on product cards.
- On older themes, a developer can edit the product card snippet to render swatches from your variant data.
- Check the collection on a phone and on desktop.
If you're comparing apps that add swatches to the product page too, our roundup of color swatch options apps shows what each one covers.
What about personalization options?
Personalization fields such as a name, a font choice or a photo upload aren't variants, so they don't appear in collection filters. That's usually fine: nobody filters a collection by "custom name". What shoppers do want to know is that a product can be personalized. A few ways to show that:
- Add a tag like "personalized" and offer it as a filter, so shoppers can see only customizable items.
- Put "Add your name" or "Personalize it" in the card's subtitle or a badge.
- Use a collection-level banner that explains how personalization works and how long it takes to ship.
The live preview and fields from Print It My Way appear on the product page, where the shopper actually customizes the item.
Mobile UX
On phones, filters should open in a drawer or full-screen panel with a clear Apply or Show results button that stays visible. Swatches need to be large enough to tap accurately, around 44 by 44 pixels, with space between them. Our notes on touch-friendly variant pickers apply to collection swatches too.
Also decide what happens to sold-out items. The availability filter lets shoppers hide them; many stores show in-stock items first by default. For how sold-out options look once a shopper reaches the product page, see our guide to hiding or crossing out sold-out variants.
Frequently asked questions
How to show options on Shopify collection page?
Use the free Shopify Search & Discovery app to add filters for options like Size and Color. For swatches on product cards, use a theme that supports them or have a developer add them to the product card snippet.
Best filter setup for apparel collection?
Start with Size and Color as the main filters, then add Product type, Material or Price if your collection is large. Keep option names consistent across products so values don't split.
How to show color swatches on product cards?
Link your Color option to Shopify's color values so each value has a real color or image. Newer themes show swatches on cards automatically; older ones need a small theme customization.
Does filter affect SEO?
Filtered collection URLs add parameters to the collection URL, and Shopify themes normally point the canonical back to the main collection. Focus your SEO effort on the collection page itself rather than individual filter combinations.
How many filters is optimal?
Three to five for most collections. More makes the sidebar long, and fewer can leave shoppers scrolling through items they don't want.
Mobile filter UX?
Open filters in a drawer or full-screen panel with an Apply button that stays visible. Make swatches big enough to tap, around 44 by 44 pixels.
Show sold-out variants in filter?
Offer the availability filter so shoppers can hide sold-out items. Many stores show in-stock products first by default.
Best app for collection filters?
Shopify Search & Discovery is free and covers most stores. Third-party filter apps such as Boost add more layout and merchandising controls if you need them.
Related reading
Sources & further reading
Primary sources referenced in this article. We link to official platform documentation and standards bodies rather than secondary summaries so you can verify claims directly.
- Shopify Help Center: Product variants
- Shopify.dev: Metafields overview
- Shopify.dev: Product variant limits
- Shopify Help Center: Line item properties (customization)
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