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.
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?
The reason for this is you have likely added a colour variant that is not in the list of supported colour swatches. If you wish to see a full list of colour options you can use, you can click the link below to where we pull our colour options from. You can use the filter at the top select a primary colour and it will pull you to all the options you can select from.
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
- "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.