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. Enter your color mappings, one per line, in this format:
  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.