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: 1.) your image must have a handleized name reflecting the color it represents, and have a .png extension. 2.) Additionally, no capitals should be present in your Swatch file-name - all lowercase only.

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

The method for upload will depend on the theme version you're currently working with:

For Envy Version 26.0.1 and older theme versions

Please navigate to:

  1. Admin

  2. Online Store

  3. Envy

  4. Actions

  5. Edit code

  6. Assets

  7. Use the 'Add a new asset option' here:

Once on this menu, upload your .png image.

For later theme versions

Go to:

  1. Settings → Files → Upload files

  2. Upload your .png image

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