> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/koto-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/koto-documentation/collection-filter-color-swatch-from-metaobject.md).

# Collection filter color swatch from metaobject

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

#### display the color swatch using the metaobject in the collection filter, follow the steps below

* From your Shopify admin, go to **Settings** > **Custom data.**

<figure><img src="/files/pu1hywAVhJiuEVKBztK7" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/6UljNtTpqrw8i5u52Zzp" alt=""><figcaption></figcaption></figure>

* Click on "**Add definition".**

<figure><img src="/files/MPrjnQTjRNOnYnnhLNvp" alt=""><figcaption></figcaption></figure>

* Add the desired name if needed and Add field.

<figure><img src="/files/0hituksT1OJXNnJx9O7U" alt=""><figcaption></figcaption></figure>

* Select **File** type.

<figure><img src="/files/rwxbisxjDJ9xtCRw4a0Y" alt=""><figcaption></figcaption></figure>

* Add the desired name if needed and Accept all file types, then click on **Add** button.

<figure><img src="/files/S6Vac2OIpLfiMM67e59J" alt=""><figcaption></figcaption></figure>

* To add a second field, click on '**Add Field**' again.

<figure><img src="/files/010KBHfPhYxxEku4BvdM" alt=""><figcaption></figcaption></figure>

* Click on "Single line text".

<figure><img src="/files/aArN2lxtt7mIaG0Q4RMA" alt=""><figcaption></figcaption></figure>

* Add the desired name if needed and click on "Use as filter in metaobject index", then click on **Add** button.

<figure><img src="/files/2TYhAkjNza84fiE93kYC" alt=""><figcaption></figcaption></figure>

* The metaobject fields you created will be displayed. Then click 'Save'.

<figure><img src="/files/NhIhEHr2BfwTzY6PBTuq" alt=""><figcaption></figcaption></figure>

* From your Shopify admin, go to **Settings** > **Metafields and metaobjects > Products.**

<figure><img src="/files/KjRTiCxSH4udNTO9gHCp" alt=""><figcaption></figcaption></figure>

* Click on "**Add definition**".

<figure><img src="/files/WsgGvcaVLAgoP0iC6xAT" alt=""><figcaption></figcaption></figure>

* Add the desired name if needed. The name you add here will be displayed in the collection page filter. then click on Select type.

<figure><img src="/files/bqZiuarHy5jxnYuuIbiZ" alt=""><figcaption></figcaption></figure>

* Click on "**Metaobject**".

<figure><img src="/files/9uvedgbSBdzO6sjUXc9r" alt=""><figcaption></figcaption></figure>

* Select the "**Reference**".

<figure><img src="/files/WkDF18s3Y6lTbqkrlMpl" alt=""><figcaption></figcaption></figure>

* Click on created metaobject, then select the "List of entries" and **Save**.

<figure><img src="/files/M7n0Yxnue1tDa0AzuCW9" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/DHXC24LImSzzrFWjdLLw" alt=""><figcaption></figcaption></figure>

* From your Shopify admin, go to **Content > Metaobjects.**

<figure><img src="/files/DTBjKM2C1QrY0tW5QBh3" alt=""><figcaption></figcaption></figure>

* Click on "Add entry".

<figure><img src="/files/IwlBWJ8EdV4agx9X9mqL" alt=""><figcaption></figcaption></figure>

* Select the image you want to display in the color swatch filter and add a label, Then Save.

<figure><img src="/files/wrafLu78xX7TaK8NdWYP" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/WDMm7bi9b0CbG5MCrnM6" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/P4De2l9inwqYyHz2JELb" alt=""><figcaption></figcaption></figure>

* Install the "**Search & Discovery**" app and open it.

<figure><img src="/files/YJb6HGnK5zc87VTdd3Xz" alt=""><figcaption></figcaption></figure>

* Click on "Filters" and Add filter.

<figure><img src="/files/qNY6T3sLilDftMlN1NYd" alt=""><figcaption></figcaption></figure>

* Select the source.

<figure><img src="/files/aJ0xLkvuXFevfEQIsywl" alt=""><figcaption></figcaption></figure>

* Select the metafield for the name that you created in the product here and Save.

<figure><img src="/files/ZwD6MGXQavDr3RA5IrLh" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/UoohbpWqrKcwSCFy8kgS" alt=""><figcaption></figcaption></figure>

* From your Shopify admin, go to **Products** and select any one product.

<figure><img src="/files/uLBZYTKNxosFW8UNNgNE" alt=""><figcaption></figcaption></figure>

* Select the entry you added in the metaobject under the content section here and Save.

<figure><img src="/files/V4mCfygiBmPjICwyRUGz" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/VzZmJJ5tcl1lILMqMqRQ" alt=""><figcaption></figcaption></figure>

* The color swatches created from the metaobject will be displayed within the filter on the collection page.

<figure><img src="/files/TgXB5jMs3E32xP0XeNVp" alt=""><figcaption></figcaption></figure>
