Guide
Search autocomplete that helps shoppers buy.
Autocomplete, or instant search, shows results while the shopper is still typing. Done well, it takes shoppers straight to a product without ever loading a results page. Done badly, it covers the page with suggestions nobody wanted.
What to show
Products should come first in a store. Query suggestions help most when the shopper has typed only a word or two.
- Products with an image, name and price: the main content
- A few query suggestions that complete what the shopper is typing
- Matching categories or collections
- A link to see all results
Speed and relevance
Results should update with every keystroke, quickly enough that they keep up with typing. Tolerate typos from the first few letters, and match SKUs exactly, so shoppers who type a code see that product first.
On mobile
Most store searches happen on phones, so test the dropdown there first.
- Open the search full screen so results aren't hidden behind the keyboard
- Show fewer, larger results that are easy to tap
- Keep the close button easy to reach
Mistakes to avoid
Measure it: compare conversion for shoppers who click an autocomplete result with those who don't.
- Showing only text suggestions with no products
- Suggestions that lead to searches with no results
- A dropdown that jumps around while results load
Autocomplete in Gazelle
Gazelle's instant search shows products with images and prices from the first letters, with typo tolerance and exact SKU matching, and records which results shoppers click.
Questions
- How many results should autocomplete show?
- Enough to fill the dropdown without scrolling: often 4 to 8 products on desktop and fewer on mobile, plus a link to all results.
Related
Free to start