Feature

Shopify colour swatches without an app

Draw real colour swatches on the product page and the collection card, from Shopify's own colour data — no app, no hex codes typed into a theme setting.

What is Colour swatches?

A colour swatch is a small coloured circle a shopper taps to pick a variant, instead of choosing from a dropdown. Hullara draws them from Shopify's own colour-pattern metaobject, so the colour shown is the colour stored against the product rather than a value re-typed into the theme.

Why most themes need an app for this, and this one does not

Shopify already knows what colour your Sand t-shirt is. It stores it as a colour-pattern metaobject linked to the colour option on the product, and it is real structured data — a colour, a name, and a reference into Shopify's own colour taxonomy.

Most themes do not read it. So the swatch apps exist to store a second copy of the same information, inside the app, which the merchant then maintains by hand. Two copies of the truth, a monthly fee for the second one, and a script on your storefront to render it.

Hullara reads the first copy. There is no app, no hex code typed into a theme setting, and no second list to keep in step. The consequence worth caring about is not the saved subscription — it is that a swatch cannot disagree with the variant it selects, because there is only one place the colour is written down.

Where they appear

Two places, from one setting:

  • The product page, in the variant picker, as the way a shopper chooses.
  • The collection card, so a shopper scanning a grid can see that a product comes in five colours before clicking into it.

The setting itself offers three modes — swatch only, swatch with the colour name, or the name alone. Which you want depends on your palette: five clearly distinct colours read fine as circles, while four shades of off-white need their names.

Neither mode will invent a colour

If an option value has no colour data behind it, Hullara renders its name, not a placeholder circle.

That is a deliberate refusal and it is the same principle as the rest of the theme. The obvious alternative is to fall back to grey, which produces a row of identical grey discs where a shopper cannot tell Sand from Stone from Bone — the picker looks finished and communicates nothing. A name is less pretty and it works.

The four things that have to be true, which no error message will tell you

This is written down because it cost real time to establish, and because if your swatches are not rendering, the reason is almost certainly one of these — and Shopify's API will not name it.

One — the metaobject type has two hyphens. It is shopify--color-pattern. The dotted form that appears everywhere human-facing, shopify.color-pattern, is RECORD_NOT_FOUND through the API.

Two — the color field holds one colour, not a list. A pattern with several colours is a different thing; a swatch is one.

Three — both taxonomy references are required. color_taxonomy_reference and pattern_taxonomy_reference are not optional, so an entry with only a hex value is rejected as "Base color can't be blank" — an error that names the colour and never mentions the missing reference.

Four — and this is the one that costs the most time — a product with no taxonomy category cannot hold a swatch at all. Colour-pattern is a category metafield. An uncategorised product rejects every colour you send it as "invalid", and the error names the value rather than the category, so it reads like a problem with your colours. It is not. Set the product's type from Shopify's taxonomy and the identical values are accepted.

We established that last one by sending two byte-identical requests, one to a categorised product and one to an uncategorised product, and reading the difference. Every product in both of Hullara's demo catalogues now names its full taxonomy path, resolved against Shopify live and matched exactly — because searching the taxonomy for "T-Shirts" returns children's clothing first.

One more, if you are writing this yourself: productSet cannot link an option to a metaobject. That is productOptionUpdate, with the ids in optionValuesToUpdate rather than in linkedMetafield. Nothing in the error for the first call points at the second one.

What this does not do

It does not generate colours from your product images, and it does not guess. If Shopify does not hold a colour for a variant, the theme shows the name. If you want a swatch, the colour goes into Shopify — where your other systems can read it too, which is the point of putting it there rather than in a theme setting.

It also does not show a pattern or a texture image per variant. That is a different feature and it is not here.

Which edition

Both. Swatches are part of the product page in Core and in Pro — this is not a Pro feature. The full section and block list for each edition is on the pricing page, generated from the theme's own build rather than typed out, so it cannot promise you something the zip does not contain.

Questions people actually ask

Do I need an app for colour swatches on Shopify?

No. Shopify stores colour data natively as a colour-pattern metaobject linked to a product option, and a theme can read it. Hullara does. Swatch apps exist because many themes do not read that data, so the app stores its own copy — which then has to be kept in step with your catalogue by hand.

Where does the colour come from?

From the product itself. Each colour option value links to a colour-pattern entry holding one colour, and the theme renders that. Nothing is typed into a theme setting, so a swatch cannot disagree with the variant it selects.

What happens to a colour with no swatch data?

It falls back to its name. Neither swatch mode invents a colour, because the alternative is a row of identical grey discs that all look like the same product — a shopper cannot tell which one is Sand.

Why do my swatches say the colour is invalid?

Almost always because the product has no taxonomy category. Colour-pattern is a category metafield, so an uncategorised product cannot hold one, and Shopify reports every colour as invalid without ever mentioning the category. Set the product's product type from Shopify's taxonomy and the same values are accepted unchanged.

Can I show the colour name as well as the swatch?

Yes — one theme setting offers swatch only, swatch with the name, or the name alone, and it reaches both the variant picker and the product card from that one place.

Which edition includes this?

Both. Swatches are part of the product page in Core and Pro; they are not a Pro feature.