With Google’s intuitive (and often hilarious) search suggestions, predictive search has become a part of everyday life. We’re so accustomed to having our browsers predict and autofill data that when we actually have to type out a query in full, it seems absurdly time-consuming.

Despite this, a lot of ecommerce sites haven’t followed suit, meaning customers are still having to type out full and exact product names to find the right results. And with advancements like AR and smart speakers, it feels like we should all be nailing this basic search feature. 

The good news is, the tech for predictive search is all there, ready and waiting for brands to utilise it. Here’s our guide to getting it up and running on your Shopify store. 

What is predictive search? 

Predictive search (also known as suggestive search) refers to the dropdown of suggestions that appear as you type a query into a search bar. Introduced and popularised by Google, predictive search has effectively optimised the browsing experience, allowing users to find exact results by simply typing a few letters into the search bar.

For ecommerce stores, predictive search usually refers to a dropdown list of suggested products, which are populated as the user types their query in the search bar. These suggestions are pulled from a store’s product database, returning products that either match the search terms exactly or with typo tolerance. 

The benefits of predictive search

Having predictive search on your ecommerce store is one of those features that, while not essential, works to enhance your customers’ browsing and shopping experience. By allowing shoppers to refine their search queries, you can help direct them to the right products faster, without them having to go through your navigation menu. 

Another benefit to predictive search is that it allows users to browse matches without actually leaving the page they’re on. So, for customers just looking to do a quick comparison or see what other similar products they can find, there’s no need for them to go back and forth between web pages or navigate multiple tabs. 

While a lot of stores have already implemented predictive search, it’s far from being the norm. At the time of writing, Topshop still doesn’t have the feature on their site, leaving them leagues behind brands like Urban Outfitters and New Look. By including this simple, fast, intuitive search feature, you can give your site that extra competitive edge. 

How to implement predictive search on your store

In June 2019, Shopify announced they were launching a Predictive Search API, allowing Shopify merchants to add product suggestions to their storefront search. You can access predictive search results by making requests to the /search/suggest.json? endpoint in the Shopify Ajax API, which displays products faster than rendering the suggested search results separately with Liquid.

One of the best things about this feature is that it’s not just for product suggestions. Shopify’s predictive search supports suggestions for products, pages, articles, and collections – which means that a search for ‘coats’ would pull in an overarching ‘Coats & Jackets’ collection, a blog post about ‘The best coats for spring 2020’, and a selection of relevant products, giving customers the ultimate optimised browsing experience. 

Typo tolerance 

Shopify’s predictive search feature includes typo tolerance, which means that search terms containing typos still return the correct matching search results. What’s more, you can customise this tolerance by choosing whether to display search results that differ from the search term by either one letter or two letters. However, the first four letters of the term need to be entered correctly for this to work. 

The feature also allows for partial word matches, meaning that your site’s search will suggest results even when the word you’ve entered is incomplete. For example, if you search the word ‘cardiga’, you would still see dropdown suggestions for cardigans. For more information about typo tolerance and partial word matches, you can head to the Shopify help centre. 

Design requirements & limitations

Because predictive search affects the look of your site, it’s best to loop in a designer to implement the relevant UI best practices alongside your new feature. This will include things like reviewing accessibility requirements, adding a close button, and hiding the empty-state drop-down when there are no product suggestions that match the query. For a detailed list, check out Shopify’s guide to predictive search. 

Currently, Shopify only supports predictive search for the themes that use the following languages: 

• Danish
• Dutch
• English
• French
• German
• Italian
• Portuguese
• Spanish

Need some help? 

We’ve implemented predictive search on loads of our Shopify stores. Need some help getting your search sorted? Got another new feature you’d like help with? Get in touch today. Our team of Shopify designers and developers are on-hand to help.

Get in touch