> For the complete documentation index, see [llms.txt](https://lezada.docs.hasthemes.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lezada.docs.hasthemes.com/collections/collection-page/sidebar-filter.md).

# Sidebar Filter

## Step 1:

![](/files/-MhmbnHs6zWxY7PA3Ub1)

## Step 2: Color filter

![](/files/-Mhmcny3juHhMT5Ve3Wj)

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

![](/files/-Mhmd84B6xbWQ5yICzkH)

* **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**

![](/files/-MhmdI-m3ys-7dj1JS04)

## Step 3: Size filter

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

![](/files/-MhmgmzE5noSH4RPhoEv)

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

![](/files/-Mhmh4lNtm5tV0cYOufO)

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

![](/files/-Mhmhv92q12rP5cdSn0C)

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

![](/files/-MhmiabXXnuDKxTO1a1w)

{% 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.**

![](/files/-MhmjKU3wJEbsYC7byw2)

## Step 6: Topbar filter Widget

![](/files/-Mhmk9hbvW1xn9vXP0x8)