Look at the average Shopify store and you’ll notice a sad similarity to what I show above. A merchant invests time and money into creating a quality Shopify store (IE. a well designed store with product swatches on the product page) but their collection pages are visually lazy and really do not allow for sorting or filtering. So what happens when customers browse a collection for sunglasses? One by one they view individual products in order to compare colors. Ultimately they leave the store.
Collection page swatches on the navigation bar, a viewer can see all available colours before deciding which one to view. A single click on any swatch instantly changes the product card to the desired colour. This feature has become so ubiquitous on retail sites that to not have it on a site seems lazy and almost amateur. Yet, many Shopify themes still miss out on this easy yet powerful feature.
ways to add option values to your Shopify product, with my preference. Bonus: Shopify has a limit on the number of variants per product (with Combined Listings) and the number of option types (3) but neither of those will stop you here.
In this post
- Why collection page swatches matter
- Method 1: native theme support
- Method 2: custom Liquid code
- Method 3: combined listings app
- Comparison table
- Step-by-step setup
- FAQ
Why collection page swatches matter
Having consideration for how people shop. The above jacket section might have benefited from a “Navy” filter, but instead users have to dig in to explore each jacket individually. Without swatches, users might choose to try on a few jackets to see if any of them come in navy, and this would likely happen within the first few jackets on the page. With swatches, users could make this determination within 3 seconds, which is far quicker and better for conversion.
Even time-on-site is a filter benefit. People who can quickly find what they’re looking for will visually browse more products, add more to their cart, and shop with you more frequently. Check out the stats behind swatches and sales below.
Method 1: native theme support
Dawn, Prestige, Impulse and a few 2nd generation (modern) themes support collection card swatches straight out of the box: you can enable swatches in the theme editor and then assign theme options or metafield colors to them. However, this method of swatches has a few limitations: swatch styling is locked to the theme and cannot be customized elsewhere in the store (unlike with individual product swatches), products cannot be grouped together within a single collection callout and displayed with separate swatches, and most themes will only support swatches of colors and not images of specific products.
Method 2: custom Liquid code
You can have someone else make swatches for you to include in your product-card snippet. This would be around 100-200 lines of Liquid and CSS. Very expensive. Breaks on every theme update. Most agencies charge $800 to $2,000 to add this kind of functionality. And it only works for native variants, not for separate products linked together.
Method 3: combined listings app
This is the “Rubik Combined Listings – simplified” approach that most merchants land on. It adds swatches to the collection cards with all the same benefits (swatches/images in swatches, grouped separate products supported, theme-update safe) and it’s metafield-based, so there are no external API calls. It does load at the end of the page (in the card footer) since the snippet is inserted into the collection template.
See our full collection page swatches guide for the long version.
Comparison table
| Method | Cost | Image swatches | Grouped products | Theme-proof |
|---|---|---|---|---|
| Native theme | Free | Sometimes | No | Yes (if theme supports) |
| Custom Liquid | $800 to $2000 | Yes | No (typically) | No |
| Combined listings app | $0 to $50/mo flat | Yes | Yes | Yes |
Step-by-step: the clean setup
- Install Rubik Combined Listings from the Shopify App Store. Free plan covers 5 groups for testing.
- Open the app dashboard. Run AI auto-group or manually create a group for your first product family.
- Pick a swatch style: circle, square, rounded, pill, or image swatches for pattern-heavy catalogs.
- Set mobile behavior. Compact carousel is usually the right call for small screens.
- Visit a collection page. Confirm swatches render under each product card. Click one, confirm the card swaps.
- Repeat for the rest of your catalog or run bulk grouping via CSV.
- If you also want product page image filtering (different feature), install Rubik Variant Images alongside. The two apps work together cleanly.
First, check out the Swatch Previewer to determine which Swatch shape fits your theme best. Then check out the Hex Picker tool which does a color hex lookup for you and saves you a trip to the site.
Collection page swatches from theme code not working with storefront filters, but app does both.
Watch the tutorial
The demo store, the video walkthrough above, and full documentation live on the app listing. Install takes about a minute.
FAQ
Does Dawn theme support collection page swatches?
Dawn themes now support color swatches tied to a Color option (swatches for images and grouped products require an app, though) and will soon support swatches for variations.
Do collection swatches slow down the page?
Avoid apps that fetch swatch color information from external APIs on every page load unless the app is metafield-based.
Can I show swatches for products that are separate (not variants)?
Yes, that does what Rubik Combined Listings does. Allows you to group separate products together, and display swatches that can switch between the grouped products.
Can I hide out-of-stock colors from collection swatches?
Yes. This plugin will auto sync your inventory with your Rubik Combined Listings pages and will also hide or strike through out any listings that are sold out.
What is the Shopify variant limit?
2048 variants per product with Combined Listings enabled, 3 option types max.
Will this work on my theme?
Yes for most themes including Dawn, Prestige, Impulse, Motion, and page builder themes (Beae, EComposer, Foxify, GemPages, Instant, PageFly, Replo).
Do collection swatches help SEO?
This tactic can increase visitor interaction, encouraging longer visits which can translate into higher site rankings. Additionally, separate-product groups can add per-color URLs to your site which can rank independently.
