Ecommerce Search Autocomplete: How to Design Better Suggestions
How to design ecommerce search autocomplete: query suggestions, products, categories, content, ranking, keyboard and screen reader access, mobile and measurement.
Quick answer
Good ecommerce autocomplete helps shoppers finish their query and reach relevant results faster. Show a short list of query suggestions based on popular searches that return results, a few matching products with image, price and availability, relevant categories or brands, and useful content such as size guides. Rank by match quality, popularity and availability, exclude suggestions that lead nowhere, and follow the WAI-ARIA combobox pattern for keyboard and screen reader access. Make it fast, readable on mobile and measured by selection and outcomes.
What Autocomplete Is For
Autocomplete does three jobs. It saves typing, especially on phones. It guides vocabulary, showing shoppers the words the store uses ("trainers" rather than "sneakers") and the refinements that exist. And it provides shortcuts, taking shoppers directly to a product or category. A well-designed dropdown can prevent zero-result searches before they happen by steering shoppers towards queries that return results.
This article covers autocomplete design and configuration. For broader search interface design, see ecommerce search UX; for the search strategy behind it, see ecommerce site search.
Anatomy of an Autocomplete Dropdown
| Section | Content | Guidance |
|---|---|---|
| Query suggestions | Completed queries from popular searches | 4 to 8 items; highlight the untyped part |
| Products | Matching items with image, name, price, availability | 3 to 6 items; link straight to product |
| Categories and brands | Relevant collections, brands, departments | 2 to 4 items; show hierarchy if helpful |
| Content | Guides, help pages, size charts | 1 to 2 items where queries suggest need |
| Recent searches | Shopper's own recent queries | Only when the box is empty; allow clearing |
| Popular searches | Trending queries | When the box is empty, as inspiration |
Query Suggestions
Query suggestions should come from real searches that returned results and led to clicks, not only from product titles. Filter out queries with zero results, very low volume or inappropriate terms, and review the list for anything that would be embarrassing to suggest. Show the typed part and the suggested completion differently (commonly the completion in bold) so the difference is easy to scan.
Include refined queries that reflect common filters: "running shoes women", "running shoes wide". These act as shortcuts to refined result sets and teach shoppers what refinements exist.
Product Suggestions
Product suggestions let shoppers skip the results page. Each item should show a small image, the product name, price and availability, and the variant or colour if it matters. Exclude or deprioritize out-of-stock items unless they can be pre-ordered. Keep the list short; the results page is the place for browsing.
For stores where shoppers often search by model number or SKU (electronics, parts, B2B), exact product matches should appear first. For fashion and home, a mix of query suggestions and products usually works better, since shoppers are still exploring.
Ranking Suggestions
Suggestion ranking typically combines how well a suggestion matches the typed prefix, how popular it is, whether it leads to available products and any business rules (seasonal boosts, campaign terms). Personalization, such as a shopper's recent searches or preferred department, can help but should stay modest and respect consent. See ecommerce search ranking and search personalization.
- Exact and prefix matches before fuzzy matches
- Popular queries with results before rare ones
- Available products before out-of-stock
- Seasonal or campaign boosts with expiry dates
- Blocklist for inappropriate or misleading suggestions
- Typo tolerance for brand and product names
Autocomplete that sends shoppers nowhere?
ZSpace designs and configures search suggestions that lead to results people click.
Accessibility
Autocomplete is a common source of accessibility failures. The WAI-ARIA Authoring Practices describe the combobox pattern, in which a labelled input controls a popup listbox of options (W3C WAI-ARIA Authoring Practices). Keyboard users should be able to move through suggestions with the arrow keys, select with Enter and close with Escape. Screen reader users need to hear how many suggestions are available and which one is active. Focus must stay in the input while suggestions update.
Check contrast of suggestion text and the highlighted state, make touch targets large enough on mobile, and avoid moving focus unexpectedly. Test with a keyboard and at least one screen reader. See ecommerce accessibility.
- Visible label or accessible name on the search input
- Combobox and listbox roles with correct states
- Arrow keys, Enter and Escape work as expected
- Active option indicated visually and programmatically
- Number of results announced politely
- Touch targets large enough on mobile
Mobile Design
On phones, the dropdown competes with the on-screen keyboard for space. Many stores open a full-screen search layer when the search box is tapped, showing recent and popular searches first, then suggestions as the shopper types. Prioritize query suggestions and a small number of products, use large tap targets, and make it easy to clear the query and close the layer. See mobile CRO.
Performance
Autocomplete must respond quickly enough to keep up with typing. Debounce requests so each keystroke doesn't trigger a call, cancel outdated requests, cache popular prefixes, keep responses small and load images at a small size. Slow suggestions that arrive after the shopper has moved on are worse than none.
let timer, controller;
input.addEventListener("input", () => {
clearTimeout(timer);
timer = setTimeout(async () => {
controller?.abort();
controller = new AbortController();
const q = input.value.trim();
if (q.length < 2) return renderPopular();
const res = await fetch(`/search/suggest?q=${encodeURIComponent(q)}`, { signal: controller.signal });
renderSuggestions(await res.json());
}, 150);
});Autocomplete on Shopify
Shopify's Predictive Search API returns suggested products, collections, pages, articles and queries for a partial search term, and many themes use it to power their search dropdown (Shopify developer docs). The Search & Discovery app's synonyms also influence results. Search apps add configurable ranking, merchandising and analytics for autocomplete. Check your theme's implementation against the accessibility checklist above, since themes vary.
Measuring Autocomplete
| Metric | What it shows |
|---|---|
| Suggestion shown rate | How often autocomplete appears when shoppers type |
| Selection rate | Share of searches where a suggestion is chosen |
| Position of selection | Whether the top suggestions are the useful ones |
| Product vs query selections | Which section helps most |
| Zero results after selection | Suggestions that lead nowhere (should be near zero) |
| Add to cart after selection | Usefulness closer to purchase |
Empty-Box Suggestions
The moment a shopper focuses the search box, before typing, is an opportunity. Showing their recent searches (stored on the device, with a clear option to remove them) helps returning shoppers pick up where they left off. Showing popular or trending searches gives inspiration and shows the store's vocabulary. Keep this list short and useful; it shouldn't read as an advertisement.
Merchandising in Autocomplete
Autocomplete is valuable space, and there's a temptation to fill it with promotions. Modest merchandising works: boosting a seasonal query, surfacing a new collection when its name is typed, or promoting a campaign landing page for relevant terms. Heavy promotion that pushes irrelevant items above genuine matches erodes trust in the dropdown, and shoppers learn to ignore it. Put expiry dates on every rule. See merchandising automation.
Testing Autocomplete Changes
Autocomplete changes can be tested like any other interface change. Useful experiments include query-only vs query-and-product dropdowns, number of suggestions, image sizes, the order of sections and empty-box content. Measure selection rate, zero results after selection, add to cart and revenue per search session. Check accessibility for every variant before launching the test. See A/B testing framework.
| Test idea | Primary metric | Guardrail |
|---|---|---|
| Add product suggestions | Add to cart per search session | Selection rate for queries |
| Fewer suggestions (6 vs 10) | Selection rate | Zero results after search |
| Popular searches on focus | Searches per session | Search exits |
| Category suggestions first | Category page engagement | Search conversion |
Common Mistakes
- Suggesting queries that return zero results
- Too many items, making the dropdown hard to scan
- Out-of-stock products in suggestions
- No keyboard support or screen reader announcements
- Slow suggestions that lag behind typing
- No review of suggestion lists for inappropriate terms
Ready to improve your search suggestions?
Talk to ZSpace about search UX design, search implementation and search audits.
Conclusion
Autocomplete guides shoppers to the words and products that work in your store. Keep it short, ranked by match, popularity and availability, accessible, fast and measured. Related: search analytics and zero-result searches.
Common questions
Suggestions shown as a shopper types in the search box: completed queries, matching products, categories, brands and sometimes help content, so they can reach results faster and with better terms.