# 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://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FQPtQlKWX6wDucF7JcGUh%2Fmeta1.png?alt=media&#x26;token=5fd942af-858e-47a3-8a15-0d5a225303aa" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FLuYVVySBu920rGNtbQi5%2Fmeta_field.png?alt=media&#x26;token=da638e67-447c-4385-8c4b-3f4a30f25152" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FYfV3nhBMaUbSFVlNZ0Lx%2Fmeta2.png?alt=media&#x26;token=822f4b27-a465-431d-8f67-9cbd1db6a17f" alt=""><figcaption></figcaption></figure>

* Add the desired name if needed and Add field.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FThBvVN63KDKFdayDdwD1%2Fmeta4.png?alt=media&#x26;token=c7faf12d-85ef-4250-a0af-ff6ffb3aacf0" alt=""><figcaption></figcaption></figure>

* Select **File** type.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FlNxK5wzkJyHkBrpAJmeQ%2Fmeta5.png?alt=media&#x26;token=d27d967e-7c04-4eed-9299-60b21cef46c8" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FQagETN3zRoTf0uKJ4YpM%2Fmeta6.png?alt=media&#x26;token=426678ca-b506-420e-8012-2bffd19c6393" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FVhVOs3uLqpNjJrLOijBO%2Fmeta7.png?alt=media&#x26;token=6406d3c7-6426-4738-93ec-a4ee050bc2b5" alt=""><figcaption></figcaption></figure>

* Click on "Single line text".

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FXmF6ANmFPW3ppbLrYfFV%2Fmeta8.png?alt=media&#x26;token=43286adc-5c4c-4fca-a436-dbc67fa52db7" 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://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FGQ6AY3oAUU3xxJB3GYkP%2Fmeta9.png?alt=media&#x26;token=2422bdd4-4947-41ed-821f-d212ac245615" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FVEa0PuIaX8172YIMMRcd%2Fmeta3.png?alt=media&#x26;token=e8e35399-2237-4e9a-b9e1-46c0193a44f3" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2F61siaCQxXfu9uWsIyYyv%2Fmeta1.png?alt=media&#x26;token=b8d1487c-6452-42a1-8e79-0464846be0f5" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FJYGTFib7506Ta903C4ZX%2Fmeta4.png?alt=media&#x26;token=a980e889-61a3-4f2f-bea5-1f4dbecbda2f" 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://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2F0jXw7432nH7qgmHkOmcP%2Fmeta5.png?alt=media&#x26;token=9a50abd5-7cbb-47f9-8ace-e363ea6e2b8b" alt=""><figcaption></figcaption></figure>

* Click on "**Metaobject**".

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FfDvlc4YbdF4N5eM1oMCm%2Fmeta14.png?alt=media&#x26;token=5f5da8a9-d2cf-4e69-9baa-cbbfe3a37626" alt=""><figcaption></figcaption></figure>

* Select the "**Reference**".

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FI2QCVBicD62rz6SfbUpY%2Fmeta15.png?alt=media&#x26;token=f26c46c4-a000-4640-9dda-7d6d719dec77" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FRkqSMvDODRJxNtH4lsxO%2Fmeta16.png?alt=media&#x26;token=5f5789d6-2342-45ba-867b-de26249da1ba" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2F6ClLRAa279XaEJ8o4iG6%2Fmeta6.png?alt=media&#x26;token=6825387d-278e-4eee-8597-3fb7751042ad" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2F9ZuuPOq7eWhcliDM0Zlu%2Fmeta18.png?alt=media&#x26;token=a2fe5599-a2d6-4a05-87c8-c831f67c736a" alt=""><figcaption></figcaption></figure>

* Click on "Add entry".

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FSPC5O4wchLcIaxpqJruv%2Fmeta19.png?alt=media&#x26;token=2c366a45-21d7-408b-8842-55278fd7e7b4" 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://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2F3E30fKekgcir6wv61aFG%2Fmeta20.png?alt=media&#x26;token=ddc02248-e436-4449-80c5-89636ca3fa1b" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FTFHSAW3CW0q5vd43xMBo%2Fmeta21.png?alt=media&#x26;token=9453ce52-6614-4dfc-ae13-18adbec62906" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FrMmCqrFz1cYbDOcv5aSL%2Fmeta22.png?alt=media&#x26;token=7e268568-e721-4d4e-a10e-1d5cb41337ea" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2Fvr2L3G0QovafvkDJqIS4%2Fmeta23.png?alt=media&#x26;token=08d5917c-088d-42b2-b7a7-9d962c7493ad" alt=""><figcaption></figcaption></figure>

* Click on "Filters" and Add filter.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2F6U0wUcEnWySjveWWRCfz%2Fmeta24.png?alt=media&#x26;token=b1b733e9-5a7c-40a2-a11e-adb440c2177b" alt=""><figcaption></figcaption></figure>

* Select the source.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FFTNbA6jQV6TDbjXWxwTd%2Fmeta25.png?alt=media&#x26;token=fd29b8b9-732a-4866-b994-cf71c888e6bc" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FekAeXe6vsK1mIH3O4kzy%2Fmeta26.png?alt=media&#x26;token=1cac6a25-743d-4bcf-8b45-42491dc24d60" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FnvPPWicN15ZdC7SupxXK%2Fmeta27.png?alt=media&#x26;token=5405b04e-eb7e-47ac-b575-a3273d3d8c59" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FFNd1mnGr4aVBYGshTiO0%2Fmeta28.png?alt=media&#x26;token=f8a8dd64-24b2-4eaa-8f5e-d66f4684168d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FhnMYV8htGa6zFLgeRb4b%2Fmeta29.png?alt=media&#x26;token=ff7de7a3-dd72-4ebe-8bfe-4d1f11a84651" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2Fx1T2AmAAcLlndhd3FMst%2Fmeta30.png?alt=media&#x26;token=6cbb4a86-3724-4035-a750-5fa9fa89338f" 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://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2F8htdi6keWLdeMxtxLGS4%2Fmeta31.png?alt=media&#x26;token=98b92aea-debb-4ce0-ab34-9d05eaf0f5d3" alt=""><figcaption></figcaption></figure>
