> ## Documentation Index
> Fetch the complete documentation index at: https://testdocs.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. Enter your color mappings, one per line, in this format:

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

3. Save your settings.

The color name must **exactly match** the variant option name in your Shopify product. If your product has a variant called "Navy Blue", your mapping must say `Navy Blue: #001F3F`.

## Where swatches appear

Once configured, color swatches display on:

* **Product pages** — in the variant picker
* **Collection pages** — on product cards (if color variants are enabled on cards)

## Tips

* **Case-sensitive** — "navy blue" and "Navy Blue" are different. Match the exact casing from your product variants.
* **Use hex codes** — always use the `#RRGGBB` format for colors.
* **Image swatches** — for patterns like "Marble" or "Floral", you can use variant images instead. Shopify will display the variant image as the swatch automatically.
* **Check your products** — go to **Products** in Shopify admin and look at the variant option names to make sure they match your mappings exactly.