PRODUCT - Uploading custom color for color swatch

This feature is only supported in our themes Focal and Trademark. Support for Kagami will be added later this year.

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.

1

You will need first to create variants whose option is "Color". To do that, simply open the product in your Shopify admin, and create a new option called "Color":

In the "option values", indicate all the product's colors. 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.

2

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?

3

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).

4

Click on the "Actions" button for the theme you want to customize, and click on "Edit code":

5

Open the "Assets" blue folder, then on "Add a new asset", and upload the image you have created:

6

Repeat the process for all your colors.