Skip to main content
Color swatches let customers see actual colors instead of text labels like “Navy Blue” or “Forest Green” in the variant picker.

​
Setting up swatches

  1. Go to Theme settings → Color swatches in the theme editor.
  2. Under Custom colors and patterns, enter your mappings, one per line, in the format Name=#HEXCODE:
  1. Save your settings.
The name on the left must match the variant option value on your Shopify product. If your product has a variant called “Navy Blue”, your mapping must say Navy Blue=#001F3F. Capitalization doesn’t matter, so navy blue=#001F3F works too.
Elixir ships with common colors already mapped (Black, White, Blue, Navy, Red, Green, Grey, Pink, Purple, Brown, Beige, Orange, Yellow, Cream, Khaki, Camo, Desert, Maroon, Burgundy). You only need to add the colors your products use that aren’t already in the list.

​
Two-tone swatches

For camo, marl, or other two-tone colorways, separate two hex codes with a / to get a diagonal split swatch:

​
Which options become swatches

The Colour option names setting controls which variant options render as swatches. It defaults to:
If your store isn’t in English, or you name the option something else, add your wording to this comma-separated list (for example Farbe, Couleur, Kleur). Options that aren’t in this list render as normal buttons instead of swatches.

​
Where swatches appear

Once configured, color swatches display on:
  • Product pages, in the variant picker
  • Collection pages, on product cards, when color swatches are enabled on the card

​
Patterns and prints

Swatches are solid colors (or two-tone). For prints like “Marble” or “Floral”, use variant images instead. In the product page’s variant picker block, turn on Show variant images so the option renders as thumbnails of the variant photos.

​
Tips

  • Use hex codes. Always the #RRGGBB format.
  • Unmapped colors fall back. If a variant name isn’t in your list and isn’t a basic CSS color name, the swatch renders neutral grey. Grey swatches are your signal that a mapping is missing.
  • Check your products. Go to Products in Shopify admin and copy the variant option values exactly as they’re written.