Last week a merchant messenger’d me at 1am, desperate for help with her collection display. She has 600 products, most of which come in 4 or 5 colors, and her collection pages were completely useless. When trying to filter by products with an option in a particular color, native filters like “Red (127)” loaded correctly, but clicking on them would only serve to reload the same cards, but with the same default product images, there was no indication that any of the 127 products actually came in red. On these filtered pages, bounce rate was 78%.
The Shopify color filter functionality works just fine. It also goes into the URL and the index, but does not actually work properly for most Shopify stores. Nobody mentions this, but it’s a pretty big flaw in the system.
This guide covers color filtering for collection pages, including how to apply it, which pages actually convert on, and when to use each method.
In this post
- The problem with native color filters
- Three approaches compared
- Native Shopify filters
- Swatch apps on product cards
- Combined listings approach
- SEO impact of filter URLs
- When to use what
- FAQ
The problem with native color filters
Shopify’s native functionality for filtering in a storefront through its Search & Discovery module pulls information from product metafields and variant options. Therefore, if a customer selects the option “Red”, only products that have a red variant will be returned.
Even with filtering in place, the product card displays the default (featured) image. In the example shown (blue shirt) a customer filtering for “Red” will think the filtering feature is not working and bail.
– And it gets worse. In many cases, product colors are stored as separate products for SEO purposes (e.g. a black sweater, a white sweater, a blue sweater, etc), which means the native filters can’t even see them as variants of a single product. This means that the filter dropdown won’t even list “Red” as an option because from Shopify’s perspective, these are individual products with no variants.
Why doesn’t Shopify update the card image on filter click? No clue why this has never been updated since Shopify launched, and is still a problem after all these years. Most themes do not handle this situation well.
Three approaches compared
| Approach | Filter works | Card image updates | Separate products | SEO URLs |
|---|---|---|---|---|
| Native filters | Yes | No | No | Faceted URL only |
| Swatch apps (card level) | Limited | Sometimes | No | No per-color URL |
| Combined listings | Yes | Yes | Yes | Per-color URL indexed |
Native Shopify filters
Turn on Search & Discovery. Use the color filter option. This can be set to a variant option by default, or to a metafield of your choice. This is free, and filters on a query basis.
Use this when: Your product catalog is small, product colors are set up as variants (not individual products) and your theme already swaps card images on filter (some themes do this out of the box, most don’t). This is the default solution for most Shopify stores. If your theme does swap image collections, check out our collection filters not working fix guide for common workarounds.
Swatch apps on product cards
Some applications display swatches for products right on the product card with their respective images. For the hover, this works really well because you can see the actual product and what color it would be without having to go to a new page. However, for the filter, most implementations that use card styles do not incorporate the native filter correctly. You are left with choosing one option over the other.
This is especially true if your colors are separate products (though you really should be selling them separately, but I know that’s not always possible). Card variants are meant to help view different variants of a single product, and if your colors are each separate products then there is no product variant to display swatches for.
The combined listings approach
Combined listings – flip the model and make each color a separate product with its own URL, title, images and metafields. Then make groups of them and have each group displayed as one card on the collection page with swatches for all linked products. Click a swatch and the card’s image and link update to the selected color. The filter now sees each color as its own, individually indexed product so “Red” will return the red products with the red photos as the card image. So easy.
Our solution for this problem is to build Rubik Combined Listings. This extension is metafield based, so there are no external API calls to any 3rd party service. Each product in the group maintains it’s own SEO URL. Users get to properly filter through the combined listings, and Google will be properly indexing the pages as well.
SEO impact of filter URLs
Faceted URLs like /collections/all?filter.v.option.color=red are not canonical. These types of URLs may be crawled and indexed by Google, but they will be treated as parameters of the parent collection /collections/all and not generate a separate ranking page for ‘red shirts’. To achieve separate ranking pages for variations of products you will need to create separate collections and product pages like /collections/red-shirts or separate products through combined listings.
Want All Colors to Rank? Yes, You Do. Then Organize Combined Listings With Smart Collection Rules. Here’s an example of each red product being organized individually and indexed on search, yet also included within a “red shirts” collection organized by tag-based collection rules. See show variants separately on collection pages breakdown.
When to use what
Three quick rules:
- Small catalog, colors as variants, theme swaps images: native filter is fine.
- Colors as separate products for SEO: you need combined listings. Native filter alone won’t cut it.
- Big catalog, mix of structures: combined listings plus the native filter, used together. The filter narrows, the swatch previews.
Both can exist at the same time and are often most effective for stores with 500+ SKUs. The filter uses broad facets (by red, blue, green) and the card view has swatches within each section. Customers will perceive a single experience and be able to find what they need.
If you want to also show per-variant images on the product page as well (in addition to the carousel on the variant cards), that is a different module and handled by Rubik Variant Images, which handles product page image filtering when a variant is selected.
See it work
See the live demo store, watch the tutorial video, or read the getting started guide.
FAQ
Does Shopify have native color filtering?
Yes. Search & Discovery offers product search results filtering results based on color filters created dynamically from variant options or metafields. However, on most theme designs, this filtering will only apply to search results – and not update the image shown on individual product cards.
Why does my collection page show the wrong image when I filter by color?
filter is correct but product image is wrong. Theme needs to be modified to swap the default variant image with the image of the filtered color on the product card. Either a combined listing product or a theme modification would be needed for this fix.
Do combined listings work with Shopify’s native filter?
Yes, each color is a separate product and can have its own variants. So the native filter can still be applied to each color separately. The combined listings layer is just adding swatches and grouping on top of the existing listings.
Are filter URLs good for SEO?
Faceted filter URLs are not canonical ranking pages. For getting color specific rankings, use real collections or create separate products for different colors and use combined listings for them.
Can I have swatches on both cards and product pages?
Yes. This extension handles card swatches and swatches on grouped product pages, in contrast to Rubik Variant Images which handles product image filtering when selecting a variant. The two extensions are compatible and function well together.
Do I need Shopify Plus for combined listings?
Shopify offers a feature called “Combined Listings” but it’s only available with Shopify Plus. Rubik Combined Listings offers the same functionality but with flat pricing that starts at free for 5 groups.
