> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/lyra-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/lyra-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://3128577213-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUEBGZ0ypDJpAB41jYu9K%2Fuploads%2Fwma8hmuTvAEbkfb2MNqd%2Fcolor-swatch1.png?alt=media&amp;token=2c86c061-745e-4c43-9004-5db46ffa853f" alt=""><figcaption></figcaption></figure>

* Click on **All definitions > Color**

<figure><img src="https://3128577213-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUEBGZ0ypDJpAB41jYu9K%2Fuploads%2F3axElKx3oHSswAG0OoRf%2Fcolor-swatch2.png?alt=media&amp;token=b47fd508-4153-4d96-b735-5466b8b7430d" alt=""><figcaption></figcaption></figure>

* Add a new entry from here

<figure><img src="https://3128577213-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUEBGZ0ypDJpAB41jYu9K%2Fuploads%2FkTqrBdOODGQn56TwDPmA%2Fcolor-swatch3.png?alt=media&amp;token=806da3a7-505d-4839-9c47-32d488609176" 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://3128577213-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUEBGZ0ypDJpAB41jYu9K%2Fuploads%2FKug6g84E2VrdK8RXcUIJ%2Fcolor-swatch4.png?alt=media&amp;token=37900fc2-f3cf-4442-a28b-2ec2592ae604" 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://3128577213-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUEBGZ0ypDJpAB41jYu9K%2Fuploads%2Fcj9M0OMf6DL58TCxhVy5%2Fvarint-image1%20(1).png?alt=media&amp;token=7103fe3d-c5ee-4262-ac50-4aa674098d88" alt=""><figcaption></figcaption></figure>

Select/Add required colors.

<figure><img src="https://3128577213-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUEBGZ0ypDJpAB41jYu9K%2Fuploads%2FLCktKRZnpWpnK6jAtGqk%2FScreenshot%202025-06-04%20105028.png?alt=media&amp;token=c364fc30-3657-4e04-ada5-1ba46408e49e" alt=""><figcaption></figcaption></figure>

Click on the added color to edit it.

<figure><img src="https://3128577213-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUEBGZ0ypDJpAB41jYu9K%2Fuploads%2FYd13PBgMxHZX4QR6HWtc%2FScreenshot%202025-06-04%20105225.png?alt=media&amp;token=e6777a19-f7ed-4d59-8972-7f88389a8378" alt=""><figcaption></figcaption></figure>

Add image here and Save.

<figure><img src="https://3128577213-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUEBGZ0ypDJpAB41jYu9K%2Fuploads%2FvlpAgGeKaiLlonsahUIq%2Fcolor-lyra.png?alt=media&amp;token=345afcef-a251-4325-a7ef-461e187ee1e4" 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://3128577213-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUEBGZ0ypDJpAB41jYu9K%2Fuploads%2FMRHgCmOFweDRL003BwEF%2FChunky-Oval-Link-Chain-%E2%80%93-Lyra-Webibazaar-06-04-2025_10_56_AM.png?alt=media&amp;token=0b030d21-c68c-4ba6-b4bd-e5fe2ae6b994" alt=""><figcaption></figcaption></figure>