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, queries, pages, and articles.
Beforeimplementing predictive search in your theme, it's important to be familiar withhow suggestions are generated,current API limitations, and theUX guidelines.
How suggestions are generated
Anchor link to section titled "How suggestions are generated"The predictive search dropdown displays the following information when you enter a query.
| Point | Description |
|---|---|
| 1 | Predictive search dropdown |
| 2 | Query suggestions |
| 3 | Collection suggestions |
| 4 | Product suggestions |
| 5 | Page suggestions |
| 6 | Article suggestions |
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 withtypo toleranceonsearchable propertiesof 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 typevery-fast snowbo. Product suggestions appear for products or variants that containvery,fast, and a term that begins withsnowbo.
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-shirtandt shirtreturn the same results, buttshirtdoes 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 forsnowbo, then the snowboard product is returned. However, if you search forlight blue snowbo, then only the light blue variant is returned.
Query suggestions are generated by extracting words and phrases from your product catalog, as well as from customer searches, using natural language processing techniques.
- The
predictive_searchobject - The
/{locale}/search/suggestendpoint of thePredictive Search API
Implementing predictive search
Anchor link to section titled "Implementing predictive search"To support predictive search, you need to implement the following components:
- The main search: A search input for predictive search to apply to.
- The predictive search section: A section to host the general predictive search display. This display is populated with the results of the predictive search using the
resourcesattribute of thepredictive_searchobject. - A JavaScript function: Renders the predictive search section using the section response of thePredictive Search API.
The following examples illustrate a basic predictive search implementation. These examples follow thelistbox component patternsuggested by the W3C ARIA authoring practices guide.
The main search
Anchor link to section titled "The main search"The main search is a search input for the predictive search functionality to apply to.
The predictive search section
Anchor link to section titled "The predictive search section"The predictive search section hosts the predictive search results. These results are output by looping through theresourcesattribute of thepredictive_searchobject.
This section is rendered withthe main searchusingthe JavaScript function.
The following example renders the products from the search results. For a more complex template that accepts all resource types, refer toDawn's source files.
The JavaScript function
Anchor link to section titled "The JavaScript function"Thepredictive_searchobject isn't defined when the predictive search section is initially rendered, so you need to retrieve the populated section content using the section response of thePredictive Search API.
The following example uses the default parameters for thePredictive Search API, but you can customize them to fit your needs.