---
description: >-
  Please follow the below steps to set up the swatches on product page and
  filters. Also note that color swatches are not available in the product grids
  of collection pages.
---

# How to set up the swatches

* Upon logging in, navigate to your Shopify dashboard and pick the Online Store > Themes tab.

![](https://4009794490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGaLb2C8Lexu13T0H4nYj%2Fuploads%2F2MvQXx3jZEu64aJwfblr%2Fimage.png?alt=media\&token=6dae52ff-d35c-423c-aee9-cbcd1431d7c1)

* When you click the Action button, a tiny drop-down box will appear. Press Edit code.

<figure><img src="https://4009794490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGaLb2C8Lexu13T0H4nYj%2Fuploads%2FKTQggTJZtc1XCCVMBJwz%2Fimage.png?alt=media&#x26;token=cd5420ba-d29d-4faf-83c5-916af04c3d88" alt=""><figcaption></figcaption></figure>

* You are now on the page for the template editor. Go to the Assets folder → Add a new asset.

![](https://4009794490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGaLb2C8Lexu13T0H4nYj%2Fuploads%2Fn35VVk4G67OAHBGg7MPz%2Fimage.png?alt=media\&token=d3ea5359-2ee7-447e-a812-f6da769e2971)

* Repeat the above steps to upload the images for your color swatch.

**Rules to follow for image upload for color swatch:**

* Size: You must upload an image with a size of roughly 20 × 20 pixels.
* Extension: There must be a “.png extension.”
* Naming conventions: The image's name must reflect the color option and be all lowercase with no spaces.

**Here is a collection of examples:**

* If your color is "Light Blue," upload the image with the filename light-blue.png.
* If your color is "Blue/Gray," upload the image with the filename blue-gray.png.
* If your color is "Blue," upload the image with the filename blue.png.

Note: In case the theme is updated to the new version, all the existing swatch images uploaded will need to be uploaded again following the above procedure.

### **A problem: The assets have been updated, but the color swatches are still not showing.**

To solve this, please make sure that the product option name is added in the theme editor. To know how to do that, follow the below procedure:

**The problem is:**\


<figure><img src="https://4009794490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGaLb2C8Lexu13T0H4nYj%2Fuploads%2F4urVNsuvIfQ8AzNc3ZLa%2Fimage.png?alt=media&#x26;token=a5b21bd6-391d-4950-97da-5f96be501d81" alt=""><figcaption></figcaption></figure>

Go to the theme settings> Product> Color options name\
and add the option's label name, as shown below:\
\


<figure><img src="https://4009794490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGaLb2C8Lexu13T0H4nYj%2Fuploads%2FnPOGkxhAJTCAC08esBLY%2Fimage.png?alt=media&#x26;token=aca5aaa3-0ae3-410e-a10d-f031d56023a4" alt=""><figcaption></figcaption></figure>

Adding the label name will connect the colors with that specific option name and the color swatches with start showing, as shown above. so **the problem is solved.**
