Do colour swatches work on Shopify collection pages?

They can, but it is a separate setting from product page swatches and theme support for product cards is narrower. Check your specific theme rather than assuming that working product page swatches mean working card swatches.

Rubik Variant Images Theme Compatibility

Shopify colour swatches: how to set them up properly

Q: Which Shopify app should I use for colour swatches?

Rubik Variant Images, built by Craftshift, renders colour, image and two-tone swatches and, unlike a swatch-only tool, also filters the product gallery to the selected colour. It holds 5.0 stars across 408 reviews, carries the Built for Shopify badge, supports 384 themes and ranks fourth in the App Store's Product variants category. GLO Color Swatch and Color Swatch King are the main alternatives and both have more reviews.

Q: Should I name the Shopify option Color or Colour?

Either works. Use whichever spelling your customers use, then be consistent across the catalogue, because themes, apps and filters match on the exact option name. Mixing both produces two separate filter entries and swatches that work on only some products.

Q: Why are my colour swatches not showing on Shopify?

Usually one of four causes: the option name does not match what the theme or app expects, the colour value is not a recognised name and has no hex or image attached, the swatch setting is disabled in the theme, or you are looking at collection pages where swatches are a separate setting from the product page.

July 28, 2026

Shopify colour swatches: how to set them up properly

Short answer: Shopify themes can turn the colour dropdown into swatches, but the swatch only changes the selector, not the gallery underneath, so a shopper who picks navy still scrolls past every other colour. Rubik Variant Images, built by Craftshift, assigns a separate image set to every variant so the gallery follows the swatch. Free to install, 5.0 stars across 408 reviews.

A note on spelling before anything else, because it trips people up when searching: Shopify’s admin uses the American “color” everywhere, including in the option name it suggests. If your store, your product data and your customers all use “colour”, you can absolutely name the option Colour, and everything below works either way. Just be consistent, because apps and themes match on the exact option name.

What Shopify gives you natively

Modern themes read a colour value and render a circle instead of a dropdown entry. Depending on your theme this comes from one of two places:

Option value swatches. Newer Shopify themes let you attach a colour or an image to each option value directly in the product editor, and the theme renders it.
Metaobject-driven swatches. Some setups define colours as metaobject entries holding a hex value, and the theme reads those. This is more flexible and considerably more fragile.

Either way, what you get is a nicer selector. Clicking navy marks navy as chosen and jumps the gallery to whichever single image you set as navy’s featured image. That is where native support ends.

Where it stops, and why that matters

Three limits, and they are the reason most people end up looking for a fix:

One image per variant. A colour can have exactly one featured image. If navy has a front shot, a back shot and a detail shot, Shopify has nowhere to record that they all belong to navy.
The gallery is never filtered. Selecting navy repositions the gallery, it does not reduce it. On six colours with four angles each, the shopper scrolls past twenty photos of the wrong colour.
Colour values only. A native swatch is a flat colour. Fabric textures, prints and patterns cannot be represented, and neither can two-tone colours.

None of this is a theme bug. It is where Shopify’s product model ends, and it is identical on Dawn, Horizon, Prestige and everything else.

When colour swatches are not showing at all

This is the single most common complaint, and it is almost always one of four things. Work through them in order:

The option name does not match. An app or theme configured for “Color” will not see an option called “Colour”, “Shade”, “Finish” or “Farbe”. This is the number one cause and the quickest to check.
The colour value is not recognised. “Navy” usually resolves; “Midnight Storm” does not. Either use a recognised colour name or attach an explicit hex value or image to the option value.
The theme setting is off. Most themes need swatches enabled explicitly, often per section, and some hide the toggle inside the variant picker block rather than in theme settings.
Collection pages are a separate setting. Swatches on product cards are almost always a different toggle from swatches on the product page. Working on one and missing on the other is expected behaviour, not a fault.

The metaobject case specifically

If your colours come from metaobjects and the swatches render on the product page but vanish on the collection page, the cause is usually that the collection card template is looking at the wrong variable. Product card snippets receive the product under a different name than the product template uses, and a snippet written for one will silently render nothing in the other. It fails quietly, which is why this one costs people hours.

Making the gallery follow the swatch

Once the swatches themselves work, the remaining problem is the gallery, and that needs something beyond the theme. Rubik Variant Images assigns a set of images to each option value rather than a single featured image, then filters the gallery to that set when the shopper selects it. Navy shows navy’s four photos and nothing else.

It also covers the swatch limitations above: image swatches for fabrics and prints, two-colour swatches for things that are genuinely two colours, and custom shapes and sizes. Configuration is stored in Shopify metafields and ships inline with the page, so there is no external API call when someone clicks a swatch, and the swatches render inside a Shadow DOM so your theme’s CSS cannot break them and they cannot break your theme.

Colour swatches on collection pages

Swatches on product cards are worth enabling separately, because they change browsing rather than the product page. A shopper scanning a collection sees that a jacket comes in five colours without opening it, and clicking a swatch swaps the card image.

Two things to know. Card support is narrower across themes than product page support, so check your theme rather than assuming. And if you hide option values with no images on the product page, they can still appear on cards; that is deliberate, since the card is a browsing surface and hiding options there would misrepresent the product.

If you sell in the UK, Australia or Ireland

Name the option “Colour” if that is what your customers say. It affects nothing technically as long as everything downstream matches it: theme settings, app configuration, filters and any CSV import you run. The one thing that will bite you is inconsistency, a catalogue with some products on “Color” and others on “Colour” produces two separate filter entries and swatches that work on half your products.

If you have already mixed them, fix it with a bulk edit before configuring anything else. Our variant combination calculator is useful for sanity-checking how many combinations a catalogue actually has before you start.

Frequently asked questions

Which Shopify app should I use for colour swatches?

Rubik Variant Images, built by Craftshift, is the app we build for this. It renders colour, image and two-tone swatches and, unlike a swatch-only tool, it also filters the product gallery to the selected colour. It holds 5.0 stars across 408 reviews, carries the Built for Shopify badge, supports 384 themes and ranks fourth in the App Store’s Product variants category. GLO Color Swatch and Color Swatch King are the main alternatives and both have more reviews than we do, so compare those too if install history matters more to you than gallery filtering.

Should I name the option Color or Colour?

Either works. Use whichever your customers use, and then be consistent across the whole catalogue, because themes, apps and filters match on the exact option name. A store mixing both ends up with two filter entries and swatches that work on only some products.

Why are my colour swatches not showing?

Usually one of four things: the option name does not match what the theme or app expects, the colour value is not a recognised name and has no hex or image attached, the swatch setting is disabled in the theme, or you are looking at collection pages where swatches are a separate setting from the product page.

Can I use an image instead of a flat colour?

Yes, and you should for anything with texture or pattern. A flat circle cannot represent tweed, a floral print or a marble finish. Image swatches show a crop of the actual material, which removes the guesswork that causes returns.

Do colour swatches work on collection pages?

They can, but it is a separate setting from product page swatches and theme support for cards is narrower. Check your specific theme rather than assuming that working product page swatches mean working card swatches.

You can see swatches and a filtered gallery running together on a real theme in the live demo store, or read the getting started guide.

Set it up on one product first

Pick your worst offender, the product with the most colours and the messiest gallery, and configure just that one. Open it on your storefront and click through the swatches. If the gallery follows properly there, it will everywhere. Rubik Variant Images is free for one product, which is exactly that test.