> For the complete documentation index, see [llms.txt](https://sitar-doc.winterinfotech.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sitar-doc.winterinfotech.com/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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FiZ59cpaVRTRjqLZ5wKQk%2Fcolor-swatches.png?alt=media&amp;token=bb1d7895-e495-477a-8605-3cf99789d9c2" alt=""><figcaption></figcaption></figure>

## Working of swatches

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FpZNNdlsUoDaouOPMolKB%2Fvariant-name.png?alt=media&amp;token=b8f029d1-c7f3-4352-8bd1-fb4666043c8f" alt=""><figcaption></figcaption></figure>