<% 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 Program 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 Knowledge Assistant Track Completed Multi-Language Experiences Track Completed Fall '22 Release Highlights Track Completed Spring '23 Release Highlights Track Completed Chat Track Completed Summer '23 Release Highlights Track Completed Fall '23 Release Highlights 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
Build a Search Experience End-to-End
Arrow Back
Completed
Introduction
Introduction
completed
Completed 1
Step 1
Strategy & Scope
completed
Completed 2
Step 2
Collect Data and Set Up Content
completed
Completed 3
Step 3
Configure Your Search Backend
completed
Completed 4
Step 4
Set Up Search Frontend
completed
Completed 5
Step 5
QA
completed
Completed 6
Step 6
Integrate and Launch
completed
Completed 7
Step 7
Post-Launch Optimization
completed
home

Step 4: Set Up Search Frontend

Now that you’ve specified what results to return and how, you can design how users will see the results displayed visually. There are multiple ways you can build a Search frontend. Learn about them in the Ways to Build Search unit. We’ll cover the Hitchhikers Theme and Search UI React below. Review the Search Frontend Theme and Search UI React tracks, respectively, for conceptual explanations and introductions on each feature.

Hitchhikers Theme

The Hitchhikers Theme is our low-code option that allows you to quickly build an out-of-the-box frontend using JSON, HTML, CSS, and JavaScript. This can be easily configured using a combination of pre-built templates (the Hitchhikers Theme) built off a JavaScript library (the Search UI SDK) and a static site generator we built in our Pages product (Jambo) that gives you an easy-to-use code editor UI.

This means that if you build your frontend with the Hitchhikers Theme, you’ll actually be working in the Pages section of the Yext platform. Customize according to your branding by configuring which templates you use, customizing certain properties, and adding styling.

Review the Search Frontend Theme track for conceptual explanations and introductions on each feature.

book
Note
Note that not all features in this guide will be relevant for every experience. This is meant as a checklist to help you consider all possible features.
  1. Familiarize yourself with how the Hitchhikers Theme works
    1. Intro to the Search Frontend Theme - Understand how the Search UI SDK JavaScript library, the Theme, and Jambo all work together
    2. Navigate the Code Editor - Learn how to use the Code Editor built into the Yext Pages UI
    3. Deploy an Experience - Learn how the Pages deploy system works
  2. Create a Search frontend site .
    1. Add the experience key to connect the backend and frontend.
    2. (Multi-language) Add additional locales .
    3. Set up any other global settings , such as logo, favicon, and Google Analytics ID.
  3. Add a results page for universal search. Name it “index”.
  4. Add a results page for each vertical search. These should align with the verticals you added to the backend Search config.
  5. Customize each results page (universal and all vertical pages).
    1. Set page metadata , such as page title.
    2. In the page settings for vertical pages, make sure the search object’s verticalKey is inputted instead of <REPLACE ME>. This ensures that defaultInitialSearch works properly. Update the defaultInitialSearch if desired.
    3. Change the card type on the vertical page if you want to use another built-in card .
    4. Add or remove page components. This typically includes commenting IN facets, sorting, Q&A, or direct answers. While not common, you can also comment OUT any standard components.
    5. Edit page and component settings . Adjust any settings from the default.
    6. Common examples of page components to add, and then edit the component settings:
      1. Facets - Comment in the Handlebars partials, including for collapsible filters. Component settings are optional.
      2. Sorting - You must comment in the Handlebars partials, including for collapsible filters, AND (specify component settings for this to appear.
      3. Q&A component - You must comment in the Handlebars partials AND specify component settings for this to appear.
  6. Add custom cards - If you want to change anything from our pre-built result card templates, then you must add a custom card AND set the card type on the vertical page.
    1. Change target behavior of links .
    2. Update CTAs , including Analytics event types.
    3. Override direct answer card formatting .
  7. (Advanced) If you want to add or re-order anything on either a page or card, you can change the page or card structure.
  8. Add branding and styling.
    1. Update standard branding elements . Update these common variables:
      1. --hh-answers-background-color - background color
      2. --yxt-color-brand-primary - includes title links, to CTAs, to the nav menu items and view all links
      3. --yxt-color-text-primary - includes text color of the search bar text, the card text, the nav bar text, and the vertical title text
    2. Update custom branding elements . If, after updating the standard branding elements, there are elements you still want to update, add your own CSS to update others.
    3. Add images and fonts .
    4. Customize maps and map pins .
    5. Customize CTA buttons to match your brand’s styling.
  9. Debug any frontend display issues .

Search UI React

The Search UI React library contains customizable UI components that are fully functional and stylized out of the box. Using this library provides developers the quickest way to get your Search experience up and running. Review the Search UI React track for conceptual explanations and introductions on each feature.

book
Note
To get started quickly, check out these quick starts on how to add Search UI React components to a single-page React application using Yext Pages , Vite , or Next.js .
  1. Set up your development environment .
  2. Configure your application for Search .
  3. Add components .

Other Ways to Build

If you’re not looking to use the Hitchhikers Theme or Search UI React and would like to develop your own frontend, get started with these options:

Feedback
<% elem.innerText %>