<% user.full_name %>
<% util.level ? util.level.title : '' %>
Explorer Pioneer Apollo Viking Voyager Pathfinder Orion
Points
<% user.points ? user.points.toLocaleString() : 0 %>
Badges
<% util.badgeCount %>
Streaks
Congratulations You've <% util.newestBadge.isCurriculum ? 'completed' : 'earned' %> the
<% util.newestBadge.title %> <% util.newestBadge.isCurriculum ? 'curriculum' : 'badge' %>!
previous
next
Share to Social Media
Linked In Facebook
Status
<% util.level ? util.level.title : '' %>
<% util.level ? util.level.points : '' %>
<% util.nextLevel ? util.nextLevel.title : '' %>
<% util.nextLevel ? util.nextLevel.points : '' %>
Level up! <% util.levelPointsRemaining %> points to go
Level up! <% util.levelPointsRemaining %> points to go
Badges
Completed Hitchhikers Track Completed Content Track Completed Pages Track Completed Page Builder Track Completed Search Backend Track Completed Search Frontend Theme Track Completed Search UI React Track Completed Solution Templates and the Admin Console Track Completed Technical Skills Track Completed Platform Basics Track Completed Listings Track Completed Reviews Track Completed Industry Overview Track Completed Analytics Track Completed Industry Overview & Product Basics Track Completed Multi-Language Experiences Track Completed Chat Track
<% util.expandBadges ? 'Less' : 'More' %>
Playground Accounts
New +
No Playground Accounts
Create Playground +
View Profile
Log Out loading
Mission Complete! 🚀
Congratulations, you’ve completed your first module!

We hope you enjoy exploring the rest of the site. Please don’t forget to leave us feedback - we are constantly looking to improve. Happy Hitchhiking!
Home
Welcome to Hitchhikers! 👋
To learn more about the platform we encourage you to get started by completing the Hitchhikers Program Track and earning your first badge!
Start Here
Close notification
Guide
Set up Hierarchical Facets
Arrow Back
Completed
Introduction
Introduction
completed
Completed 1
Step 1
Set up Your Content
completed
Completed 2
Step 2
Configure Fields for Faceting
completed
Completed 3
Step 3
Add Facets to Display
completed
Completed 4
Step 4
Customize
completed
home

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.

Search UI React

Add the applicable facet component to your React frontend.

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

<% elem.innerText %>