Each swatch takes its color from the first of these that it finds: the swatch you set for the value in your Shopify admin, then the Swatch colors list in Theme settings > Color swatches, then the value's own name when it is a color name that web browsers know. A swatch that finds none of them is an empty circle. Show color swatches for variants describes the three sources.
This is the most likely cause of an empty circle. A value named after a color that web browsers know, such as Black, Navy or Light blue, gets that color with no set-up. A name of your own, such as Noir, Moss or Ember, gets no color. You can recognize this cause when the circle is empty and the value has a name of your own.
Some names of your own are also web color names, such as Olive, Tan or Coral. Those swatches show the browser's shade, which can differ from your product. In the Lair style, the Swatch colors list starts with eight colors: Chalk, Sand, Stone, Sage, Clay, Charcoal, Ivory and Oat. A value with one of these names shows Lair's shade until you change its line.
In Swatch colors, enter one line for the value: its name, a colon, and a color, such as Moss:#6b7b4f.
Click Save.
Each swatch of that value then shows the color from its line.
The name in the Swatch colors list doesn't match the value
A line in Swatch colors applies only to a value with the same name. Upper and lower case do not matter, but spaces and spelling do: Light oak does not match Lightoak or Light oaks. You can recognize this cause when a value you added to the list still shows an empty circle or the browser's shade.
Check each line too:
One value per line.
The name and the color are separated by a colon.
A hex code starts with #, such as #b26a3f. Without it, the swatch stays empty.
A Shopify swatch overrides the list
A color or image you set for the value in your Shopify admin comes before the Swatch colors list. You can recognize this cause when changing the value's line in Swatch colors changes nothing on the page. Change the value's color where you set it in your Shopify admin instead, as described in Shopify's guide to swatches.
The page shows a dropdown or buttons instead of circles
Style in the Variant option block has four values: Dropdown, Buttons, Swatch and Variant image. Round swatches show only with Swatch. With Dropdown or Buttons, the option shows its values as words. Variant image shows each variant's photo, and the swatch color only for a variant without a photo. You can recognize this cause when the color option shows a box that opens a list, a row of buttons with the color names, or a row of product photos. In the editor, select the block in the Product information section, select Swatch under Style, and click Save.
Each swatch takes its color from the first of these that it finds: the swatch you set for the value in your Shopify admin, then the Swatch colors list in Theme settings > Color swatches, then the value's own name when it is a color name that web browsers know. A swatch that finds none of them is an empty circle. Show color swatches for variants describes the three sources.
Rule out the cache and the wrong theme
If your other recent changes don't show on your store either, start with My changes don't show on my store. Swatches made by a product options app follow that app's settings. What the theme controls and what Shopify controls explains the difference.
The value's name isn't a color name
This is the most likely cause of an empty circle. A value named after a color that web browsers know, such as
Black,NavyorLight blue, gets that color with no set-up. A name of your own, such asNoir,MossorEmber, gets no color. You can recognize this cause when the circle is empty and the value has a name of your own.Some names of your own are also web color names, such as
Olive,TanorCoral. Those swatches show the browser's shade, which can differ from your product. In the Lair style, the Swatch colors list starts with eight colors: Chalk, Sand, Stone, Sage, Clay, Charcoal, Ivory and Oat. A value with one of these names shows Lair's shade until you change its line.To give a value its own color:
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 line for the value: its name, a colon, and a color, such as
Moss:#6b7b4f.Click Save.
Each swatch of that value then shows the color from its line.
The name in the Swatch colors list doesn't match the value
A line in Swatch colors applies only to a value with the same name. Upper and lower case do not matter, but spaces and spelling do:
Light oakdoes not matchLightoakorLight oaks. You can recognize this cause when a value you added to the list still shows an empty circle or the browser's shade.Check each line too:
One value per line.
The name and the color are separated by a colon.
A hex code starts with
#, such as#b26a3f. Without it, the swatch stays empty.A Shopify swatch overrides the list
A color or image you set for the value in your Shopify admin comes before the Swatch colors list. You can recognize this cause when changing the value's line in Swatch colors changes nothing on the page. Change the value's color where you set it in your Shopify admin instead, as described in Shopify's guide to swatches.
The page shows a dropdown or buttons instead of circles
Style in the Variant option block has four values: Dropdown, Buttons, Swatch and Variant image. Round swatches show only with Swatch. With Dropdown or Buttons, the option shows its values as words. Variant image shows each variant's photo, and the swatch color only for a variant without a photo. You can recognize this cause when the color option shows a box that opens a list, a row of buttons with the color names, or a row of product photos. In the editor, select the block in the Product information section, select Swatch under Style, and click Save.
If the option shows no choices at all, see My product page doesn't show size or color choices.
Product cards show no swatches. In filters, the circles show only when the Search & Discovery app presents that filter as swatches.
Contact support
If a swatch still shows the wrong color, write to us through Contact support and include:
Your Checkmate version. Find your theme version shows where it is.
A preview link to the theme.
The URL of the product page and the name of the value.
The text in your Swatch colors list.