Guides / Building Search UI / Ecommerce ui template / Components / Product listing page filter and nav

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

Category refinement widget

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.

Brand refinement widget

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:

Price refinement widget

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.

Size refinement widget

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.

Color refinement widget

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

Rating refinement widget

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.

Did you find this page helpful?
React InstantSearch v6