> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/veena-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/veena-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://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FaYgnfUhA4Mq9ocKcXR5b%2Fcolor-swatch1.png?alt=media&amp;token=c06675f9-5e43-4f74-8f7a-bf1e66b4f89b" alt=""><figcaption></figcaption></figure>

* Click on **All definitions > Color**

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FvqUEm2kKW2EgAJbts2pX%2Fcolor-swatch2.png?alt=media&amp;token=11a50138-57f2-4084-9b80-0cfb86ab4ff0" alt=""><figcaption></figcaption></figure>

* Add a new entry from here

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FQ8ObZ2sFZTLIhqbOnH7I%2Fcolor-swatch3.png?alt=media&amp;token=c90050b1-d7e9-4b3f-a42a-047fd566eeaa" 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://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2Fr7oOtU4bgULC5DoNM4R5%2Fcolor-swatch4.png?alt=media&amp;token=2fbd4885-b54d-4b8e-82a2-493c18f38a26" 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://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FD2XGxuQfnvIyZFeyDZp9%2Fcolor1.png?alt=media&amp;token=1e035749-0f32-4b4e-a588-e0e03c755ace" alt=""><figcaption></figcaption></figure>

* Select/Add required colors.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FeUvXaQCovUsv1wphXGgR%2Fcolor2.png?alt=media&amp;token=d75b9285-b142-45d5-b228-a2dd1d9e6b2e" alt=""><figcaption></figcaption></figure>

* Click on the added color to edit it.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FEnfLd7mPD67PHgCwrX0m%2Fcolor3.png?alt=media&amp;token=e4872bc8-055e-4225-8b3b-2132ef6cf86b" alt=""><figcaption></figcaption></figure>

* Add image here and Save.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FFFMFrLoGyX4a8ELGzYR9%2Fcolor4.png?alt=media&amp;token=0caba590-0817-45c5-9a2a-f9c93b3f027b" 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://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FiAYNMiAn5GFetN8xNoez%2Fcolor5.png?alt=media&amp;token=9cbf025d-c761-4e5b-8fc7-3f47be2320fe" alt=""><figcaption></figcaption></figure>
