# 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://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2F82ALpxHzBZKUhURu7lUR%2Fk_meta1.png?alt=media&#x26;token=84723535-b8d5-49bf-9cdd-2a5498d1f596" alt=""><figcaption></figcaption></figure>

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FAExTWvlXIw1cgmUsozyu%2Fkoto-metaobject.png?alt=media&#x26;token=a9d56ac7-af3f-446e-a5c3-2a2e56f99ed8" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2F4hrzBq8sfuvb2gWZzzo5%2Fmeta-definition.png?alt=media&#x26;token=bfcf05a9-51cb-422f-8371-adad23070925" alt=""><figcaption></figcaption></figure>

* Add the desired name if needed and Add field.

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FCXNvLjVTR4TQLxTvyn0C%2Fmeta4.png?alt=media&#x26;token=536fb8af-f9af-45f9-a737-2710143542d3" alt=""><figcaption></figcaption></figure>

* Select **File** type.

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FrqhppFalSBdalLWB8Esq%2Fmeta5.png?alt=media&#x26;token=ce57755a-65a2-4303-ad32-b6341d3d35c0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2Fzsq3tSjYCSTcHhnQPKSd%2Fmeta6.png?alt=media&#x26;token=b4715499-73b6-42d5-81e8-80a905e167c3" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2Fz1kKo1wtZZ2bIS0TOymW%2Fmeta7.png?alt=media&#x26;token=973e08af-81d4-45b2-a775-129ba5f8c5c9" alt=""><figcaption></figcaption></figure>

* Click on "Single line text".

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2Fn8vPGoFqXgxDiQVSSEOE%2Fmeta8.png?alt=media&#x26;token=bc14714d-dc00-45b8-a7a8-b72fe0ad6bb0" 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://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FLFgD3SZa4c6e3aP9LKz4%2Fmeta9.png?alt=media&#x26;token=a81845bd-13e8-48bf-bf5b-53c8b9ee68a5" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FqXnyE87Iw3gw8Vo7xpVK%2Fkotometa.jpg?alt=media&#x26;token=cfd6d521-dafc-4436-b591-9149cecfd45c" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FpFJLPUtzdVCx7yLYhLpM%2Fkoto-prometa.png?alt=media&#x26;token=b01059c5-843c-4f2c-b86e-fd7506df4e3b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FAqG1UwMMUiWAr920ufdg%2Fprodefination.png?alt=media&#x26;token=d150b5b7-6ce3-4adb-8b4b-1875b74eee93" 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://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FbNsTrdm1bNdkCtWy7XgD%2Fpro-metadefine.jpg?alt=media&#x26;token=07a03519-ba52-482e-962e-142b8970ac8b" alt=""><figcaption></figcaption></figure>

* Click on "**Metaobject**".

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FxdkVHYhG4yiKmbHNs76U%2Fmeta14.png?alt=media&#x26;token=4495f732-87ea-4a01-a304-3d160d3ef21d" alt=""><figcaption></figcaption></figure>

* Select the "**Reference**".

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2F4fA5O7TZfvmniQJcID0l%2Fmeta15.png?alt=media&#x26;token=1029ce7f-b8ed-4f2a-ac7b-a4d367c1758d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2F1rzUdYmJbbB54lnsfQwc%2Fmeta16.png?alt=media&#x26;token=e763f240-203a-477d-8942-62eb909f515b" alt=""><figcaption></figcaption></figure>

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FiEgmvMKRmDBlTQmXYrUx%2Fkoto-metaimg.jpg?alt=media&#x26;token=8116a8f0-b49e-4126-940d-d0bd5bf6afaf" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2F3Jcao74bV45z7efEhIvN%2Fmeta18.png?alt=media&#x26;token=0d77b6d0-e2ff-41fb-abce-9172922d34ca" alt=""><figcaption></figcaption></figure>

* Click on "Add entry".

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FSukgCGFvbp9SPXtq603R%2Fmeta19.png?alt=media&#x26;token=73755d05-17c3-473d-a920-0ebc5b84e000" 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://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FPMk46DVbJX6nAgtRJDPL%2Fmeta20.png?alt=media&#x26;token=0762dfe8-52ee-4010-a28c-9ef02750ed52" alt=""><figcaption></figcaption></figure>

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2Fd17rXfBxvrEQHsaD8RWq%2Fmeta21.png?alt=media&#x26;token=e7849d15-40b8-43ff-b61b-d77e7d0f3dcc" alt=""><figcaption></figcaption></figure>

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FtMZTMyEFCg5ekS6PBFug%2Fmeta22.png?alt=media&#x26;token=07bc50d0-588e-47eb-9386-3ac06e4aeeac" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2F6ypZp2uufwRhQDw87wic%2Fmeta23.png?alt=media&#x26;token=38311091-505b-459a-b3d2-0d819ea052d1" alt=""><figcaption></figcaption></figure>

* Click on "Filters" and Add filter.

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FaPsyoFhew5v82RXVy1pM%2Fmeta24.png?alt=media&#x26;token=74ac3631-7c8a-4765-859f-019646946c8c" alt=""><figcaption></figcaption></figure>

* Select the source.

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2F9TY9UZfVHrbRCoPg0FEM%2Fmeta25.png?alt=media&#x26;token=3b1d7918-79be-4b5b-9931-76cd854c43f7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FwnKWRvivT6Noy491Y5xN%2Fmeta26.png?alt=media&#x26;token=8ec28cd3-f4cc-4008-b92c-58363f65f8b4" alt=""><figcaption></figcaption></figure>

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FosLZoK8rLAwTJQ4P1QlP%2Fmeta27.png?alt=media&#x26;token=7a3caefd-253a-41d3-ba09-897ffab29760" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2Fjb7Yoq94QuHRkHhNJZTj%2Fmeta28.png?alt=media&#x26;token=05d7fbe5-b20c-435f-8392-1e9ae275216e" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FoQLpsATgNAKmH0oTSUsb%2Fmeta29.png?alt=media&#x26;token=fc6a59bd-39c2-442a-b877-3b8493dbed3a" alt=""><figcaption></figcaption></figure>

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FmNQuUfmd3NuiCORJxbH8%2Fmeta30.png?alt=media&#x26;token=a13c1853-587c-48c0-9275-b3fd211a3aeb" 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://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FVDP7oReP18NPRgix2Q4Q%2Fk_meta31.png?alt=media&#x26;token=d2803215-7de2-4879-bbd1-d886912353e3" alt=""><figcaption></figcaption></figure>
