Appearance
Search
How shoppers find things in your store. As they type in the header's search field, instant suggestions appear — products with photos and prices, collections, articles, and pages. Pressing enter opens a full results page with Products / Articles / Pages tabs, optional filters, and sorting.
And when a search finds nothing, the theme doesn't dead-end: the "no results" page recovers the sale with a "did you mean" suggestion, four collections you choose, your most popular searches, and the shopper's own recent searches.
It works out of the box — there is nothing to install or connect.
Try it
Pick a preset, then switch between the three surfaces: the results page, the "no results" recovery page, and the search drawer with instant suggestions. Change the settings and watch the preview update; use the screen-size buttons and the light/dark toggle to check every mode. In the results view, the Products / Articles / Pages tabs really switch (keyboard arrows work too).
←Search
Filters apply to product results only. Article and page results are never filtered.
Sorting applies to product results only.
20
How many results show on each page. Applies to every result type.
Suggested collections
Shown only when a search returns nothing — a way back into the store.
Color scheme is a real Search-section setting too — in this demo the preset switcher and the light/dark toggle drive the palette instead, so every preset's shipped signature shows on its true surface. Suggested collections is a collection picker in the theme editor; the docs can't open your store's catalog, so here it toggles this preset's four demo collections.
Search preview
Search
15 results found for "kitchen"
Uisce — the luminous waterline: a sea-glass seam slides in under the active tab, drawer rows, and focused inputs.
The three surfaces
| Surface | Where shoppers meet it | What it shows |
|---|---|---|
| Search drawer | The magnifying-glass icon in the header (a slide-in panel) | Instant suggestions as they type — products with photo + price in your store's currency format, collections, articles, pages — plus loading, no-results and "search unavailable" states. |
| Results page | Submitting a search (the /search page) | The search field again, a results count, optional Filter + Sort controls, and results in Products / Articles / Pages tabs, paginated. |
| No results page | A search that matches nothing | A headline, a supporting line, a "did you mean" suggestion, up to 4 suggested collections, up to 5 popular-search shortcuts, and recent searches. |
All three tabs — Products, Articles, Pages — appear on every results page, so every result type is one click away no matter how large the catalogue. A search that only matches articles opens straight on the Articles tab. Each tab is a real link, so the tabs work with JavaScript switched off too.
Settings
These live on the Search section (open the theme editor on the search page, or Customize → change page type to Search).
| Setting | What it does |
|---|---|
| Color scheme | Colors the results page. Each preset ships its own signature accent on top. |
| Enable filtering | Lets shoppers narrow product results (availability, price, your product options) — a facet sidebar on desktop, a Filter button that opens a drawer on phones. |
| Enable sorting | Shows a Sort by dropdown (relevance, price, and more). Applies to product results only. |
| Results per page | How many results show before the page adds pagination. Every result type is paginated — products, articles and pages alike. |
| Suggested collections | Pick up to 4 collections to show as recovery cards on the "no results" page. Choose your bestsellers — this is the page that saves the sale. |
| Popular search | A block. Add as many as you like — each is a one-tap pill on the "no results" page. Use words shoppers actually type. |
The search field's placeholder text and all other wording come from the theme's translations, so they're localized automatically in all 50 languages.
Preset signatures
The five presets share the same search surfaces; each decorates the active tab, the drawer rows, and the focused input with its own signature seam — the same mark its header navigation uses. Switch presets in the demo above to compare.
| Preset | Signature |
|---|---|
| Uisce | A luminous sea-glass waterline slides in flat from the centre. |
| Gaoth | An amber wind-trail feathers in from the start edge, like a breeze. |
| Talamh | A two-tone soil-strata band — moss over terracotta — rises up from the baseline. |
| Tine | A molten heat-glow ignites from the centre with an ember bloom. |
| Neart | A vital-pulse load-bar drives in from the reading edge and settles. |
The zero-results recovery accents (the "did you mean" chip, card and pill hovers) pick up the same preset ink.
How predictive search works (zero setup)
Instant suggestions work with no setup at all — the theme uses Shopify's built-in predictive search, available on every store.
Optionally, a store can provide a Storefront API access token in Theme settings. With a token, the theme upgrades to Shopify's Storefront API search, which adds typo tolerance (a shopper typing "runing shoes" still finds running shoes) and smarter query suggestions. This is an upgrade, never a requirement — without a token everything above still works.
Responsive, accessible, right-to-left
- Responsive — results are 1-per-row on phones, 2 on tablets, 3 on desktop; the suggested-collection cards go 2-up on phones and 4-up from tablet width. On small screens, search moves into the menu drawer — a full-width field at the top of the menu, with the same instant suggestions.
- Keyboard + screen reader — the result tabs are a real ARIA tablist (Arrow keys move, Enter/Space activates, and the count is announced politely using the tab's own translated name, never an internal code). The drawer input is a combobox: Arrow keys walk the suggestions with a visible highlight, Enter opens the highlighted one, Escape closes the list and keeps your place in the field, and a short "N results found" message is announced politely — the suggestions themselves are not re-read on every keystroke. Every pill and card is a 44 px touch target.
- Right-to-left ready — the signature seams are built from logical CSS and flip their direction and origin in Arabic, Hebrew, Persian, and Urdu.
- Reduced motion — the seam animations turn off for visitors who ask for reduced motion (the seam still shows; it just doesn't animate).
Troubleshooting
Predictive search shows nothing when shoppers type. If the lookup itself fails the drawer now says so ("Search unavailable. Please try again in a moment.") rather than sitting blank, so a silent empty panel usually means no matches rather than a fault. If shoppers do see the failure message: check whether the store is behind a password page — Shopify's suggestion API is unavailable until the store is public. Also check for app embeds that replace or intercept search (a search-and-discovery app may take over the endpoint). Disable the app embed in Theme settings → App embeds and retry. The full results page keeps working either way.
The "no results" page looks empty. The recovery pack only shows what you've configured: open the Search template's section settings, pick up to 4 Suggested collections, and add Popular search blocks for the terms shoppers actually type. Recent searches appear only after the shopper has searched before on that device.
A product doesn't appear in results. Check the product is active and published to the Online Store sales channel; drafts and hidden products never appear in search or suggestions.