Documentation
Feedback
Guides

Store Framework
Guides
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.

Step by step

  1. Ensure that you have the vtex.search-result@3.x as a dependency of your manifest.json:
{ "dependencies": [ // other dependencies + "vtex.search-result": "3.x" } ] }
  1. Add the following props to the search-result-layout.desktop and the search-result-layout.mobile:
"search-result-layout.desktop": { "children": [ // children ], "props": { // props + "preventRouteChange": true, + "thresholdForFacetSearch": 10, + "showProductsCount": true, + "showFacetQuantity": true } }
"search-result-layout.mobile": { "children": [ // children ], "props": { // props + "preventRouteChange": true, + "thresholdForFacetSearch": 10, + "showProductsCount": true, + "showFacetQuantity": true } }
  1. Declare the filter-navigator.v3 block with the following props:
+ "filter-navigator.v3": { + "blocks": ["sidebar-close-button"], + "props": { + "truncateFilters": true, + "showClearByFilter": true, + "fullWidthOnMobile": true, + "navigationTypeOnMobile": "collapsible", + "appliedFiltersOverview": "show", + "totalProductsOnMobile": "show", + "updateOnFilterSelectionOnMobile": true, + "priceRangeLayout": "inputAndSlider" + } + },
  1. Your filter-navigator should look like this:

{"base64":"  ","img":{"width":562,"height":1000,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1103153,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-improving-filter-navigator-experience-0.gif"}}

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page