Color swatches replace plain text option names with visual color indicators, making it easier for customers to browse and select product variants. They can appear in three places:
Shopify has built-in support for color swatches. When you assign swatches directly to a product in the Shopify admin, the theme displays them automatically - no additional configuration is needed.
To learn how to assign color swatches in the Shopify admin, see Using category metafields.
You can also define color swatches using the legacy format in theme settings.
In the Custom swatches field, add one swatch per line using the formats described below.
Each line in the configuration field defines a single swatch. The general syntax is:
Name:value
where Name is the color option value as it appears on your product and value is a HEX color code or an image filename.
Red:#FF0000
Light blue:#00AAFF
Iris:#5D3FD3
Enter the color name, a colon, and the HEX value. Each color must be on its own line.
Purple / Light blue:#B055C4#84DAFF
Black and White:#000000#F4F4F4
To create a two-tone swatch, append a second HEX value directly after the first - no separator needed.
Leather:leather.jpg
To use an image as a swatch, provide the filename of an image uploaded to your Shopify store.
.jpg image.Add a line to the Custom swatches field using the exact filename (including the extension) as it appears in your Shopify admin:
Leather:leather.jpg
Wood grain:wood-grain.png