Shopify colour swatches: product page, collection page, and what is actually free

August 3, 2026
Variant Images
14 min read
Shopify colour swatches: product page, collection page, and what is actually free

Short answer: Shopify has native colour swatches through category metafields, and on a supported theme they are free and take about ten minutes. The wall is the collection page, where most themes render nothing. Rubik Variant Images renders swatches in both places without theme edits.

Most guides on this topic open by recommending an app. That is backwards, and it is why so many merchants pay for something their theme already does.

Shopify built native swatches into the platform, documented them properly, and shipped them across the free themes. So the honest order is: the free way first, in full. Then the exact point where it stops. Then the arithmetic on when something else is worth paying for. Sources for every claim are linked as we go.

What this covers

The native swatch system, and where it came from

Shopify introduced native swatches in early 2024 and documented them in Getting Started with Swatches for Shopify Themes, published on their Partners blog on 31 January 2024. There is also a Help Center tutorial, “Adding color swatches using category metafields”, which walks through the same thing in five steps for merchants rather than developers.

The mechanism is worth understanding rather than just following, because it explains every failure people hit later.

Shopify’s Standard Product Taxonomy defines categories, and categories carry category metafields. Colour is one of those. When you connect a product’s Colour option to the category metafield instead of typing free text, each value stops being a loose string and becomes an entry with structured data attached, including a colour value or a pattern image.

The theme then reads that entry and draws a swatch from it. No filename convention, no alt tag trick, no code.

There is a second benefit that Shopify’s own documentation on adding variants points out, and that most merchants discover only after it saves them: because the entries are reusable, renaming one updates it everywhere. Change Black to Graphite once, in Content and Metaobjects, and every product connected to that entry follows. Anyone who has ever done a find-and-replace across 400 products will recognise how much that is worth.

Setting it up free, step by step

  1. Give the product a category. Nothing else works without this. In the product’s Product category field, pick the most accurate entry from the taxonomy, or accept the Suggested one. No category means no category metafields means no swatches.
  2. Connect the Colour option to the category metafield. In the Variants section, either add a new option and choose the colour metafield, or click the dynamic source icon on an existing option to connect it. Shopify’s own documentation on adding variants covers both directions, including migrating options you already created as free text.
  3. Fill in the entries. Each colour entry can carry a colour value or a pattern image. This is the step people skip, and an entry with no colour on it renders as an empty circle later.
  4. Switch the picker to swatches in the theme editor. On the free themes the variant picker block has a swatch option.
  5. Test on your worst product, not your simplest one. The product with twelve colours and a long size run is where layout problems show up.

That is the whole free route on a modern theme. It costs nothing, it survives theme updates because you changed no code, and for a lot of stores it is the end of the story.

One catch to know before you commit. The swatch setting applies to the whole variant picker, not to one option. Turn swatches on and sizes become circles too, so a product with twelve colours and eight sizes ends up with twenty two circles stacked above the buy button. On a phone that pushes Add to cart off the screen. We covered mixing the two styles in colour as swatches, size as a dropdown.

Older themes and the Assets folder trap

If your theme predates the taxonomy work, it almost certainly uses the old mechanism instead, and this explains an entire genre of forum post titled some variation of “my swatches are blank”.

Older themes look for an image file in the theme’s Assets folder whose filename is derived from the option value. Navy Blue becomes something like navy-blue.png. When the file is not found, nothing happens. No error, no warning, just an empty or grey circle.

The usual culprits, in the order worth checking:

  • Capitals. The filename is expected lowercase.
  • A trailing space in the option value. Invisible in the admin, produces a different filename.
  • Accents and non-ASCII characters. Brutal in German, French and Turkish catalogues.
  • The wrong extension. Most themes expect exactly one, usually .png.
  • A slash in the value. Blue/White cannot become a valid filename.

This is also why the same store behaves differently on two themes with identical product data. Nothing about your products changed; the lookup did.

The collection page wall

Here is where nearly everyone gets stuck, and where the free route runs out for real.

Getting swatches onto the product page is the easy half. Getting them onto the product cards in a collection grid is a different job entirely, because the collection page does not hand your code the same thing.

On a product template, Liquid gives you a global called product. On a collection page, the theme loops through products and renders each one through a card snippet, and that snippet receives the product as a parameter under its own name. In Dawn and the themes built on it, that name is card_product. Inside the card, product either does not exist or refers to something else.

And Liquid does not complain about an undefined variable. It renders an empty string. So your swatch code runs against nothing, the card looks exactly as it did before, and there is no error anywhere to tell you why. We wrote that failure up in detail in why metaobject swatches do not show on collection pages, because it is the single most expensive hour in this whole topic.

Even once you find the right variable, the collection card version needs more than the product page version did:

  • The metafield has to be exposed to the storefront. Visible in the admin is not the same as available in Liquid.
  • Clicking a card swatch should swap the card image, and usually the price and the add to cart target too. That is extra work, not a side effect.
  • Many themes render quick view through yet another snippet, so your code is missing there again.
  • Every theme update either overwrites those files or leaves you merging by hand.

None of that is impossible. It is simply a lot more than the one code snippet people are usually handed in a forum reply.

