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.

For Prestige, the instructions are different based on the version. To know more about which version of the theme you are using, please click here to see the 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 64x64 pixels is usually enough to ensure a good quality. 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" (make sure that .png extension is in lowercase as well). 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 as well as Prestige (starting from version 4), are using a new way using the "Files" folder instead of the "Assets" folder.

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 64x64 pixels is usually enough to ensure a good quality. 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" (make sure that .png extension is in lowercase as well). 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 "Files" section. (if you are already logged to your admin, you can click here). To do that click on "Settings" in the bottom of the sidebar:

4

Then, click on the "Files" section:

5

Click on the "Upload files" button situated at the top right, and upload your image:

6

Make sure that the file name (in the "File" column - the first one -) is exactly the same as your original file name. For instance, if you upload an image called "black.png", it must be "black.png". If Shopify has renamed the file (like "black-2.png" or something else), this means that a file already existed with the same name. In this case you will need to first remove the original file from the Files, and re-upload again your file.

7

Repeat the process for all your colors.