Step 3: Add Facets to Display

The last step is to add facets to your frontend display. The steps for this will differ whether you’re building on the Hitchhikers Theme or Search UI React.

Hitchhikers Theme

Facets are a page component in the Theme. Like adding other components from the SDK, there are two main steps to add facets to the frontend:

  • Add the component to the handlebars file. Typically you’ll just have to comment these in, unless you customized the file.
  • Add any additional configuration in the JSON file

Additionally, we highly recommend pairing facets with collapsible filters. This UI is optimized for users on smaller screens, making it easier and more intuitive to sort and filter.

Check out the Facets and Filters (Frontend) unit for instructions on how to do this.

light bulb
Tip
For numerical facets, you must be on Theme 1.29 and Search UI SDK 1.14 or higher to use this feature. Learn about upgrading your Theme and SDK version in the Theme and SDK Upgrade Overview unit.

Search UI React

Add the applicable facet component to your React frontend.

Check out the the Facets and the NumericalFacet React component reference docs.

Feedback