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

# Shop Filter

Add filters to your catalog to make it easy for your customers to explore your products.

### <mark style="color:blue;">1. Setting up filters</mark> <a href="#setting-up-filters" id="setting-up-filters"></a>

![](https://980438068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MV0r5tR9bPLGnwB_pyk%2Fuploads%2Fu6jCgsyX62qsERsTJqgr%2FGoogle%20Chrome_2022-03-10%2019-22-31%402x.jpg?alt=media\&token=5140be10-89b3-4e37-b1a3-ba592618a84a)

#### **Filter widgets** <a href="#filter-widgets" id="filter-widgets"></a>

Simply, navigate to **Appearance** **→** **Widgets** and drag your filter widgets to the **Shop Sidebar** position.

![Custom the Shop Sidebar](https://980438068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MV0r5tR9bPLGnwB_pyk%2Fuploads%2FBHfmcwXrq4OpS9XG6viE%2Fimage.png?alt=media\&token=4a1ae410-2835-4a87-9bcb-ecbe1e1d7578)

#### **The available filters are:**

#### <mark style="color:green;">**Nasa Product Attribute Filter**</mark>.

&#x20;(One widget per attribute to filter. Add attributes to your shop page to make it work)

![](https://980438068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MV0r5tR9bPLGnwB_pyk%2Fuploads%2F1wbb7e3h41P1Mhf6Dv8p%2Fimage.png?alt=media\&token=5c5fdd4a-8465-4677-a690-bcd752d20684)

#### <mark style="color:green;">**Nasa Product Categories**</mark>

![](https://980438068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MV0r5tR9bPLGnwB_pyk%2Fuploads%2FuHdns1jSS3MyojrVwr9Y%2Fimage.png?alt=media\&token=c24da0cd-30ef-412f-bbba-75a2c4391359)

#### <mark style="color:green;">**Nasa Product Price Filter (list)**</mark>

![](https://980438068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MV0r5tR9bPLGnwB_pyk%2Fuploads%2FJA2vfoVmlh6mlrYl3tpF%2Fimage.png?alt=media\&token=87f3c650-c803-40e3-a99f-4b82fd801c82)

#### <mark style="color:green;">**Nasa Product Filter Status**</mark>

![](https://980438068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MV0r5tR9bPLGnwB_pyk%2Fuploads%2F6MkfvKBK5oy0lq9LAskm%2Fimage.png?alt=media\&token=de38b013-5a0a-4afd-8f99-9c917ca74ee5)

### <mark style="color:blue;">2. Filter position</mark> <a href="#filter-position" id="filter-position"></a>

[<mark style="color:red;">**Click here to know How to set up this feature ...**</mark>](/shop-page/shop-layout/sidebar.md)

### <mark style="color:blue;">**3. Variations Swatches**</mark>

**First**, add your color attributes in **Products → Attributes** and assign that color attributes to your products.

Go to **Appearance → Widgets** and add the **Nasa Product Attribute Filter**

Select the **Attribute** and Display Type. In Attributes List and Button display each **color** with its name. Select shows only the color.

![](https://980438068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MV0r5tR9bPLGnwB_pyk%2Fuploads%2F0ZIvFyptrbkXMXBdHTYr%2Fimage.png?alt=media\&token=60ff8c00-8bcd-4c61-b39a-873acf65a511)

### <mark style="color:red;">RESULT</mark>

![](https://980438068-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MV0r5tR9bPLGnwB_pyk%2Fuploads%2F4kmd8IH7hSUP58Qv5IIb%2FGoogle%20Chrome_2022-03-10%2019-20-12%402x.jpg?alt=media\&token=bd4feb3f-4b8b-4bee-a651-f634c48ef529)