> 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

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

![](/files/XMYlXMnm8MnOT5N24WbJ)

#### **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](/files/zUQnZOzvrTEzW9hAI9YO)

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

![](/files/R5u5HupumfvHbC5m1Gsu)

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

![](/files/WcBrmkMmAAeo1gcrmB0R)

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

![](/files/l2jRC7LuOmsgHzVmzAeY)

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

![](/files/fOyWKGa2DCmivolgGVxk)

### <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.

![](/files/gF1fiVnxc2dy6ykUdyri)

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

![](/files/9fRF32BRZ7qIyhvGHKW0)