Range Filter and Hierarchical Facets (Spring '22 Release)

Answers Headless React and the new Answers React Components now support a range filter for numbers and hierarchical facets, commonly found in e-commerce experiences. If a user selects a value that falls under another category, the parent categories will automatically be applied as filters. For example, when “Hats & Caps” are selected as a filter, “Accessories” as the parent category will also be applied.

Range Filter for Number Facets

To use a range filter, you will need to follow the setup instructions for number facets. When you add your NumericFacet, place the range filter conditionally below any fields where you’d like it to appear:

export function NumericFacets() {
  return (
    <Filters.Facets searchOnChange={true}>
      {facets => {
        return (
              facets.map((f, i) => {
                return (
                  <Filters.FilterGroup key={f.fieldId} defaultFieldId={f.fieldId}>
                    <Filters.CollapsibleLabel label={f.displayName} />
                      {f.options.map(o =>
                      {(f.fieldId === 'price.value') && <Filters.RangeInput getFilterDisplayName={getFilterDisplayName} inputPrefix={<>$</>} />}
                    {(i < facets.length - 1) && <Divider />}

This will display a range input for that facet:

Turn on the Spring '22: Numerical Facet Updates (early access) account feature to use this feature during the Early Access period. This feature will automatically be turned on for all accounts at General Availability for the Spring '22 Release.

Hierarchical Facets

To use hierarchical facets, you will need to:

  1. Set up the Knowledge Graph field with a specific structure.
  2. Set the field as a facet in the backend Answers config as you normally would.
  3. Configure the facet in the Answers frontend.

Knowledge Graph Field Structure

  • Use a multi-option select list field with a consistent delimiter (“|”, “>”, etc.) to indicate the hierarchy. See an example below:

  • Select the correct categories for an entity. If an entity’s category is a lower level in the hierarchy, make sure to select all parent categories as well. For example, if an entity’s category is “Appliances > Small Appliances > Refrigeration”, both “Appliances” and “Appliances > Small Appliances” must be selected as well:

Answers Frontend

The Answers React Component Library’s Filters component includes HierarchicalFacets; you’ll need to add it conditionally for any field that has the Hierarchical knowledge graph structure:

<Filters.Facets searchOnChange={true} className='mr-8 text-left min-w-[12rem]'>
    {facets => facets.map((f, i) => {
        if (f.options.length === 0) {
            return null;
        if (f.fieldId == "c_category") {
            return (
                <Fragment key={f.fieldId}>
                    <Filters.HierarchicalFacet facet={f} /> <div className="w-full h-px bg-gray-200 my-4"></div>
                    {(i < facets.length - 1)}

        return ( //normal facet

Hi! I am utilizing this update for my client and am wondering what file that code needs to go into? Thanks!

Hey Ilana,

As noted, these two features are only available when building the frontend with Answers Headless React and the Answers React Component library. They are NOT currently available in the Answers Hitchhikers Theme. Which frontend option are you using?

The guides for each option are linked above. When you use either, you can install the library or run the starter app which will give you an example of where this code should live.

Let us know if you still have any questions.