Step 2: Add Search to your Store’s Search Results Page

In this step, we will walk through how to embed your Yext Search experience into the Dawn theme’s default search results page.

Instructions

1. From the main admin page for your store, navigate to Online Store > Themes.

2. In the Current Theme section, click Actions > Edit Code. Alternatively, you can first choose to duplicate the theme to test any changes in a separate environment. We recommend this approach if your store is already live.

3. In the list of files on the left, navigate to Sections > main-search.liquid. This represents the search results component that appears on the default search results page.

4. Replace all of the existing code with the following code snippet, filling in the placeholder with your Search experience’s Production URL, and click Save:

   <div id="answers-container"></div>
   <script src="REPLACE_ME_PRODUCTION_URL/iframe.js"></script>
   
   <script>
   window.addEventListener('DOMContentLoaded', (event) => {
   AnswersExperienceFrame.runtimeConfig.set('querySource', 'SHOPIFY_STORE');
   AnswersExperienceFrame.init({});
   });
   </script>

5. Save your search result page URL for the next step. By default, this will be something like “https://my-store-name.myshopify.com/search".

Your search results page should be good to go! If you preview your site and go to the search results page, you should see an embedded Yext Search experience:

Now we’re ready to add the Yext Search Bar and make sure it redirects to your newly created search results page.