# Sidebar Filter

## Step 1:

![](https://2660769954-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MccyNuK6eTGishgIP-S%2F-Mhm_Aw4K1J79Ihfonck%2F-MhmbnHs6zWxY7PA3Ub1%2Fcollection-5.png?alt=media\&token=5cfb77a7-f4ac-4207-9f5f-0a9658aa77e0)

## Step 2: Color filter

![](https://2660769954-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MccyNuK6eTGishgIP-S%2F-MhmbpSJY6s3iRwUJFeD%2F-Mhmcny3juHhMT5Ve3Wj%2Ffilter1.png?alt=media\&token=b321d3da-0dbe-42f7-b5f1-2cedf9ba2846)

* **You need to add all the color names on the TAGS field for every single product**

![](https://2660769954-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MccyNuK6eTGishgIP-S%2F-MhmbpSJY6s3iRwUJFeD%2F-Mhmd84B6xbWQ5yICzkH%2Fcollection-15.jpg?alt=media\&token=57420987-014d-4be6-9309-647b7e2600b5)

* **You must add the names of all the characters in the collection color settings field. The colors you put in the product's tag field**

![](https://2660769954-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MccyNuK6eTGishgIP-S%2F-MhmbpSJY6s3iRwUJFeD%2F-MhmdI-m3ys-7dj1JS04%2Fcollection-16.jpg?alt=media\&token=a06cb9f9-75d6-428f-aca3-289d86b2350c)

## Step 3: Size filter

#### In the same way as adding color filters, you need to add the size filters

![](https://2660769954-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MccyNuK6eTGishgIP-S%2F-Mhme5yyjmfbqLWKEvWo%2F-MhmgmzE5noSH4RPhoEv%2Ffilter2.png?alt=media\&token=ffe1595b-88ac-4aa0-8eed-01c4c101a200)

**You need to add all the size variant names on the TAGS field for every single product**

![](https://2660769954-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MccyNuK6eTGishgIP-S%2F-Mhme5yyjmfbqLWKEvWo%2F-Mhmh4lNtm5tV0cYOufO%2Fcollection-17.jpg?alt=media\&token=13ffc1fc-7b74-46cb-8cab-8cc5f4cc6910)

**You need to put all size names to the size customizer field**

![](https://2660769954-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MccyNuK6eTGishgIP-S%2F-Mhmh7GxpM69ZUTkivMM%2F-Mhmhv92q12rP5cdSn0C%2Ffilter3.png?alt=media\&token=1f7de515-e77f-4c3f-b043-91bfcb4cf00f)

## Step 4:  **Vendor & Type Filter**

![](https://2660769954-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MccyNuK6eTGishgIP-S%2F-MhmiIOrPAouKZ4Aw4RR%2F-MhmiabXXnuDKxTO1a1w%2Ffilter4.png?alt=media\&token=cabb8dbf-7cfb-4eb5-8e5c-e549a0d6d637)

{% embed url="<https://youtu.be/JAk0LRTlibA>" %}

## Step **5**: **Custom Menu**

* **You need to create a navigation menu.** Then you can add the navigation for the custom menu.
* **You can add any collection link or any link.**

![](https://2660769954-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MccyNuK6eTGishgIP-S%2F-MhmiepaGMJIuXYUl9A5%2F-MhmjKU3wJEbsYC7byw2%2Ffilter5.png?alt=media\&token=87556d04-1378-4dde-a421-ad4dea6c6e4f)

## Step 6: Topbar filter Widget

![](https://2660769954-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MccyNuK6eTGishgIP-S%2F-MhmjqPexSJxWbC8fInO%2F-Mhmk9hbvW1xn9vXP0x8%2Ffilter6.png?alt=media\&token=5ca2a753-2037-4ce3-9afb-591a02331b5f)