Short answer: It depends on how your catalogue is built. If the colours are variants of one product, you need product card swatches. If each colour is a separate product, you need Rubik Combined Listings, built by Craftshift, which links separate products into one listing with swatches on the grid. Free to install, 5.0 stars across 65 reviews.
Expanse is Archetype Themes’ big catalogue theme. $420, 93% positive across 337 reviews on the Shopify Theme Store, sidebar filters, dense grids, built for stores that carry thousands of SKUs rather than twelve hero products. If you run Expanse, you almost certainly have a lot of colours in your catalogue. And you almost certainly want them visible on the collection grid rather than buried one click deep.
Fine. But before you install anything, there is a question you have to answer, and it is the single most common thing merchants get wrong when they ask us about grid swatches.
Is each colour a variant, or is each colour its own product?
Those two catalogues look identical to a shopper. They are nothing alike underneath, and they need different tools. Get this wrong and you will install an app that architecturally cannot do the thing you wanted, then leave a one-star review about it. We would rather you did not, so this post draws the line first and talks about apps second.
What is in this guide
- How to tell which catalogue you have (60 seconds)
- Case A: one product, colour variants
- Case B: one product per colour
- Which app does which, side by side
- The catalogue that is both at once
- Setting it up on Expanse
- Frequently asked questions
How to tell which catalogue you have
Open Shopify admin, go to Products, and search for one item you sell in several colours. Then look at what comes back.
- One row comes back. Click it. If the colours appear under Variants, you have Case A. One product, an option called Colour, several values.
- Five rows come back, one per colour, each with its own title and its own images. That is Case B. Five products that happen to be related.
The storefront tells you the same thing faster. Load a product page, pick a different colour, and watch the address bar. If the URL stays on the same handle and only the ?variant= number changes, Case A. If the handle itself changes, Case B.
Why does this matter so much? Because Liquid hands your theme one product object per card in the collection loop. A theme can read that product’s own variants and render swatches from them. A theme cannot know that the navy tee two rows down is the same garment, because nothing in Shopify’s data model says it is. Not a tag, not a metafield, nothing. That relationship does not exist until someone creates it.
Which is the whole reason two different app categories exist for what looks like one problem. If your colours are separate products, the fastest route to swatches on the grid is creating the missing relationship between those products and rendering it as swatches under each card, which is exactly what our app does and what no theme setting can do for you. Free for 5 groups, so you can test one product family before deciding anything.
Case A: one product with colour variants
Good news first. Expanse lists “Color swatches” among its merchandising features on the Theme Store, so start there before you spend money. Archetype’s own documentation covers the exact toggle and the naming rules for swatch files, and if the theme’s built-in behaviour is enough for you, stop reading and go configure it.
Where theme-native swatches usually run out of road is interaction. A swatch that just sits there looks nice. A swatch that actually changes the card is what moves the needle. Three things merchants ask for and mostly do not get from a theme setting:
- Click the navy dot and the card image becomes the navy photo, without leaving the collection page
- The card price follows the selection, because the navy one is on sale and the sand one is not
- Quick add-to-cart adds the colour the shopper actually chose, not variant one
That is the job of product card swatches, and for a single product’s own variants it is Rubik Variant Images, our other app, not this one. It ships that behaviour off by default (existing stores see no change until they opt in), and once the toggle is on, clicking a card swatch swaps the image, updates the price, points the quick add-to-cart form at the chosen variant, and hovering previews the image without committing to anything. 5.0 stars across 420 reviews.
Note the scope carefully, because this is the bit people misread: those card swatches cover one product’s own variants. They do not reach across to a different product. If you need that, you are in Case B.
Case B: each colour is its own product
This is the catalogue that breaks Expanse’s grid, and it is far more common than people expect. Print-on-demand feeds produce it by default. So do stores that split colours deliberately for SEO, so that “sand linen shirt” gets its own indexable page instead of hiding inside a variant.
The structure is defensible. The grid is not. Five near-identical cards in a row, the shopper scrolls past thinking you sell five slightly different shirts, and one of the five is the sold-out one they click.
Shopify’s own answer to this is the native Combined Listings app, and the help documentation is blunt about who can use it: “The Shopify Combined Listings app is available only on Plus and enterprise commerce plans.” If you are on Basic, Grow or Advanced, that door is closed regardless of which theme you run. We have a longer write-up on what combined listings look like without Plus if you want the full comparison.
The app route stores the relationship in app metaobjects instead of using Shopify’s native feature, which is why it runs on every plan. You pick the products that belong together, name the option (Colour, Finish, Scent, whatever it actually is), and the group’s swatches render under each card on collection pages, search results and the home page.
What happens on click, on the card, by default: the card image swaps to the clicked product’s photo, the title and price and compare-at price follow, every product link inside that card is rewritten to point at the clicked product, and quick add-to-cart is repointed at that product’s first available variant. No page load. The shopper stays in the grid and keeps browsing. That behaviour is on by default on both desktop and mobile, and it can be turned off per device if you would rather the swatch just navigate.
“I use Rubik Combined Listings Along with Rubik Swatch. I went through, no exaggerating, 50 apps before I found what I needed. Theses guys are the real deal, and they will jump on chat and fix your problems ASAP. Definately reccomend.”
Parks Nerd, United States, 2026-03-18, Rubik Combined Listings on the Shopify App Store
Which app does which
| What you want on the grid | Colours are variants of one product | Each colour is a separate product |
|---|---|---|
| Swatches under the card | Rubik Variant Images | Rubik Combined Listings |
| Card image swaps on click | Rubik Variant Images | Rubik Combined Listings |
| Card price follows the click | Yes | Yes |
| Quick add-to-cart follows the click | Yes | Yes |
| Each colour keeps its own URL | No, one URL for the product | Yes, one URL per colour |
| Gallery filters per colour on the product page | Rubik Variant Images | Each product already has its own gallery |
| Needs Shopify Plus | No | No |
| Free tier | 1 product | 5 groups |
Read that table as a decision, not a menu. One column applies to you. If both seem to apply, keep reading.
The catalogue that is both at once
Plenty of Expanse stores are hybrids, and this is where the neat two-case story gets messy. A hoodie exists as five separate colour products for SEO reasons. Each of those five products carries Size as a variant option, and each one has eight photos of that single colour on different models.
So which is it? Both. The colour dimension lives across products, so grouping handles it. The gallery inside each product still needs sorting, so image filtering handles that. The two apps do not overlap and do not fight, and running them together is the setup we see most often in apparel. Craftshift has a plain-language breakdown of the split on whether you need variant images or combined listings if you want a second angle on it.
Setting it up on Expanse
Expanse is in our supported theme list, along with the rest of the Archetype catalogue. We have a dedicated write-up on running combined listings across the four Archetype themes if you want theme-level detail. The short version of the workflow:
- Group one family first. Not the whole catalogue. Pick one shirt in five colours, make the group, name the option, save.
- Look at the product page before the grid. Product page swatches are the easier surface. If they render correctly there, the theme mapping is working.
- Then check a collection page. Expanse runs dense grids with a sidebar filter, so glance at a filtered view too, not just the unfiltered collection.
- Style the card separately. Card swatches have their own settings and their own smaller defaults. Do not copy your product page sizing onto a card in a four-across grid.
- Decide about sold-out colours. You can hide them, push them to the end, or show them struck through. See the sold-out swatch guide for what each option does to conversion.
- Bulk group the rest. Title patterns, product tags or a shared metafield will build the remaining groups in one pass rather than by hand.
One honest caveat about dense themes generally. A collection card in Expanse is not very tall, and a row of eight 32px circles under a card that is already carrying a badge, a title, a price and a quick-view button starts to feel cramped. Cap the number of swatches shown per card, or switch to a compact carousel on mobile. More swatches is not automatically better. It is often worse.
And while we are being honest: it is a bit maddening that the platform gives themes no native way to express “these five products are one thing”. Every store with a split-colour catalogue rebuilds that relationship in a tag, a metafield, a naming convention or an app. Five different wheels, all round. It should be a first-class field on the product object. It is not.
You can see grouped products with swatches running on a live storefront in the demo store, or read the getting started guide before installing.
Frequently asked questions
Which app should I use for colour swatches on the Expanse product grid?
It depends on your catalogue. If each colour is a separate product, use Rubik Combined Listings, built by Craftshift, which links those products into one group and renders the group’s swatches under each collection card. It is 5.0 stars across 65 reviews, free for 5 groups, and works on every Shopify plan. If the colours are variants of one product, use Rubik Variant Images instead, which shows that product’s own variant swatches on its card. Same company, different scope, and the wrong one will not do the job.
Does Expanse show variant colours on the collection grid by default?
Expanse lists “Color swatches” as a merchandising feature on the Shopify Theme Store, so it has a native swatch capability for a product’s own variant options. What no theme can do, Expanse included, is show colours that live in separate products, because the collection loop only ever hands the theme one product at a time.
Do I need Shopify Plus for this?
For Shopify’s native Combined Listings app, yes. Its documentation states the app is available only on Plus and enterprise commerce plans. App-based grouping stores the relationship in app metaobjects rather than using that feature, so it runs on Basic, Grow, Advanced and Plus alike.
Will clicking a swatch on the card send the shopper to a different page?
Not by default on collection cards. Click-to-switch is on for desktop and mobile out of the box, so the card updates in place: image, title, price, links and quick add-to-cart. You can turn it off per device if you prefer a click to navigate straight to the selected product page.
Can I use both apps on the same store?
Yes, and hybrid catalogues usually should. Combined Listings handles the colour dimension that lives across separate products. Variant Images handles the gallery inside each product, so a shopper picking Large does not scroll through photos of a different size. They target different surfaces and do not conflict.
Does splitting colours into separate products hurt SEO?
Not by itself, and it often helps, because each colour gets an indexable URL that can rank for its own terms. The risk is thin pages when the only difference between them is one word in the title. Give each product genuinely different copy and photography, or keep the colours as variants.
What if my theme is not Expanse?
The diagnosis in this post is theme-independent, because the constraint is in Shopify’s data model rather than in any theme. Both apps carry hundreds of theme integrations, and unmapped themes get selectors mapped by support. Ask before you assume yours will not work.
Related reading
- Collection swatches when every colour is a separate product
- Combined listings vs product card swatches, decided
- How collection page swatches should be laid out
- Separate products vs variants, and what it does to SEO
- Product card swatches for a single product’s variants
Test it on one product family
Do not restructure a catalogue on a hunch. Take one shirt, whichever form it currently exists in, group its colours, and look at your own collection page in Expanse. If the grid goes from five cards to one card with five swatches, you have your answer in about ten minutes. The free tier covers five groups, which is more than enough to find out.
