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 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.
- 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.
- “Coral Red” would require a file named “coral-red.jpg”
- “Coral/Red” would require a file name “coral-red.jpg”
- “Blue-green” would require a file named “blue-green.jpg”
- Go to Settings > Files > Upload file
- Your swatch colour images can then be displayed on both product and collection pages.