How do I add custom color swatch images?

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. 

enable-swatches.png

 

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.

color-screenshot.png

 

We then need to save that file as a .png that matches our color option.

variant-colors.png

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

edit-code.png

  • Find the 'Assets' folder and click 'Add a new asset'

add-asset.png

  • Upload your saved .png swatch color image

upload-asset.png

 

4. View product to ensure that the color swatch images are appearing

complete.png

 

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'

color-colour-edit-code.png

 For example:

color_options = 'color,colour,farbe'

with no space, unless your option contains a space.

Have more questions? Submit a request

0 Comments

Article is closed for comments.