How do I set up color swatches?

You can enable color swatches in three different areas of your theme, depending on where you want them to appear.

1. Product Page

You can add color swatches to your product pages using these settings found on your Product Page > Product > Variant Picker > Enable color swatches

2. Collection Page

You can add color swatches to your collection pages - shown below the product grid, using these settings found on your Theme settings > Product tiles > Enable color swatches

3. Collection Filter

You can enable color swatches for filtering on collection pages using the settings found in the Collection template > Product grid > Enable color swatches

Once you have enabled the color swatch settings, your theme will look for any variant category with the name "Color" or "Colour".

To change the word to something other than "Color/Colour" you can do so in your languages area under Edit theme content > Products > General > Color swatch trigger.

Note: 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 (in this case Heather grey and Green) and look for an HTML color name with the exact same name.

If the color name does not appear in the HTML list, the theme will look for it in your Shopify files so you need to create a color swatch image for your color and upload a .png image file in Content > Files with a filename-friendly version of your variant name.

• Green swatches would need to be named green.png (capitals become lowercase)

• Heather grey swatches would need to be named heather-grey.png (capitals become lowercase, spaces and other special characters become hyphens)

• .jpg files will not be shown, you must use .png

Use the checklist below to troubleshoot why your color swatches aren't appearing.

1. If your color variant option is named anything other than Color or Colour, have you updated the color swatch trigger in your language settings?

2. Have you enabled color swatches for the specific section where you want them to be displayed?

3. 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.