# 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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FNriWg04qrIQPg1ouFEfN%2Fcolor-swatch1.png?alt=media&#x26;token=6ccd9b58-18f1-4155-89a9-887d612332bc" alt=""><figcaption></figcaption></figure>

* Click on **All definitions > Color**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FNzpIdrXFctU0wNvkcAHU%2Fcolor-swatch2.png?alt=media&#x26;token=dfbab071-1a4a-40f6-9103-bf1a0bbc0f61" alt=""><figcaption></figcaption></figure>

* Add a new entry from here

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FDXpiHam0WahxgBqLwaZD%2Fcolor-swatch3.png?alt=media&#x26;token=a15629d4-019c-45eb-be85-f3a26f6b67fe" 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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FZK9qczEUrO1xj4ToaBNV%2Fcolor-swatch4.png?alt=media&#x26;token=a5fb2a75-45da-440d-b8d7-b483a3660344" 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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FOYn13dlnF0M4MGStN9K9%2Fvarint-image1%20(1).png?alt=media&#x26;token=3987477d-046b-4bd4-b1e3-688331d06c2b" alt=""><figcaption></figcaption></figure>

* Select/Add required colors.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F2xa4DGXhqZRi2JfATdC6%2Fvarint-image2%20(1).png?alt=media&#x26;token=5b120ddb-1d43-4125-9c86-f58815ff8038" alt=""><figcaption></figcaption></figure>

* Click on the added color to edit it.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F3PtfrLTNj905aB2xLc2I%2Fedit.webp?alt=media&#x26;token=759dc538-5aec-41f7-9458-5ead82c7b413" alt=""><figcaption></figcaption></figure>

* Add image here and Save.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fo9q6v58bIUDc6dYYeFCa%2Fa.png?alt=media&#x26;token=5c4f47cf-137c-472a-981f-abda6893f5be" 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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fa8hybKpqoYq2ogQWFDdR%2Faa.png?alt=media&#x26;token=9448ac30-f871-467e-b3ee-39bb8a740097" alt=""><figcaption></figcaption></figure>