Add predictive search to your theme
You can add predictive search to your theme so that suggested results appear immediately as you type into the search field. Predictive search helps customers articulate and refine their search queries, and provides new ways for them to explore an online store. It also lets them quickly browse matches without having to leave their current page to see a separate list of search results.
Predictive search supports suggestions for products, collections, pages, and articles.
You need to use the Predictive Search API to add predictive search to your theme, however, because it affects the appearance of your online store, it’s important to be familiar with the UX guidelines before you implement it.
How suggestions are generated
The predictive search dropdown displays the following information when you enter a query.
|1||Predictive search dropdown|
After you start typing into the search bar, predictive search suggests results that are related to what you’re typing. They match search terms either exactly or with typo tolerance on searchable properties of shop resources.
Matching products or variants are returned as product suggestions that drop down from the search bar. For example, you’re looking for a snowboard and type
very-fast snowbo. Product suggestions appear for products or variants that contain
fast, and a term that begins with
If a word is separated by a hyphen or space, then it will be considered as two terms. Words or phrases that are separated into multiple terms return different results than a single term that includes the same words. For example,
t shirt return the same results, but
tshirt does not.
Product variants are returned only when the query matches terms specific to the variant title. Only the variants with the most matching terms are returned as results. For example, a store has a snowboard with a blue variant and a light blue variant. If you search for
snowbo, then the snowboard product is returned. However, if you search for
light blue snowbo, then only the light blue variant is returned.
Use the Predictive Search API
You can access predictive search results by making requests through the Predictive Search API, and Shopify also has the Predictive Search Library as part of the Shopify/theme-scripts GitHub repository to help make things easier.