# 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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FAhQofrFEa1skBj1lNDCI%2Fmetafield.png?alt=media&#x26;token=8f6f4208-ac11-4470-8bb4-9fb6d041ec25" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FoMtXCaBexnjqgaZJwVBo%2Fmeta2.png?alt=media&#x26;token=8f6e8f93-5520-41b8-a489-f4ae5cd0ddf4" alt=""><figcaption></figcaption></figure>

* Add the desired name if needed and Add field.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FEoF7qkxpLgBVZ2RQFo7j%2Fmeta4.png?alt=media&#x26;token=17643f6b-6980-4818-8980-2a611eb5921a" alt=""><figcaption></figcaption></figure>

* Select **File** type.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FBAYQ3j1MDff6oaMp61KG%2Fmeta5.png?alt=media&#x26;token=0df706f0-38c9-495b-90b3-313055634236" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FaX9fVkGIcRIpA9gEo5jn%2Fmeta6.png?alt=media&#x26;token=95cfcd5c-757b-4e65-98d8-5f2c5eb21a38" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FYZGXvxr4PePt64ud9l7f%2Fmeta7.png?alt=media&#x26;token=33b3a702-e647-47f9-be15-52a75a16ee16" alt=""><figcaption></figcaption></figure>

* Click on "Single line text".

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FlMZvcDeg24tIjr0L8J0c%2Fmeta8.png?alt=media&#x26;token=bd9d9375-d6af-40d4-8f5a-efc4278d1acc" 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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F4Asx0EkNKGIaS6zklg5D%2Fmeta9.png?alt=media&#x26;token=18324b1f-2b4b-4016-9913-9819c4f9e6ab" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FxlpTCYdurxhzcUiLqpLw%2Fmeta3.png?alt=media&#x26;token=c41e68ab-c6ba-4e76-81d1-8d70fecd2bd5" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FwESwJxoto0ITRKMYQwHV%2Fmeta1.png?alt=media&#x26;token=9a14c276-ef1e-47f2-b211-4452ccb8a1d9" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FwHnGBo6gcFtP0R9Czt3E%2Fmeta4.png?alt=media&#x26;token=096dc79a-0e86-46f7-9c75-12e2c11d86a0" 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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FGocSVYJvS3oL4BF66DyE%2Fmeta5.png?alt=media&#x26;token=e60f2b02-cacb-4873-9d9a-a148b5e0fcd6" alt=""><figcaption></figcaption></figure>

* Click on "**Metaobject**".

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FbtRVkRGS9MiEeNbxnByc%2Fmeta14.png?alt=media&#x26;token=71329a23-5454-4455-b7a0-52e8587d98de" alt=""><figcaption></figcaption></figure>

* Select the "**Reference**".

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FuqNjJkZJckEWzGwdTncH%2Fmeta15.png?alt=media&#x26;token=c7c4664f-073f-4a4f-bb9d-d120b69d1b07" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FG55fSCguz3C1hK8HLhmp%2Fmeta16.png?alt=media&#x26;token=256dff9f-fbb3-4a5a-a583-c32dd7fffedb" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FwFn49qBjvJQX47hRjYq9%2Fmeta6.png?alt=media&#x26;token=5045e0c7-c5d4-4354-a9ea-bce4d3a3df94" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FdLrCtHYyJoAdtoO0QKz4%2Fmeta18.png?alt=media&#x26;token=d352337a-a60f-446a-905e-686fe8395833" alt=""><figcaption></figcaption></figure>

* Click on "Add entry".

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F9qNRfsodf2RAqDzgCX56%2Fmeta19.png?alt=media&#x26;token=58db166f-6f97-4c42-b15c-8a4c070140ab" 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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FGlqbep07doW5EzqK6mUy%2Fmeta20.png?alt=media&#x26;token=57e6b1f5-3025-4d3c-902a-300686b0721c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FCAdi7Q3874eD177pBP51%2Fmeta21.png?alt=media&#x26;token=9216aa80-37d8-46ad-8aab-e9d74f511bd9" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FhA06GF9Vm4mhxWR93GQY%2Fmeta22.png?alt=media&#x26;token=129be3c2-8857-423a-b3a8-a2a2a1d43ee6" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F4enWOo8fqrCL4mZXdXgP%2Fmeta23.png?alt=media&#x26;token=1e02bc8d-62ab-485a-845e-54467fc9ed81" alt=""><figcaption></figcaption></figure>

* Click on "Filters" and Add filter.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FI4aiQiSCkDGEbGLAePhq%2Fmeta24.png?alt=media&#x26;token=d5a4ec69-bcdf-45c8-ba8d-5c7542c4c8ad" alt=""><figcaption></figcaption></figure>

* Select the source.

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FNOdRvqi843ORAG2MPHaM%2Fmeta25.png?alt=media&#x26;token=eb48150a-19cb-4cd0-a62b-a4b16a10b17e" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F2yJhQMDEFeoBK5mUsVPH%2Fmeta26.png?alt=media&#x26;token=b2d79e37-ba58-4365-ac49-32a875cc133f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FwM7IcKquDrlAMlM6lsrv%2Fmeta27.png?alt=media&#x26;token=b534c55f-ca99-4872-8b34-81c47c806524" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2F77SnvutbNdiKDOMsgdix%2Fmeta28.png?alt=media&#x26;token=32af3121-a156-4645-8b73-548d876e85fe" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FMKC9zY8YGSTBqt6FPZWX%2Fmeta29.png?alt=media&#x26;token=0382784c-1e75-42be-934f-834d76ccd13c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FdV4TJRE2uF0PGo1SUMK7%2Fmeta30.png?alt=media&#x26;token=c1180c90-703e-4ad1-bef7-1db3f1f70a3c" 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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FRxgPx37bfjgHOJGw2onr%2Fs_meta31.png?alt=media&#x26;token=a5b19150-6747-4946-ac5f-7c9499ecab4d" alt=""><figcaption></figcaption></figure>
