> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ecomelixir.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Color swatches

> Set up visual color swatches for product variants

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`:

```
Red=#FF0000
Navy Blue=#001F3F
Forest Green=#228B22
Blush Pink=#DE5D83
Charcoal=#36454F
```

3. 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.

<Note>
  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.
</Note>

## Two-tone swatches

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

```
Camo=#4a5d23/#8B7355
Black Marl=#000000/#4a4a4a
```

## Which options become swatches

The **Colour option names** setting controls which variant options render as swatches. It defaults to:

```
color, colour, colors, colours
```

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.