Search
How the search panel's live suggestions and the search results page work, including filters, sorting and result types.
Techno has two search surfaces: a panel that opens from the header search button with suggestions as the shopper types, and the full search page at /search.
Search panel
The header's search button opens a panel from the top of the screen with the search field already focused. The field is prompted with "grep >".
Once the shopper has typed two characters, up to six suggestions appear, grouped by type:
| Group | Each suggestion shows |
|---|---|
| Products | Image, title and price |
| Collections | Title |
| Pages | Title |
| Articles | Title and publish date |
Suggestions are links: Tab moves through them, and Escape or a click outside closes the list. Pressing Enter, or the "Search" button, opens the search page with full results. When nothing matches, the list shows "No suggestions". If suggestions can't be loaded, the list closes rather than keep showing suggestions for an earlier term.
The last word typed is matched as the start of a word, so "wireless head" finds "Wireless headphones" before the shopper finishes typing.
The same search field, with suggestions, also appears on the search page and the 404 page.
Turn the panel off with Header › "Show search". See Header & navigation.
Search page
The search page shows the result count, the search field, type tabs, filters and sorting, and the results.
| Setting | Notes |
|---|---|
| "Show breadcrumbs" | A trail, HOME / SEARCH, above the heading. On by default. |
| "Enable filtering" | Shows filter dropdowns when filters are available. On by default. |
| "Enable sorting" | Shows the "Sort by" control. On by default. |
| "Results per page" | 8 to 36. Default 12. |
Result types
Tabs under the search field narrow results to All, Products, Pages or Articles. Within results, products appear as product cards and pages and articles appear as rows below them.
Filters and sorting
Search results use the same filter bar as collection pages, with the filters you set up for search in the Search & Discovery app. Sorting offers relevance and price. See Collection pages › Filtering.
No results
When a search finds nothing, the page shows "No match in index" and suggests a shorter term or a product code.
Improving results
Search is powered by Shopify. The theme controls how results look, not which products match. To improve matches:
- Put the words shoppers use in product titles, types, tags and SKUs.
- Add synonyms in the Search & Discovery app, for example "earbuds" and "in-ear".
- Use product boosts in Search & Discovery to lift key products for common terms.
See also
- Collection pages: filters and sorting in detail
- Header & navigation: the search button