Swatches can be added in the latest versions of our Boost, Expression, Showcase and Symmetry themes. These are small visual indications of what colours the product is available in.
For example:
Note: Each theme will have a different way of showing swatches, the above is just for illustration.
- How to enable Swatches
- Why don't I see the option to enable Swatches?
- Why don't my colours show up?
- Can I add my own custom Swatches?
- How can I make my own Swatches?
How to enable Swatches
Head into the theme editor and go to the following
theme settings > products > swatches > enable swatches.
You will see Option name, this is the name of the variant you have added to the product for colour.
Be sure to type in the name exactly the same as these are case sensitive and need to match, otherwise, it won't detect the colour variant and not show the swatches.
Why don't I see the option to enable Swatches?
If you don't see the option but the theme supports swatches, it's likely you are on an older version of the theme and will need to update it. See Shopify guide for updating themes through the following link. How to update your theme.
Why don't my colours show up?
If you are using the css method and your coloured swatches do not appear, the reason for this is you have likely added a colour variant that is not in the list of supported colour swatches or that there is a mismatch in the spelling.
To see a full list of colour options you can use, you can click the link below. You can use the filter at the top to select a primary colour and it will pull you to all the options that you can select from.
Creating Swatches for generic colour variant options is fine. But if you are using a colour variant for example Pink Rose Gold, it's very specific and not common. So we are limited to what we can provide when it comes to this. This is why we have added the ability to create and upload your own if you run into this along with a guide that shows you how below.
Important Note - if you choose a multi word colour like "Light Green" or "Medium Slate Blue", please include a space between the words in your tag and variant name.
Can I add my own custom Swatches?
Yes. Below will lay out the steps you need to take in order for it to work. Make sure you enable the fact you want to use your own uploaded swatches in the settings.
theme settings > products > swatches > Source > Uploaded Images > save changes
1. Create a small png file for each colour. (40px x 40px is a good size.)
The name of the png file must match the "handle-sized" version of the variant name.
- Use only lowercase letters
- Replace any spaces with a dash
- Remove any special characters
Examples:
- "Coral Red" would require a file named "coral-red.png"
- "Waldgrün" would require a file named "waldgrun.png"
- "Blue-green" would require a file named "blue-green.png"
2. Go to settings > files > upload file
3. Your swatch colour images will then be displayed on both product and collection pages.
Note: If you only have one colour available, swatches will not be shown on the collection page.
How can I make my own Swatches?
I have put together a video guide on how you can create your own swatches from scratch. In the video, I use a tool called Pixlr X which is free on web editor that you can use but you can use whatever editing software you like.
