The Swatch colors list gives a color to each value of a color option, such as Timber or Oat. Swatches on product pages and color filters on collection and search pages use it. In the editor sidebar, click Theme settings, then select Color swatches. Show color swatches for variants covers the whole task, from turning swatches on to the other ways to give them colors.
The group holds one field, Swatch colors, with its format in the help text under it.
In the Lair style, the Stoneware Mugs product shows its Glaze option as swatches in the list's colors.
Swatch colors
Enter one color per line: the value's name as it appears in your product's options, a colon, and the color.
Timber:#b26a3f
Light oak:#c8a97e
Ink:navy
The name matches whatever upper and lower case the value uses, so timber and Timber are the same.
The color is a hex code, such as #b26a3f, or an English color name that web browsers know, such as navy.
Spaces around the colon do not matter.
A line without a colon does nothing.
When a name is on two lines, the first one counts.
The list applies to every product in your store.
When the list is used
A swatch takes its color from the first of these it finds:
The color or image you gave the value with Shopify's own swatches, in the product's category settings in the Shopify admin.
The Swatch colors list.
The value's name, when it is an English color name that web browsers know, such as Black or Light blue.
A value that none of these covers shows an empty circle. Product cards do not show swatches.
A color filter shows swatches only when Include swatch is selected for it in the Shopify Search & Discovery app. Without it, the filter lists the color names as text. Adding filters with Shopify Search & Discovery explains the option.
The Lair style comes with eight colors in the list: Chalk, Sand, Stone, Sage, Clay, Charcoal, Ivory and Oat. The Checkmate and Fang styles start with an empty list. Theme styles compares the three looks you can pick when you add the theme.
The Swatch colors list gives a color to each value of a color option, such as Timber or Oat. Swatches on product pages and color filters on collection and search pages use it. In the editor sidebar, click Theme settings, then select Color swatches. Show color swatches for variants covers the whole task, from turning swatches on to the other ways to give them colors.
The group holds one field, Swatch colors, with its format in the help text under it.
In the Lair style, the Stoneware Mugs product shows its Glaze option as swatches in the list's colors.
Swatch colors
Enter one color per line: the value's name as it appears in your product's options, a colon, and the color.
The name matches whatever upper and lower case the value uses, so
timberandTimberare the same.The color is a hex code, such as
#b26a3f, or an English color name that web browsers know, such asnavy.Spaces around the colon do not matter.
A line without a colon does nothing.
When a name is on two lines, the first one counts.
The list applies to every product in your store.
When the list is used
A swatch takes its color from the first of these it finds:
The color or image you gave the value with Shopify's own swatches, in the product's category settings in the Shopify admin.
The Swatch colors list.
The value's name, when it is an English color name that web browsers know, such as Black or Light blue.
A value that none of these covers shows an empty circle. Product cards do not show swatches.
A color filter shows swatches only when Include swatch is selected for it in the Shopify Search & Discovery app. Without it, the filter lists the color names as text. Adding filters with Shopify Search & Discovery explains the option.
The Lair style comes with eight colors in the list: Chalk, Sand, Stone, Sage, Clay, Charcoal, Ivory and Oat. The Checkmate and Fang styles start with an empty list. Theme styles compares the three looks you can pick when you add the theme.
If a swatch shows the wrong color, see Color swatches show the wrong color or none.