# Collection filter color swatch from metaobject

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

#### To 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://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FrBCEcpOEJ4TxyIBLc2Nc%2Fmetafield.png?alt=media&#x26;token=d9df7baa-67f1-4eb5-aab4-9913958a923f" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2Fgykkr7EperYZOXi0rfoq%2Fmeta2.png?alt=media&#x26;token=253283b5-cb31-46d7-a519-87caf4a24222" alt=""><figcaption></figcaption></figure>

* Add the desired name if needed and Add field.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FUV3f39vAtlxtC5uBhdHc%2Fmeta4.png?alt=media&#x26;token=878a9646-285b-4a60-8ac8-f3711f689a37" alt=""><figcaption></figcaption></figure>

* Select **File** type.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FRuXW6ul0JhbcKihx5UIA%2Fmeta5.png?alt=media&#x26;token=34ce2295-4057-46a2-92ce-fb041384972d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FE9azZv0KsA3OnywC47WI%2Fmeta6.png?alt=media&#x26;token=2c2351f6-aed9-4c46-84c4-99c2e200dde9" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2Fpypmyl9aKqDAu4Dt4mpv%2Fmeta7.png?alt=media&#x26;token=0105942c-b729-443b-a2f6-2fb71f051a02" alt=""><figcaption></figcaption></figure>

* Click on "Single line text".

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2F2iWS241akIRJJeq44Agk%2Fmeta8.png?alt=media&#x26;token=1d411263-149e-4367-bfab-911c809c33f6" 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://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2Fyn08WHM91Xkzt7wPSR0n%2Fmeta9.png?alt=media&#x26;token=a8e0328e-0c37-4f35-94e4-1726727d28fe" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2Fskwdy58dUYLSil03a4LP%2Fmeta3.png?alt=media&#x26;token=7f1d9078-4dcf-4f1e-bbce-51faade076c2" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FK71MRcHtS91OOmzKrKDq%2Fmeta1.png?alt=media&#x26;token=e2469ac2-e5ef-4e8c-a4fc-482e4fc17455" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FngwM0FC15o71PnqwVne5%2Fmeta4.png?alt=media&#x26;token=5de1616b-a7f3-47d2-98fe-55758b7a283d" 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://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FureqE2s84eQUSVaNjghl%2Fmeta5.png?alt=media&#x26;token=73dc6412-6416-40df-91a5-9784df639dd4" alt=""><figcaption></figcaption></figure>

* Click on "**Metaobject**".

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FDLOb6ipBVUXRNqlzLCyY%2Fmeta14.png?alt=media&#x26;token=97ec732e-f2cc-4494-9bf2-7b6e4c351699" alt=""><figcaption></figcaption></figure>

* Select the "**Reference**".

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2Ft9w06G6u32ZJFWL5Exlg%2Fmeta15.png?alt=media&#x26;token=65b43623-1dfc-4d0f-b0bd-7fbb00d5fb47" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2Fx4boqWTe9Kuw3RV3jpdz%2Fmeta16.png?alt=media&#x26;token=5f68a6f5-a1c6-4f99-9842-9c91dcfab9d0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FeUpld6V5b0t85JRPBfxN%2Fmeta6.png?alt=media&#x26;token=6b811e70-575b-4705-8391-a735b8ed02aa" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FKA5VJHlb4PdV0bPyU1JQ%2Fmeta18.png?alt=media&#x26;token=eb549bfe-a600-4912-8d65-7350fcf40829" alt=""><figcaption></figcaption></figure>

* Click on "Add entry".

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FXwrXth0CczyPyRK8wjJj%2Fmeta19.png?alt=media&#x26;token=4919e10b-f6d5-48fe-9fbd-dd505419843d" 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://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2F4eh3bEYs0QoRQ8YznpkL%2Fmeta20.png?alt=media&#x26;token=fc674b5d-9d10-4491-85c4-76bb2abc0c49" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FNfQIaRgScYd1gdhVctbx%2Fmeta21.png?alt=media&#x26;token=d65ad9cb-fb57-43fa-ad07-d70d83789dc7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FgPIhOnyyYFMun0SV74XG%2Fmeta22.png?alt=media&#x26;token=1d6ee884-b41d-4c80-b1a5-cb13bbc0a38e" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FlNWXSifAp5esRIPOLTCQ%2Fmeta23.png?alt=media&#x26;token=476973b3-ebe7-4b08-a5a4-33e032c5d283" alt=""><figcaption></figcaption></figure>

* Click on "Filters" and Add filter.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FmT1gKG6xG7roLsvLhunq%2Fmeta24.png?alt=media&#x26;token=3f615744-1a1a-4d4c-9d11-2d6a6b876b24" alt=""><figcaption></figcaption></figure>

* Select the source.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2F6Ro3JN6FiDVi9ihM6mAP%2Fmeta25.png?alt=media&#x26;token=fb1c2d14-21e7-4a06-9876-454e94159ea7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FX0pJ3xtTiW8P45S1g4VK%2Fmeta26.png?alt=media&#x26;token=640b172e-e370-474c-b601-66b6c6009de2" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FmcFBZ7StXRdEOaXzJA1p%2Fmeta27.png?alt=media&#x26;token=dc455ca0-b603-425b-9ff8-a73b6f47f41a" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FtyA5vy09RtEkVOfji2pR%2Fmeta28.png?alt=media&#x26;token=016215fd-a69b-427f-8c32-53967dc4f090" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2F3dctjxHJPsxjpSAohzoA%2Fmeta29.png?alt=media&#x26;token=345d69c2-01be-463f-aeb2-c714daab5468" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FyHrqJRuQlX23oZ41yShT%2Fmeta30.png?alt=media&#x26;token=7b5985b8-4213-4861-a246-c81e3bf6dc08" 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://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FT1f60KTi83Q7cUcQjfOl%2Fp_meta31.png?alt=media&#x26;token=12f22b52-6857-4d2c-b256-34278be8f80d" alt=""><figcaption></figcaption></figure>
