# How to set up the swatches
* Upon logging in, navigate to your Shopify dashboard and pick the Online Store > Themes tab.
* When you click the Action button, a tiny drop-down box will appear. Press Edit code.
* You are now on the page for the template editor. Go to the Assets folder → Add a new asset.
* 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:**
Go to the theme settings> Product> Color options name\
and add the option's label name, as shown below:\
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.**
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://shinedezign.gitbook.io/yuva-knowledgebase/sections/how-to-set-up-the-swatches.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
