1. Ensure that the product 'Color swatches' setting 'Custom image' is selected
This enables the theme to detect .png files from the theme's Assets folder instead of using either valid HTML Colors or 'Custom swatch color' settings.
2. Create images to be used as custom swatch image
Swatch Image requirements
- Must be saved as a .png
- Use lowercase letters and dashes ( - ) instead of spaces
- Ideally square and 100x100
- File name matches the color option and has a prefix of 'color-'. (Example: 'color-black.png' )
Here is an example using our T-shirt product:
We want to add a swatch image for our color 'Royal Blue'. We can take a screenshot of the product image itself to make the swatch image.
We then need to save that file as a .png that matches our color option.
Since our color 'Royal Blue' has a space we need to save the file as 'color-royal-blue.png'
For our other colors that are only one word, we save the file as 'color-maroon.png'
3. Upload images to the theme's asset folder.
- First, we need to open the theme's files with the 'Edit Code' theme action
- Find the 'Assets' folder and click 'Add a new asset'
- Upload your saved .png swatch color image
4. View product to ensure that the color swatch images are appearing
Troubleshooting Swatches
If after following these steps your swatch images are still not appearing, here are some other suggestions.
- Your images are saved in .png format, not .jpg or any other format
- You are uploading your files to the theme's 'Assets' folder (not your shop's Files 'Settings > Files')
- You are including the 'color-' prefix on all of your files (Ex: 'color-royal-blue.png')
- Your images are ideally 100x100 pixels.
- You have selected the 'Custom Images' option.
- If your product option is not titled 'Color' or 'Colour', you will need to add your color option title in the file 'product-swatches.liquid'
For example:
color_options = 'color,colour,farbe'
with no space, unless your option contains a space.