Color Swatch Images

When using the color swatch setting - if your options title is ‘Color’ ( in the American spelling) - it will automatically pull in colors that reference the HEX range of color names found here:

If you would like to use a custom image as your color swatch you can do so by uploading an image to your store.

We recommend using images that are 100x100px, and keeping them the same to ensure the aspect ratio is the same.

Note:

There's an important naming convention to respect - your image must be named after the color option, but be handleized, and have a .png extension.

For example, if you have a color called ‘Déjà Vu Blue’, then name your image deja-vu-blue.png.

Another example, if your color is ‘Blue/Gray’, then name your image blue-gray.png.

A more simple example - if your color is ‘Black’, then name your image black.png.

How to upload

Go to:

  1. Settings → Files → Upload files

  2. Upload your .png image

  3. Refresh your page and you should now see your custom color pulling through!