> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/cello-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/cello-documentation/collection-filter-color-swatch-from-metaobject.md).

# 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="/files/pXTlc90zyrBnmW1oGmeM" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/D7bMR43HRoWbN7RtPTlQ" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/JbBPd5SoX0dKfcuHLh5c" alt=""><figcaption></figcaption></figure>

* Add the desired name if needed and Add field.

<figure><img src="/files/t4rw33yxZEQOqe8j8ezY" alt=""><figcaption></figcaption></figure>

* Select **File** type.

<figure><img src="/files/J1buvdr018pWgOU9geBE" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/NNs8dc3WpreZbxMdSGa7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/Xck8j5eM1ztEXLMMj4kA" alt=""><figcaption></figcaption></figure>

* Click on "Single line text".

<figure><img src="/files/S7jlTCKBhFO5kecTqIiV" 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="/files/2LFSPw82jcGRMOCtjcd7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/0MKEWtQtAHJxpF9l1U62" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/EOaTIw3r5dB7OdaK0p9l" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/v8JNdgDsIWcgQvFbRffX" 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="/files/sOIDeR69TnrXx25oTFAH" alt=""><figcaption></figcaption></figure>

* Click on "**Metaobject**".

<figure><img src="/files/QcvL0mF5IAyMAhFiyR44" alt=""><figcaption></figcaption></figure>

* Select the "**Reference**".

<figure><img src="/files/N3ZlNtZ8a2H0xYsBcuBK" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/FY7LAwSd1Q0uA23dVUrG" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/yKf8WYFt2sWqtx5JeN6O" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/gLvNXYo4P1RadnyptQ18" alt=""><figcaption></figcaption></figure>

* Click on "Add entry".

<figure><img src="/files/oBnmlUPGzozmM8lejx7R" 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="/files/7X3qkud7p4BFwjejN0ET" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/jWi08N5iM1elyqnd1vqA" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/weLVXC3QMIlAhtxLvQCk" alt=""><figcaption></figcaption></figure>

* Click on "Filters" and Add filter.

<figure><img src="/files/i4HRXkxuMSSPvv5dsRbf" alt=""><figcaption></figcaption></figure>

* Select the source.

<figure><img src="/files/PZn4HFeI9bYfVbDvqig4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/QFAZTkWY3JDoPZguF2L8" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Q6FceiFIjnLQYhSs2h2P" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/pUZ3R2VEMWaeNbRwcpOf" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/qblvFRASw8oKp4YYW8Gr" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/0PCdInXA7Y0jc31VBVOO" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/Bey1dPye2DLV5J3tbiDy" alt=""><figcaption></figcaption></figure>
