Note: If you're using a newer theme that supports Shopify’s native swatch feature, check out our updated guide here for a simpler setup process.
Color swatches show a product’s color variants as small, clickable colors or images, making it easier for customers to choose the color they want.
Enable the 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 Theme settings, select Product tiles, and enable Enable color swatches. This will display color swatches on collection and search result pages, as well as in sections that feature products, such as the Featured collection section.
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.
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, Heather grey and Green) 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.
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).
- Swatches must be in .png format — .jpg files won’t show
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.
Limitations
Variants that share the same name will be treated as the same value by the theme and will be linked to the same variant image. This means different shades or finishes using an identical name (for example, “green”) cannot display separate images.
To use different images, each variant must have a unique name. For example, use Forest Green and Mint Green instead of repeating “green.” You can also add descriptors such as material or finish, like Green Leather, Matte Green, or Green Linen.