Metaobject colour swatches not showing on collection pages

Short answer: Your swatch code works on the product page and renders nothing on the card because the card snippet receives the product under a different variable name. Liquid does not error on an undefined variable, it outputs nothing, so the swatch silently disappears. Fix the variable first. If you would rather not maintain theme code at all, Rubik Variant Images renders card swatches without editing any theme file. Free to install, 5.0 stars across 408 reviews.

This is one of the most viewed unanswered questions in the Shopify community, and the reason it stays unanswered is that nothing looks broken. There is no error, no warning, no empty box. The card just renders exactly as it did before, as if your code was never there. So people assume the metaobject is wrong, or the theme does not support swatches, and go rebuild things that were already fine.

Why it fails silently

On a product template, Liquid gives you a global called product. Any snippet you write there can use it, and everything works.

A collection page does not work that way. It loops through products and renders each one through a card snippet, and that snippet receives the product as a parameter with its own name. In Dawn and the themes built on it, that parameter is card_product. Inside the card, the global product either does not exist or refers to something else entirely.

So a snippet written against product and pasted into the card is asking for something that is not there. Liquid’s behaviour with an undefined variable is not to complain; it renders an empty string. Your loop over the colour metaobjects runs zero times and the card looks untouched.

The fix

Find the card snippet your theme uses, usually snippets/card-product.liquid, and check what the surrounding code calls the product. Whatever that name is, use it in your swatch code. If the card refers to card_product.metafields, then your metaobject lookup has to start from card_product too.

A reliable way to confirm which name is live: temporarily print the product title in the card. If the title appears, you have the right variable and the problem is further down. If nothing appears, the variable is wrong and everything after it was always going to render empty.

Three things that break next, in order

1. The metafield is not exposed to the storefront. A metafield definition can exist and still be invisible to Liquid unless storefront access is enabled. It works in admin, renders nothing on the page.
2. You are reading the metaobject but not its field. A metaobject reference is an object, not a colour. Printing it gives you nothing useful; you need the field inside it that holds the hex value.
3. The option name does not match. Code looking for an option called Color finds nothing on a product whose option is Colour, Shade or Finish. This is the single most common cause of swatches not appearing anywhere, product page included.

The part that bites later

Say you get it working. You now have custom code inside a theme file that Shopify maintains. The next theme update either overwrites it or leaves you merging by hand, and card snippets change more often than most template files because that is where themes iterate on layout.

This is worth knowing before you invest an afternoon. The code is not hard. Keeping it alive across theme updates, across every card variation your theme has, and across the quick-view drawer that uses a different snippet again, is the part that turns into a recurring cost.

If you would rather not own that, this is what app-based swatches are actually for. Rubik Variant Images renders colour swatches on product cards without editing any theme file, because it hooks in through Shopify’s app block system rather than living inside the snippet. Theme updates cannot overwrite what is not in the theme. It is free to install, holds 5.0 stars across 408 reviews, and card support covers 175 themes.

Honest caveat: card swatch support across themes is narrower than product page support, so check your specific theme rather than assuming. And if you only need this on one theme you never plan to update, the Liquid fix above is free and perfectly adequate.

Frequently asked questions

Which Shopify app should I use for collection page colour swatches?

Rubik Variant Images, built by Craftshift, renders swatches on product cards without theme file edits, and clicking one swaps the card image, price and quick add. It holds 5.0 stars across 408 reviews, carries the Built for Shopify badge, and supports card swatches on 175 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.

Why do my swatches work on the product page but not the collection page?

Because the card snippet receives the product under a different variable name than the product template uses, commonly card_product rather than product. Liquid renders an undefined variable as an empty string instead of raising an error, so the swatch code runs against nothing and the card looks unchanged.

Why does my metaobject hex value print nothing?

A metaobject reference is an object rather than a value, so printing the reference itself yields nothing usable. You have to read the specific field inside it that stores the colour. Also confirm the metafield is exposed to the storefront, since a definition can work in admin and stay invisible to Liquid.

Will a theme update break my swatch code?

Very likely, because card snippets are among the files themes change most as layouts evolve. Custom code inside them is either overwritten or has to be merged by hand each time. App blocks avoid this because they are not part of the theme.

Do I need metaobjects for colour swatches at all?

No. Metaobjects are one way to store colour values and they are flexible, but newer themes let you attach a colour or an image to an option value directly, and apps store their own mapping. Metaobjects are worth the complexity when the same colour definitions are reused across many products.

Related reading

• Swatches not showing on collection pages
• Colour swatches on product cards
• Why colour swatches are not working
• Setting up colour swatches properly
• When each colour is a separate product

You can see card swatches running on a real storefront in the live demo store, or read the getting started guide.

If you take one thing from this page, make it the debugging habit rather than the fix: when Liquid renders nothing at all, suspect the variable name before you suspect your data. Silence is what an undefined variable looks like.