# 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="https://697656745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5NvthjEku1DrzU4mKb74%2Fuploads%2FwoHA4har7zGfbfWpuzvA%2Fadmin_setting.png?alt=media&#x26;token=36a1bb71-611d-4426-bda5-3585da1545d7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://697656745-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5NvthjEku1DrzU4mKb74%2Fuploads%2FwFZ68bUGIaUtZiQC9SMx%2Fmeta_field_step1.png?alt=media&#x26;token=a811d384-f0f4-40ae-be4c-8da30cdc7c2b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/ZCM0vdFTQtKEn5yWuMRO/meta3.png" alt=""><figcaption></figcaption></figure>

* Add the desired name if needed and Add field.

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/UO7rqOQCdl4WQLwjYAJI/meta4.png" alt=""><figcaption></figcaption></figure>

* Select **File** type.

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/tPOlTHRQnYutncPggORQ/meta5.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/3gOAtj9nuAGy1ZS4iNKw/meta6.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/vBdEfRaF7d5HfNkGtyLG/meta7.png" alt=""><figcaption></figcaption></figure>

* Click on "Single line text".

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/XMt5X4nfBifTjX3pXsHd/meta8.png" 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="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/jg7ToETvEOPJ2oUEfwtO/meta9.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/8zgkftmCvOgXHcRnxuyV/meta10.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/WG8MY43KDybBUpmOPoO7/meta11.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/MDH9SaqVou9MILrXYlg6/meta12.png" 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="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/FN5D4pP96hnOokT5wZFn/meta13.png" alt=""><figcaption></figcaption></figure>

* Click on "**Metaobject**".

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/zaoMHKl41xMWJMkIPxmP/meta14.png" alt=""><figcaption></figcaption></figure>

* Select the "**Reference**".

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/8xsp8sIYTG5kfU4JO8dY/meta15.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/5Cs67otFjhsCh6gs3KQz/meta16.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/TIQGgCZptykXG0VHwuyG/meta17.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/cwCXgVkkcc0srQmGcgB4/meta18.png" alt=""><figcaption></figcaption></figure>

* Click on "Add entry".

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/MwozXPBbUZTmVGmWuQ7D/meta19.png" 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="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/AX1kVY6d5V2VlHIz07CF/meta20.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/l2RM5dRYZDkI3cV289fy/meta21.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/LPZB9GHQjZ2SoOB1ZT2T/meta22.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/pB9FZrc2DuONoyFSRogw/meta23.png" alt=""><figcaption></figcaption></figure>

* Click on "Filters" and Add filter.

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/zPuaj4nCiVBVK8gISNEr/meta24.png" alt=""><figcaption></figcaption></figure>

* Select the source.

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/YPCqcsCMeel7hd7Pu8V7/meta25.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/6TlCIYvOwWB7Xptv9OJd/meta26.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/MAJv47lQKiSnBUZgiBsL/meta27.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/7h2mJCd9su3ERptLdyVR/meta28.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/mRwTTq4G5BxmuvfqSc7R/meta29.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/LiaY1fATLc1eM0iIvNqR/meta30.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/5NvthjEku1DrzU4mKb74/blobs/L7kyCcPTVpbnSlICozUm/k_meta31.png" alt=""><figcaption></figcaption></figure>
