A color swatch displays each color variant as a small, clickable solid color or image, making it easier for customers to quickly identify and select their preferred color.
Set up variants
If variants are already set up for your products, you can skip this step.
To set up variants for your products, follow Shopify's guide.
Variants - Shopify Help Center
Enable swatches
You can enable color swatches in three different areas of your theme, depending on where you want them to appear.
Product page
In the theme editor, navigate to the Product page template by clicking on Products, then Default product from the page selector.
Under the Product section in the left sidebar, click on the Variant picker block and activate Enable color swatches.
Collection page / Search results page
In the theme editor, click on Theme settings, select Product tiles and turn on Enable color swatches.
Collection filters
In the theme editor, open the Collection page template by clicking on Collections, then Default collection from the page selector.
In the left sidebar, click on the Product grid section to view its settings and activate Enable color swatches.
Shopify swatches
Shopify’s built-in swatches use the color category metafield, which you can assign to a variant option. They show in the product page variant buttons and collection filters, but not on product tiles. Shopify has a guide that explains how to set up the color category metafield:
Adding color swatches using category metafields - Shopify Help Center
After setting up Shopify swatches, they will appear as soon as you enable the swatch feature in the theme.
Theme swatches
The theme can display swatches using colors or uploaded image files. Swatches can appear in product tiles, variant buttons, and in the filters on collection and search pages.
How does it work?
After turning on color swatches, the theme will show them for any variant category with the name "Color" or "Colour". If you use a different name for your color options, you can update it in the language editor.
- Click the ... button on your theme and select Edit theme content.
- In the language editor, go to the Products tab.
- Under General, look for Color swatch trigger.
- Change the word to the term you use for your color options (for example, Shade or Pattern).
- Save your changes.
If you're using a theme trial in your online store, Shopify restricts access to your language settings until a theme purchase has been made. For testing, we recommend using the default 'Color' variant name.
The theme will then look at the variant names you've used (for example, Green and Heather grey) and match them to an HTML color name with the same wording. Colors with standard names, such as Green, will display automatically.
Adding custom color swatches
When a color name doesn’t match an HTML color, the theme looks for a swatch image in your Shopify files. You’ll need to upload a PNG image file in Content > Files with a name based on your variant name.
JPG/JPEG images are not compatible with Vino's swatch feature.
Naming your swatch files
- For Green, use green.png (capitals become lowercase).
- For Heather grey, use heather-grey.png (make lowercase, and change spaces or symbols to hyphens).
Why are my swatches not showing up?
Use the checklist below to troubleshoot why your color swatches aren't appearing:
- Have you enabled color swatches for the specific section where you want them to be displayed?
- If your color variant option is named anything other than Color or Colour, have you updated the color swatch trigger in your language settings?
- Check if your color names are in the HTML color name list. If they are not, ensure you have added custom color swatches by uploading a .png image with a filename-friendly version of your variant name in all lowercase.