# Color swatches

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

### Setting up color swatches <a href="#setcolorswatch" id="setcolorswatch"></a>

You can add color swatches to your product page, collection pages, and home page across the theme using these settings that you see in the below screenshot:

<figure><img src="/files/YRlFM8CBV3Xm9rTrzDmY" alt=""><figcaption></figcaption></figure>

### Working of swatches

Once you enable the color swatch settings, Viola will look for any variant with the name "Color."

<figure><img src="/files/lDbKdNTLRyS569DpsIvO" alt=""><figcaption></figcaption></figure>

The theme will look at the variant names taken into use; in the case of Royal blue and Pink, it will look for either an [HTML color name](https://www.rapidtables.com/web/color/html-color-codes.html) with the exact same variant name or a .png file in Settings > Files.

### Swatch files name

The **Royal blue** swatch needs to be of royal-blue.png name (capitals become lowercase and space will remove).

**Pink** swatches would need to be of pink.png name (capitals become lowercase).

{% hint style="info" %}
You must use .png as the .jpg files will not display.
{% endhint %}

### 'Files' option in the Shopify admin

* From your Shopify admin, go to Settings.
* Click Files.
* In Files, click Upload files to upload your .png swatch files.

<figure><img src="/files/UDBFRzCVB0sHV52KoJnQ" alt=""><figcaption></figcaption></figure>

<br>


---

# 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://webibazaar.gitbook.io/viola-documentation/color-swatches.md?ask=<question>
```

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.