Swatches can be added in the latest versions of our Boost, Alchemy, Canopy, Expression, Showcase and Symmetry themes. These are small visual indications of what colours the product is available in.
How to enable Swatches
Head into the theme editor and go to the following:
Open any product in theme editor > on left click Product pages > scroll down till you see “Theme settings” and click > then scroll till you see Swatches > Click to Enable colour swatches
You will see Option name, this is the name of the variant you have added to the product for colour. (Example: Color, Colour, Couleur, etc)
Be sure to type in the exact name, as these are case sensitive and need to match, otherwise, it won’t detect the colour variant and won’t show the swatches.
Why don’t I see the option to enable Swatches?
If you don’t see the option, but know that the theme supports swatches, it’s likely you are on an older version of the theme and will need to update it. See Shopify’s guide for updating themes on the following link. How to update your theme.
Why don’t my Swatches show up?
If swatches do not appear, you have likely added a colour variant that is non-standard like “rose black”, or “peach blue” and the swatch appears blank. This is because the theme can’t guess which colour to display. To make it work, you will need to add your own (See next section). Also, check that the Option name spelling is correct and matches the variant name exactly.
How do I add my own custom Swatches?
Below we will lay out the steps you need to take in order for it to work. Make sure you first enable the fact that you want to use your own uploaded swatches in the settings. Then follow steps 1-3.
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 but nothing stops you from using any size.)
The name of the png file must match the “handleized” version of the variant name.
- Use only lowercase letters
- Replace any spaces with a dash (example red-rose.png)
- Remove any special characters, only letters.
Examples of variant naming conventions:
- “Coral Red” would require a file named “coral-red.png”
- “Waldgrün” would require a file named “waldgrun.png”
- “Coral/Red” would require a file name “coral-red.png”
- “Blue-green” would require a file named “blue-green.png”
2. Go to Settings > Files > Upload file
3. Your swatch colour images can then be displayed on both product and collection pages.
Using language app and my uploaded Swatches are not being displayed
In most cases, the answer is because the App will require you to also upload the images with the translated language name added. So if you uploaded a custom swatch named red.png, and you have a French language option, you will need to upload the same image named rouge.png. If, for some reason, this does not work, your next step is to contact the language app developer to see if any more assistance is needed from their side in order for it to work.
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, but you can use whatever editing software you like.