PRODUCT - Uploading custom color for color swatch

This feature is only supported in our themes Focal, Trademark, Prestige and Warehouse. Kagami does not currently support this.

On Focal, Trademark and Prestige themes, you will need to buy the theme before you can upload color swatches (it requires access to the theme files). On Warehouse, you can upload your custom color swatches even in trial mode.

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. Please choose below the theme you are using in order to see the appropriate instructions.

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.

Warehouse is our first theme to feature a completely new, simpler way to set up color swatches.

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

Then, open the theme editor and choose the "Config: Color swatches" section (it should be the first section in the list):

3

Click on the button "Add color":

4

Set the color name to use the exact same spelling as in your product pages (in our example, it must be "Black Metal"):

5

Finally, either upload a custom image (by following the recommended dimensions) OR choose a color through the color picker: