My color swatches show up as pills

Why a variant option renders as pills instead of colour swatches in Volume, and the two conditions it has to meet.

Volume decides which options become swatches from the option name, and it applies two checks. An option has to pass both. Miss either one and the option quietly falls back to pills — no error, no warning.

Check 1 — the option is listed under Color swatches

Go to Customize → Theme settings → Variant picker and find the Color swatches heading. The Option label field under it is a comma-separated list of option names: Color, Colour, Main color.

The match is on the whole name and it ignores case — Color matches color, but it does not match Color family. Add every spelling your products actually use.

Each display type has its own Option label field under its own heading — Pills, Color swatches, Thumbnail swatches — so make sure you are typing into the right one. An option listed under both Color swatches and Thumbnail swatches renders as a thumbnail.

Check 2 — the option name contains the word "color"

This is the one that catches people out. Beyond the list above, the option name itself must contain the theme's colour keyword, which is Color out of the box. Colour is accepted as well.

So an option called Shade, Finish or Farbe stays as pills even after you add it to the list. Two ways out:

• rename the option so the word is in it — Shade color, Color finish;
• or change the keyword itself. It is a theme text string, not a setting: Online Store → Themes → … → Edit default theme content, under Products, change Color to the word you use. This is also how a non-English store makes Farbe or Couleur work.

This extra check applies to colour swatches only. Thumbnail swatches have no such rule: any option listed under Thumbnail swatches renders as thumbnails whatever it is called. If you need image swatches on an option that cannot be renamed, use thumbnails.

If the swatches appear but show the wrong colour

Volume looks for a colour in this order:

1. a PNG uploaded to Content → Files, named after the option value (ocean_blue.png for “Ocean blue”);
2. a rule in Theme settings → Variant picker → Custom colors for swatches → Configuration, written as Name:#HEX with one rule per line;
3. Shopify's own swatch value for that option, set under Settings → Custom data;
4. failing all of those, the last word of the value read as a CSS colour name — which is why “Ocean blue” ends up plain blue and “Midnight” ends up as nothing.

See Color Swatches for the full setup and Variant Picker for the other display modes.