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.

Other example, if your color is 'Blue/Gray', then name your image blue-gray.png.

Most simple example, if your color is 'Black', the name your image black.png.

How to upload

Please navigate to:

  1. Admin

  2. Online Store

  3. Flow

  4. Actions

  5. Edit code

  6. Assets

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

Once on this menu, upload your .png image.

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