> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/flute-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/flute-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>" %}

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://content.gitbook.com/content/2wXphKnAlRWTA61K8EmG/blobs/Q1tAE9HTXCMkSmJ8iKoq/varint-image1%20(1).png" alt=""><figcaption></figcaption></figure>

Select/Add required colors.

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FqrdzZcAydq3KAwaQcjVf%2Fmeta-color.png?alt=media&amp;token=e7cadfb6-0fa3-45d6-86e1-50010216cf50" alt=""><figcaption></figcaption></figure>

Click on the added color to edit it.

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2Fgf3UJgKNs5EJhhgfqgQg%2Feditcolor.png?alt=media&amp;token=08217eb2-dc95-4f79-bbef-92e33672fc72" alt=""><figcaption></figcaption></figure>

Add image here and Save.

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2F1AfDB7dgRX2DAUUX5X2W%2Fvariant-img.png?alt=media&amp;token=3b93ad73-1c4a-45ca-a289-7cc01f4dda53" 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://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FF7aLBje62MySD2GEuRGq%2FFlute-Theme-%C2%B7-Customize-Flute-theme-%C2%B7-Shopify-07-14-2025_03_50_PM.png?alt=media&amp;token=da2dd442-a269-4b4f-8aa1-07358e17064e" alt=""><figcaption></figcaption></figure>