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 and Trademark 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.

IMPORTANT, PLEASE READ THIS BEFORE: 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. Then, make sure to select the instructions that apply to your version. Using instructions that do not apply to your version will not work.

I am using...

Focal v8.x, Warehouse v2.x, Prestige v5.x

Those instructions ONLY APPLY to Warehouse v2.x and Prestige starting from version 5.x. If you are using another theme or older version of Prestige or Warehouse, please refer to the correct instructions.

Starting from Warehouse v2 and Prestige v5, we have simplified how color swatch are used, allowing you to either customize the color using hex code, or image.

1
Open the theme editor and, in the bottom, click on "Theme settings":

2
Select the "Color swatch" sub-section. In the "Configuration" box, you will need to enter the name of the color (as written in your Shopify admin), followed by :, and then either the hex color code or the name of a file. You must enter one mapping per line. For instance, here are a few example with hexadecimal code. When writing hex code, do not forget to add the initial # before the color code. It won't work if it is omitted:

If you want to use more complex image (such as pattern), you can also use an image. To do that, you will first need to upload an image in the Files section of Shopify (we recommend a 128x128 image, either in PNG or JPG). You can learn more about how to do that here: https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads

In the configuration, instead of an hex code, enter the file name (do not forget the extension, it won't work without it):

Warehouse v1.x or Prestige v4.x

Those instructions ONLY APPLY to Warehouse theme and Prestige theme (starting from version 4). If you are using another theme or older version of Prestige, please use the tab selector.

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.

Focal, Trademark or Prestige v1, v2, v3

Those instructions ONLY APPLY to Focal and Trademark themes, as well as Prestige theme for versions 1, 2 and 3. If you are using another theme or newer version of Prestige, please use the tab selector.

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.