Time Estimate
10 mins | (CSS/ HTML experience is helpful)
1. In XGEN Platform
Your Search Bar experience will be driven by an XSearch Engine and an XSearch Experience. This is a two step process that requires navigating between two to four separate pages within the XGEN Platform.
Create an XSearch Engine
Log into the XGEN Platform and select Engines below the XSearch menu item.
Create a New Engine
Select Hybrid Parellel in the Models Section at the top of the page
Do not change the default settings below the Models section
Create an XSearch Experience
After you’ve created an XSearch Engine and a Merchandising Rule, you can connect that engine and Merchandising Rule to an XSearch Experience. Navigate to the Experience page below the XSearch menu item.
Click New Experience in the top right corner of the page
Name the Experience
Choose API Version
Select the Hybrid Engine you just created
Assign a Merchandising Rule
Click Save and wait for the page to reload
Copy your Experience ID
After saving your experience, the Experience Information section at the top of the page will refresh and display an Experience ID. Click the copy icon next to the Experience ID for use in the Shopify Admin Theme.
2. In Shopify Theme Editor
Open Theme Editor
In your Shopify Admin dashboard, choose a theme to customize. It can be your public theme or an archived one.
Select App Embeds
On the left side menu, you will see three stacked menu icons. Select the bottom icon with three boxes and a plus sign. This is where you can control all your App Embeds. These App Embeds are controlled by a widget, similar to XRecommend and XProduct Listing, but these are universal across the site. In other words. because XSearch will appear on every page, it will be controlled with an App Embed instead of an App Block in a page’s Theme template.
Paste your Experience ID
In the field at top of the side bar, paste the XSearch Experience ID you copied from the XGEN Platfom.
Find the CSS Selector
Use your browser Inspect Element tool by right clicking on the search button or search input field on the page and select the “Inspect” option
Identify the CSS class or ID related to the Search Button or Search Input class.
Enter this selector (class or ID) in the CSS Selector field in the app settings so XSearch can attach correctly.