Swatches show each value of an option, such as Color, as a small colored circle on the product page, in place of a dropdown or a row of buttons. Customers click a circle to choose that color. The color's name shows when the pointer is over a circle, and touch screens do not show it, so use colors customers can tell apart.
In the Lair style, the Stoneware Mugs product shows its Glaze option as swatches.
Your product needs an option for colors in its Variants section in the Shopify admin, such as Color or Colour.
Turn on swatches
Each Variant option block shows the option named in its Option name, or every option when Option name is empty. The default product page names only the options its demo products use, such as grind, color or size, and they depend on your style, the starting look you picked when you added the theme. In the Lair style, the glaze and colour blocks already show swatches. If your products use other names, change the names in the blocks, or the page shows no choice for those options. My product page doesn't show size or color choices has the details.
The change applies to every product that uses the default product template.
At the top of the editor, select Products, then Default product.
In the Product information section, select the Variant option block whose Option name is color, colour or another name for the color, such as glaze in the Lair style. If there is none, click Add block in the Product information section and select Variant option.
In Option name, enter the option's name as it appears in the product's Variants section, such as Color. Upper and lower case do not matter.
Under Style, select Swatch. The other choices are Dropdown, Buttons and Variant image, which shows a photo of each variant in place of a circle.
Click Save.
Choose the color of each swatch
Each swatch takes its color from the first of these that it finds.
Source
Where you set it
Use it when
Shopify's swatches
The product's Category and its color option, linked to the category's color metafield, in the Shopify admin
You want one color or a pattern image per value, shared by every theme
Swatch colors list
Theme settings > Color swatches in the editor
Your color names are your own, such as Timber or Oat
The value's name
Nothing to set
Your values are plain color names, such as Black or Navy
Use Shopify's swatches
In the product's page in your Shopify admin, choose a Category, link the color option to the category's color metafield, and give each value a color or an image. Shopify's guide to swatches describes each step. A swatch with an image shows the image cropped to a circle.
In Swatch colors, enter one color per line as the value's name, a colon, and a color, such as Timber:#b26a3f or Light oak:#c8a97e. Upper and lower case in the name do not matter. The color can be a hex code such as #b26a3f or an English color name that web browsers know, such as navy.
Click Save.
The list is used for every product in your store.
Use the value's name
A value that is also an English color name that web browsers know, such as Black, Navy or Light blue, gets that color with no set-up. A name that is not one, such as Sand or Noir, shows an empty circle until you give it a color in one of the two ways above.
Swatches in filters
If the Search & Discovery app shows your color filter as swatches, the filter circles on collection and search pages take their colors the same way: Shopify's swatch first, then the Swatch colors list, then the value's name. Add filters to collection and search pages explains how to set up the filter.
Swatches show each value of an option, such as Color, as a small colored circle on the product page, in place of a dropdown or a row of buttons. Customers click a circle to choose that color. The color's name shows when the pointer is over a circle, and touch screens do not show it, so use colors customers can tell apart.
In the Lair style, the Stoneware Mugs product shows its Glaze option as swatches.
Your product needs an option for colors in its Variants section in the Shopify admin, such as Color or Colour.
Turn on swatches
Each Variant option block shows the option named in its Option name, or every option when Option name is empty. The default product page names only the options its demo products use, such as
grind,colororsize, and they depend on your style, the starting look you picked when you added the theme. In the Lair style, theglazeandcolourblocks already show swatches. If your products use other names, change the names in the blocks, or the page shows no choice for those options. My product page doesn't show size or color choices has the details.The change applies to every product that uses the default product template.
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
At the top of the editor, select Products, then Default product.
In the Product information section, select the Variant option block whose Option name is
color,colouror another name for the color, such asglazein the Lair style. If there is none, click Add block in the Product information section and select Variant option.In Option name, enter the option's name as it appears in the product's Variants section, such as
Color. Upper and lower case do not matter.Under Style, select Swatch. The other choices are Dropdown, Buttons and Variant image, which shows a photo of each variant in place of a circle.
Click Save.
Choose the color of each swatch
Each swatch takes its color from the first of these that it finds.
Source
Where you set it
Use it when
Shopify's swatches
The product's Category and its color option, linked to the category's color metafield, in the Shopify admin
You want one color or a pattern image per value, shared by every theme
Swatch colors list
Theme settings > Color swatches in the editor
Your color names are your own, such as Timber or Oat
The value's name
Nothing to set
Your values are plain color names, such as Black or Navy
Use Shopify's swatches
In the product's page in your Shopify admin, choose a Category, link the color option to the category's color metafield, and give each value a color or an image. Shopify's guide to swatches describes each step. A swatch with an image shows the image cropped to a circle.
Use the Swatch colors list
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, click Theme settings.
Select Color swatches.
In Swatch colors, enter one color per line as the value's name, a colon, and a color, such as
Timber:#b26a3forLight oak:#c8a97e. Upper and lower case in the name do not matter. The color can be a hex code such as#b26a3for an English color name that web browsers know, such asnavy.Click Save.
The list is used for every product in your store.
Use the value's name
A value that is also an English color name that web browsers know, such as
Black,NavyorLight blue, gets that color with no set-up. A name that is not one, such asSandorNoir, shows an empty circle until you give it a color in one of the two ways above.Swatches in filters
If the Search & Discovery app shows your color filter as swatches, the filter circles on collection and search pages take their colors the same way: Shopify's swatch first, then the Swatch colors list, then the value's name. Add filters to collection and search pages explains how to set up the filter.
Product cards do not show swatches.
If a swatch shows the wrong color or no color, see Color swatches show the wrong color or none.