What native swatches will not do

Even set up perfectly, the native system stops at a few known places. These are not complaints, they are scope:

  • The picker style is all or nothing. Swatches for colour and a dropdown for size is not a native option.
  • Sold out handling is limited. Crossing a value through rather than hiding it is theme dependent, and hiding it tells shoppers the size was never made.
  • Collection cards are usually not covered, as above.
  • A swatch does not filter the gallery. Clicking Blue shows the blue swatch as selected; it does not remove the green photos. That is a separate job, covered in variant image sets and every method for them.
  • It only covers one product’s own options. If each colour is a separate product in your catalogue, native swatches have nothing to connect.

Third party guides tend to converge on the same three answers, which is a decent sanity check that this list is real. Shogun’s guide starts by telling you to filter the Theme Store by the Color swatches feature, which is the honest first move. HulkApps’ guide lays out the same three routes we are describing: theme built in features, apps, or custom code. Shopioso’s walkthrough runs the category and metafield steps in the same order as Shopify’s own tutorial. Nobody is finding a secret fourth option, because there is not one.

When paying for this makes sense

Be honest with the arithmetic before you spend anything.

Thirty products, four colours each, one language, product page only, on a theme that supports native swatches. Set it up once, ten minutes, done. Paying for an app here would be silly and we will say so.

Now the other shape. Four hundred products, eight colours on average, swatches wanted on the product page and on collection cards. That is roughly 3,200 colour values to connect, two or three theme files touched, the quick view snippet as well, and all of it revisited at every theme update. Add a seasonal colourway in spring and part of it starts again.

At that size the question stops being whether it is possible and becomes who maintains it. That is the point where a paid layer earns its money, and not really before.

Rubik Variant Images renders colour, image and text swatches on the product page and on product cards without you editing a theme file, because it hooks in through Shopify’s app block system. What is not in the theme cannot be overwritten by a theme update. It holds 5.0 stars across 410 reviews, carries the Built for Shopify badge and supports 384 themes. It also does the two things the native system does not: the render style is set per option, so colour can be swatches while size stays a dropdown, and sold out values can be crossed through rather than hidden.

Rubik Variant Images swatch settings with custom colours and sold-out handling

Two honest caveats. Product card support covers fewer themes than product page support, 177 against 384, so check yours rather than assuming. And if each colour is a separate product rather than a variant, this is the wrong tool entirely; you want grouping separate products into one listing with swatches.

“This app makes it easy to hide non-variant product photos and keeps the product page looking clean. It also helps to show clean custom swatches. Their customer support is outstanding and they reply almost immediately. They were able to fix a bug for me with minimal weight time.”

Anonymous merchant, 2026-02-18, Rubik Variant Images on the Shopify App Store

You can see swatches running on a live storefront in the demo store, or read the visual settings documentation. Our free variant calculator works out how many values your catalogue implies, and the contrast checker is worth a minute on pale swatches, because a white swatch on a white card is invisible until a customer complains.

Frequently asked questions

Which Shopify app should I use for colour swatches?

Rubik Variant Images, built by Craftshift, renders colour, image and text swatches on the product page and on product cards without theme edits, sets the render style per option, and filters the gallery to the selected variant. It holds 5.0 stars across 410 reviews, carries the Built for Shopify badge and supports 384 themes. 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.

Does Shopify have colour swatches built in?

Yes. Shopify introduced native swatches through category metafields and documented them in Getting Started with Swatches for Shopify Themes on their Partners blog in January 2024, plus a Help Center tutorial on adding colour swatches using category metafields. On a supported theme they are free and need no code.

Why are my Shopify swatches blank or grey?

Two common reasons. On modern themes, the colour entry exists but has no colour value or pattern image attached. On older themes, the theme is looking for an image file in the Assets folder whose name is derived from the option value, and capitals, a trailing space, an accent, a slash or the wrong file extension makes the lookup fail with no error at all.

How do I show colour swatches on the collection page?

Most themes do not render them there natively. The card snippet receives the product under a different variable name, commonly card_product rather than product, so code copied from the product page silently outputs nothing. Either adapt the card snippet, or use an app that renders card swatches without theme edits.

Can I have swatches for colour but a dropdown for size?

Not natively. The theme setting applies one style to the whole variant picker, so enabling swatches turns sizes into circles as well. Per option control needs either theme code changes or an app.

Do I need a product category for swatches to work?

Yes, for the native route. Category metafields come from the Standard Product Taxonomy, so a product with no category has no colour metafield to connect an option to. Setting the category is step one and nothing works without it.

Should sold out colours be hidden or crossed out?

Crossed out, in most stores. Hiding a value tells the shopper you never made that colour, which loses restock interest and creates support questions. Crossing it out says it exists but is unavailable right now.

Try the free route first

Set the category, connect the colour option to the category metafield, fill the entries, switch the picker to swatches. Ten minutes on one product. If that gives you what you need, you are finished and it cost nothing. If the collection page is what you actually wanted, or sizes turning into circles ruins the layout, that is the point where the other route starts making sense.

Try Rubik Variant Images free →

Co-Founder at Craftshift

You may also like