> 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/dynamic-source-of-color-swatch-variant-image.md).

# Dynamic source of color swatch variant image

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

**Follow the steps to add a color entry.**

* In the Shopify admin panel, go to the **Content > Metaobjects > Active**

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FgTORZ2R2vA4fTKGSfVbl%2Fcolor-swatch1.png?alt=media&amp;token=f9ccb9af-9f10-489e-a4ad-7d29183acea5" alt=""><figcaption></figcaption></figure>

* Click on **All definitions > Color**

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2F1eq6OaB56QNLk5lyz6Lj%2Fcolor-swatch2.png?alt=media&amp;token=6e920288-80e6-423d-b19c-40bc662fc65e" alt=""><figcaption></figcaption></figure>

* Add a new entry from here

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FnRugGs5iVjlWDFH7TtkH%2Fcolor-swatch3.png?alt=media&amp;token=f8875954-e759-4785-864a-559c6208ffa1" alt=""><figcaption></figcaption></figure>

* Here, you can add a Color name along with its Color code, otherwise you can also upload an Image

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2Fgfead2BiVU2cvhKIbLNG%2Fcolor-swatch4.png?alt=media&amp;token=fd7d7269-313b-470c-a029-dedd96164925" alt=""><figcaption></figcaption></figure>

You can add images to the color swatch using the dynamic source of metafiled. Follow the below steps:

* Go to the Products
* Open anyone product.
* Click on 'Add options like size or color' and select "**color**"

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FcRBYZfEODcDABW7yOhTy%2Fvarint-image1%20(1).png?alt=media&amp;token=8ea9aa37-dee9-4ec2-b397-f0f3ae936d6c" alt=""><figcaption></figcaption></figure>

* Select/Add required colors.

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FCTpgufhi6wxOay5mCpXQ%2Fvarint-image2.png?alt=media&amp;token=aaa7a62c-34fc-48ff-a6ad-ba393aed443c" alt=""><figcaption></figcaption></figure>

* Click on the added color to edit it.

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FBhgMA8NB1rRB3Ctcrwc0%2Fspaces_ZyN3AVm8eGZ8KfCXj2wM_uploads_JDMI50ed3GdjEngJhZxr_varint-image3.webp?alt=media&amp;token=b30bc491-137b-46c8-8c48-980e4ad8de6b" alt=""><figcaption></figcaption></figure>

* Add image here and Save.

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FuLOJyfwTasNiSFwME2jm%2Fvarint-image4.png?alt=media&amp;token=88203b06-25f5-4599-bd0e-dfaa3345921a" alt=""><figcaption></figcaption></figure>

* When there are color swatches on the product cards and product page, the added images will be displayed.

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FzgUvUq7Y6KEkAxsRqp8P%2Fvarint-image5.png?alt=media&amp;token=d0d25a3d-3673-442b-8c9a-040103217eca" alt=""><figcaption></figcaption></figure>