# 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://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FGt1s0g4YINv1lNYUWaOJ%2Fcolor-swatch1.png?alt=media&#x26;token=c21b9328-cb77-4b67-9ea5-7f50c4825b01" alt=""><figcaption></figcaption></figure>

* Click on **All definitions > Color**

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FsZzO29FDHVEbUSgyPQ4V%2Fcolor-swatch2.png?alt=media&#x26;token=43aafa13-1007-4ce6-b714-19e16166a484" alt=""><figcaption></figcaption></figure>

* Add a new entry from here

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FThFn8bB1dhQtU70k3vw6%2Fcolor-swatch3.png?alt=media&#x26;token=7f9fb040-ef63-46e4-8201-38164182be73" 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://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FyxIsikXZoBb0V0ncGAlK%2Fcolor-swatch4.png?alt=media&#x26;token=15cd4dcd-bd2d-430b-9c1c-7c7076fee608" 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://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FfiGGnMdMqQ8QgnI0XKw2%2Fvarint-image1.png?alt=media&#x26;token=1b1700e0-fb25-44c0-8a36-f91521814f64" alt=""><figcaption></figcaption></figure>

* Select/Add required colors.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2Fo8OFqvq8N63grYowLM71%2Fvarint-image2.png?alt=media&#x26;token=a524713b-ecf5-472e-952b-7f7a41abfcf1" alt=""><figcaption></figcaption></figure>

* Click on the added color to edit it.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FjOGuZmUmmF4CK98R1IZT%2Fvarint-image3.png?alt=media&#x26;token=ac533c7e-27ed-4b24-86b0-b96570f4680b" alt=""><figcaption></figcaption></figure>

* Add image here and Save.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FWXE5nKmpj8iLK7doZR39%2Fvarint-image4.png?alt=media&#x26;token=1abb0a49-f450-44ec-bb45-d48bef3db40e" 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://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FRw5BMd4VxeNMbSLqYAh2%2Fvarint-image5.png?alt=media&#x26;token=c95e1bcc-a447-4925-937b-9b5cb142054e" alt=""><figcaption></figcaption></figure>