Skip to main content

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