1. Search bar design: make the box easy to find
Place the search bar in the header on every page, in the same spot, usually at the top centre or top right. Show it as an open text field rather than only a magnifier icon on desktop, because an icon has to be noticed and clicked before anyone can type. On mobile, an icon is fine if it opens a full screen search with the keyboard ready.
Make the field wide enough for a product name of three or four words, give it a clear contrast against the header and use a short placeholder that says what can be searched, for example “Search products, brands or SKUs”. The placeholder is a hint, not a label: it disappears as soon as someone types.
2. Show results while customers type
Search as you type turns the search bar into a shortcut. After two or three letters, show matching products with image, name and price, and suggest categories or brands that match the typed word. Many shoppers click a product straight from this list and never see a full results page.
Wait a moment between keystrokes before you search, so the list does not flicker while someone types quickly, and keep the response fast. Pressing Enter should still lead to a full results page with filters, and the Escape key should close the overlay without losing what was typed.
3. Handle the queries shoppers really type
Real queries are short and messy: a product name with a typo, a plural instead of a singular, a colour plus a product type, a brand, an article number or a GTIN copied from a supplier list. A good store search tolerates small typos, searches SKUs and GTINs and understands the words customers use even when your catalogue uses others, for example through synonyms.
When a query has a typo, show the results for the likely spelling and say so, for example with a “Did you mean” line. Customers should never have to guess why a result appears.
4. Never end on an empty page
A “no results” page is where many searches end. Show what was searched, offer a corrected spelling if there is one and suggest popular searches or categories so the shopper has a next step. A dead end with only “0 results” sends people back to Google.
Then fix the cause. A regular look at the searches without results shows missing synonyms, products you do not stock yet and gaps in your product data. Our guide on product feeds explains which fields a search needs.
5. Results page and filters
Rank available products before sold out ones, show prices and variants clearly and keep the layout the same as your category pages so shoppers recognise it. Show the number of results and keep the query in the search field.
Offer filters that match the result set: category, brand, price and the attributes customers narrow down by, such as colour or size. Show counts next to filter values and hide values that would lead to zero products. Filters only work if the attributes are filled in your product data.
6. Mobile search UX
On a phone, the search should open as its own screen with the field at the top and the keyboard open. Results need large touch targets, and filters belong in a panel that opens over the results and closes with one tap after the selection, so shoppers see what changed.
Test with your own phone, not only a resized desktop browser: type a product name with a typo, open the filters, choose one and go back. Every extra tap on a small screen costs customers.
7. Accessibility and keyboard use
The search field needs a label that screen readers announce, results should be reachable with the keyboard and the number of results should be announced when it changes. Visible focus outlines and enough colour contrast help everyone, not only customers with assistive technology.
8. A ten minute search UX checklist for your store
Run these tests on desktop and on a phone and note what happens. Each failed point is a concrete task for your shop, your theme or your search provider.
- Is the search bar visible on every page without scrolling?
- Do products appear while you type the first letters of a product name?
- Search a product name with one wrong letter. Does the right product appear?
- Search an article number and a GTIN from your catalogue.
- Search a word your catalogue does not use, for example “couch” for “sofa”.
- Search something you do not sell. Does the page offer a next step?
- Filter a search result by colour or size on your phone.
- Use the search with the keyboard only: Tab, arrow keys, Enter and Escape.
9. How Grumeria handles search UX
Grumeria adds a search overlay to your existing search field: results with image and price while customers type, category and brand suggestions from your catalogue, typo tolerance, SKU and GTIN search, synonyms, filters and “Did you mean” for misspelled queries. When nothing matches, it shows your popular searches. On phones it opens as a full screen search with its own filter panel, and it supports keyboard use and screen reader announcements. Plans start at €29 per month excl. VAT, with a 14-day trial without a payment method.
The free feed check shows in one minute which data Grumeria finds in your store and runs example searches on your products, so you can see the result before you install anything.
Frequently asked questions
Where should the search bar be on an ecommerce site?
In the header of every page, in the same position, usually top centre or top right. On desktop show an open text field, on mobile an icon that opens a full screen search is common.
What is search as you type?
The store shows matching products and suggestions while the customer types, before they press Enter. Shoppers can click a product directly from this list.
What should a no results page show?
The query, a corrected spelling if there is one and a next step such as popular searches or categories. Review searches without results regularly to add synonyms and fix product data.