PRODUCT - Uploading custom color for color swatch

NOTE : As of today, only our themes Focal and Trademark support color swatch.

Some of our themes provide a color swatch feature on product page and/or collection page. Color swatch replace the traditional dropdown for variant options of type color. However, if you are using some color names that are non standard (like "zebra black", or "denim blue" for instance), you will realize the color swatch appears white.

This is because the theme can't guess which color to display. To make it work, you will need to create your small image and upload them. You will find below detailed instructions about how to do it.

Step 1: add your products' variants

The first step is to create variants.

To do that, open the product in your Shopify admin, and create a new option called "Color":

Create all the possible colors that your product has. For the sake of this example, let's say that we have one variant color called "Black Metal" (rock on baby!). Make sure to write the name of your color variants, we will need them later.

Step 2: create your images

The second step is to create your images in your favourite image editor (like Photoshop, Gimp, Pixelmator...). Because color swatch are small, you should create small images. An image of 32x32 pixels is usually enough. The image MUST be in PNG format.

Save your image. But  PAY ATTENTION TO THE NAME of the image, this is very important. It must be the handleized version of the color's name you have used in your product.

To convert a name to a handle, you must:

  1. Replace any space by a dash.
  2. Transform everything to lowercase.

For instance, the handle for our option "Black Metal" would be "black-metal" (spaces to dash, and everything to lowercase). Special characters must be removed. For instance, if your color is "Black / Metal", the handle for our option is still "black-metal" (and not black-/-metal)!

Because those images must be in PNG format, the final image must be named, in this example, "black-metal.png". Simple isn't it?

Step 3: upload your images to the theme

Now, we must "link" the image we have created to the color by uploading the images you have created to the theme.

First, in your Shopify admin, open the "Themes" section. (if you are already logged to your admin, you can  click here).

Next to the "Customize theme" button, you'll find an icon that looks like three dots (...). Click on it, and select "Edit HTML/CSS":


On the new page, click on the "Assets" blue folder, then on "Add a new asset", and choose the image you have created:

Repeat the process for all your images.