In Facets and Filters (Backend), you learned what facets and filters are and how to configure them in the Search backend. Once you configure the backend, you need to add the components to your vertical search page for users to interact with them.

There are two main steps to adding any component from the SDK to the Theme:

1. Adding the component to the Handlebars file
2. Adding optional configurations in the JSON file

Tip: Adding components like filters involves a lot of commenting in. Use cmd + / on a Mac or ctrl + / on a PC.

Collapsible Filters

By default, facets and filters appear on the left side of results. This works on desktop, but on smaller screens there is no room for a left side panel.

Yext strongly recommends pairing facets, filters, and sorting with collapsible filters. Collapsible filters hide the filter/facet/sorting panel by default — users click a "filter results" link to expand it. This UI is optimized for mobile and smaller screens.

On desktop (above the breakpoint set in static/scss/answers-variables.scss), facets still appear on the left. Below the breakpoint, they collapse. On full-screen map pages, facets are always collapsed since the results panel is smaller.

Add Static Filters

1. Add to the Handlebars File

Comment in the filterbox script and markup lines:

{{> templates/vertical-standard/script/filterbox}}
{{> templates/vertical-standard/markup/filterbox}}

2. Add to the JSON File

Static filters require configuration in componentSettings — they will not work without it. Unlike facets, they have no defaults.

"FilterBox": {
  "filters": [
    {
      "type": "FilterOptions",
      "label": "Department",
      "control": "singleoption",
      "optionType": "STATIC_FILTER",
      "options": [
        {
          "label": "Cooking Department",
          "field": "c_department",
          "value": "Cooking Department"
        },
        {
          "label": "Baking Department",
          "field": "c_department",
          "value": "Baking Department"
        },
        {
          "label": "Coffee Department",
          "field": "c_department",
          "value": "Coffee Department"
        }
      ]
    }
  ]
}

For the full list of static filter configuration options, see the FilterBox section of the library documentation.

Distance Filter

You can also set a static filter for distance using RADIUS_FILTER. Values are in meters. No backend searchable field configuration is needed since you're not filtering on a Knowledge Graph field — but you still need to add the filterbox component to the HBS file.

"componentSettings": {
  "FilterBox": {
    "filters": [
      {
        "type": "FilterOptions",
        "label": "DISTANCE",
        "control": "singleoption",
        "optionType": "RADIUS_FILTER",
        "options": [
          { "label": "5 miles", "value": 8046.72 },
          { "label": "10 miles", "value": 16093.4 },
          { "label": "25 miles", "value": 40233.6 },
          { "label": "50 miles", "value": 80467.2 },
          { "label": "200 miles", "value": 321869 },
          { "label": "400 miles", "value": 643738 }
        ]
      }
    ],
    "searchOnChange": true
  }
}

Add Facets

1. Add to the Handlebars File

Comment in the following lines. Replace vertical-full-page-map with your page's template name:

Scripts:

{{> templates/vertical-full-page-map/script/facets}}

Markup:

{{> templates/vertical-full-page-map/markup/facets}}

Collapsible Filters Scripts:

{{> templates/vertical-full-page-map/collapsible-filters/page-setup }}

Collapsible Filters Markup:

{{> templates/vertical-full-page-map/collapsible-filters/markup/filterlink }}
{{> templates/vertical-full-page-map/collapsible-filters/markup/viewresultsbutton }}

Also uncomment the filters wrapper div (every vertical page template has this commented out):

<div class="Answers-filtersWrapper js-answersFiltersWrapper CollapsibleFilters-inactive">
  <!-- templates for filters, facets, and sorting, comment in the one(s) you're using -->
</div>

2. Add to the JSON File

All settings are optional — facets will appear with defaults once you complete the Handlebars step. To customize, add the Facets and FilterLink objects to componentSettings:

"FilterLink": {
  "changeFiltersText": "sorts and filters",
  "resetFiltersText": "reset filters",
  "clearSearchText": "clear search"
},
"Facets": {
  "title": "",
  "expand": false,
  "showMore": false,
  "searchOnChange": true,
  "fields": {
    "c_restaurantFeatures": {
      "label": "Restaurant Features"
    }
  }
}

Popular settings:

• expand: false — collapses all facet options by default
• showMore: false — hides a "show more" link when there are many options (see also showMoreLimit and showMoreLabel)
• searchOnChange: true — triggers a new search each time a facet is selected or deselected; set to false to require an Apply button
• fields — field-specific config, including label to override the display name of a facet (defaults to the field name)

See the Facets reference doc for all display configurations.

Applied Filters

The applied filters bar shows selected facets and filters above results. Settings can be modified in either the universal or vertical page config. Set removable: true so users can click applied filters to remove them and trigger a new search.

"AppliedFilters": {
  "removable": true
}

See the Applied Filters reference doc for the full list of settings.