Color Swatch Images

For the color variants you have, you can either let the theme's coding provide a color for you, or you can upload an image that represents that color.

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


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.

Additionally, images that over 100x100px will not be accepted, so please double-check your image size.

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

On the Edit HTML/CSS page, locate and click the Assets folder to reveal its content.

Under the Assets heading, click the Add a new asset link.

Upload your image.

Repeat steps 2 and 3 until you have uploaded all your images.

There is also this Shopify help guide:

Product pages - Add color swatches to products