Refinement Widgets
On this page
We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React InstantSearch.
Configure your filters with the refinements array in the
config.tsx
file. You can refine these facets:
Category filter
Use the Category filter to refine a specific product category (within a hierarchy of categories). For example, to refine your search by gender, use the “Women” category. The engine will then display all subcategories of “Women”, and you can continue to refine using a subcategory such as “Shoes”.
Configure the category filter
To configure the Category filter, edit the config.tsx file and add this object to the refinements array:
1
2
3
4
5
6
7
8
9
10
11
12
13
{
type: 'hierarchical', // Filter type.
header: 'Categories', // Filter header.
label: 'Category', // Filter label (used to display a label for the current refinements).
isExpanded: true, // Whether the ExpandablePanel should be expanded.
options: {
attributes: [ // Attributes used by the HierarchicalMenu widget (refer to the note below).
'hierarchicalCategories.lvl0',
'hierarchicalCategories.lvl1',
'hierarchicalCategories.lvl2'
]
}
}
Behind the scenes, the Category filter uses a HierarchicalMenu widget. See the widget’s requirements for more information about how to configure your records.
Brand filter
Use the Brand filter to only show search results from one or more brands.
Configure the brand filter
To configure the Brand filter, edit the config.tsx file and add the following object to the refinements array:
1
2
3
4
5
6
7
8
9
{
type: 'list', // Filter type.
header: 'Brands', // Filter header.
label: 'Brand', // Filter label (used to display a label for the current refinements).
isExpanded: true, // Whether the ExpandablePanel should be expanded.
options: {
attribute: 'brand' // Attribute used by the RefinementList widget (refer to the note below).
}
}
Behind the scenes, the Brand filter uses a RefinementList widget. See the widget’s requirements for more information about how to configure your attributes for faceting.
Price filter
Use the Price filter to refine products by price range. For example, to only show products priced between £100 and £200:
Configure the price filter
To configure the Price filter, edit the config.tsx file and add this object to the refinements array:
1
2
3
4
5
6
7
8
9
{
type: 'price', // Filter type.
header: 'Price', // Filter header.
label: 'Price', // Filter label (used to display a label for the current refinements).
isExpanded: true, // Whether the ExpandablePanel should be expanded.
options: {
attribute: 'price' // Attribute used by the RangeInput widget (refer to the note below).
}
}
Behind the scenes, the Price filter uses a custom RangeInput widget.
Size filter
Use the Size filter to only show search results matching one or more product sizes.
Configure the size filter
To configure the Size filter, edit the config.tsx file and add the following object to the refinements array:
1
2
3
4
5
6
7
8
9
10
{
type: 'size', // Filter type.
header: 'Sizes', // Filter header.
label: 'Size', // Filter label (used to display a label for the current refinements).
isExpanded: true, // Whether the ExpandablePanel should be expanded.
options: {
attribute: 'size', // Attribute used by the SizeRefinementList widget (refer to the note below).
limit: 8 // Limit of facet values to display.
}
}
Behind the scenes, the Size filter uses a packaged SizeRefinementList widget. See the widget’s options for information about how to customize the widget.
Color filter
Use the Color filter to isolate search results to one or more product colors.
Configure the color filter
To configure the Color filter, edit the config.tsx file and add the following object to the refinements array:
1
2
3
4
5
6
7
8
9
10
11
{
type: 'color', // Filter type.
header: 'Colors', // Filter header.
label: 'Color', // Filter label (used to display a label for the current refinements).
isExpanded: true, // Whether the ExpandablePanel should be expanded.
options: {
attribute: 'hexColorCode', // Attribute used by the ColorRefinementList widget (refer to the note below).
separator: ';', // Color facet value separator.
limit: 9 // Limit of facet values to display.
}
}
Behind the scenes, the Color filter uses a packaged ColorRefinementList widget. See the widget’s options for information about how to customize the widget.
Rating filter
Use the Rating filter to select products based on their “star rating”.
Configure the rating filter
To configure the Rating filter, edit the config.tsx file and add the following object to the refinements array:
1
2
3
4
5
6
7
8
9
{
type: 'rating', // Filter type.
header: 'Rating', // Filter header.
label: 'Rating', // Filter label (used to display a label for the current refinements).
isExpanded: true, // Whether the ExpandablePanel should be expanded.
options: {
attribute: 'reviewScore' // Attribute used by the RatingSelector widget (refer to the note below).
}
}
Behind the scenes, the Rating filter uses a custom RatingSelector widget.
