> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/koto-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/koto-documentation/color-swatches.md).

# 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="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FMPni5hfUDj1PUtu0v5Wd%2Fcolor-swatch.png?alt=media&amp;token=c28039d5-a9f7-459d-abd5-57c7b92e60db" alt=""><figcaption></figcaption></figure>

## Working of swatches

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

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FDSWZztlO5FWsJKETcur8%2Fvariants.png?alt=media&amp;token=fd269464-653a-4fcd-9d6d-d48bfac136f3" 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 Content > 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 Content.
* Click Files.
* In Files, click Upload files to upload your .png swatch files.

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FLKNAUpX09mENEIhwIn2b%2Fupload-files.png?alt=media&amp;token=6d818369-8d0b-4a95-9041-36a0e9b12ebf" alt=""><figcaption></figcaption></figure>