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.

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.

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 .
4. Add Analytics. Follow the Get Started with Analytics guide to add analytics to your search experience.

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:

• Search API
• Search Core