Improving filter navigator experience

The filter navigator is one of the most important components on the search page. This recipe will show you how to set the filter navigator component in a way that has been proven to improve the conversion of your store.

Here is a quick summary of the changes that will be made:

• Add a search input to the filter options list
• Change the filter navigation to use collapsible filters
• Add more info about selected filters and product quantity
• Update the search result at the moment that the filter is selected
• Add a show more/less button to the filter options list
• Add a "clear all" button to each filter options list

All props mentioned here are documented on documentation page. You will be able to check both the description and the possible values ​​of each prop.

1. Ensure that you have the vtex.search-result@3.x as a dependency of your manifest.json:

2. Add the following props to the search-result-layout.desktop and the search-result-layout.mobile:

3. Declare the filter-navigator.v3 block with the following props:

4. Your filter-navigator should look like this: