Skip to main content
When the visitor clicks the search icon in the header, Voyager slides a full-width panel down from below the navigation. The panel splits into a left aside (recent searches, popular searches, services) and a right grid (live product results, default to four featured products on first open). Type into the input and the right side replaces itself with matched products as you type.

​
Triggers

The icon’s aria-expanded attribute mirrors the panel’s open state, so screen readers announce the change correctly.

​
Layout

The bar at the top contains the search input and a Close button.

​
Recent searches

Hidden by default. The first time a visitor performs a successful search, Voyager saves the term to localStorage under voyage-recent-searches (cap of 5, most-recent-first). The Recent Searches block reveals itself the next time the panel opens. Clicking a recent term repopulates the input and triggers a new search. Six static links to common categories, defined in snippets/search-panel.liquid. The defaults reference common product types:
  • New Arrivals → /collections/new
  • Summer 2026 → /collections/summer-2026
  • Shirts / Knitwear / Outerwear / Trousers → /collections/all?type=…
Edit the list directly in the snippet for your house’s vocabulary.

​
Services

A single link by default (“Contact”). Edit snippets/search-panel.liquid to add support / repair / FAQ links — anything outside the catalogue you’d want a searching visitor to find.

​
Live results

Typing into the input fires a debounced fetch. After the visitor stops typing for a moment, Voyager hits a custom JSON endpoint:
The endpoint is implemented in templates/search.json.liquid and returns:
In a single round-trip you get both the preview grid (4 products) and the true total count (used in the “View all 47 results →” footer link). The link routes to the styled /search?q=… page (templates/search.liquid).

​
Race-condition handling

The fetch is debounced so we don’t fire on every keystroke. But debouncing alone isn’t enough — if the visitor types “cot”, then quickly “cotton”, a slow response for “cot” could arrive after the response for “cotton” and stale-overwrite the grid. Voyager handles this with an AbortController:
  1. Each new keystroke aborts the previous in-flight fetch
  2. Each response is double-checked against the current input value before being rendered
The net effect: results always match the current input, even on slow connections.

​
Empty state

If the visitor’s query returns zero products, the right pane shows the No-results message set in Theme Settings → Search:
The default reads in Voyager’s editorial vocabulary (“pieces” rather than “products”). Override it to match your house voice from Theme Settings → Search → Empty state → No-results message. The “View all results →” footer link stays hidden in this state — it would lead to a similarly empty page. When the input is cleared, the right pane snapshots back to its default state (the four featured products that loaded on first open).

​
Default products

The four products in the default state come from your all collection (collections.all.products limit: 4). They’re the most recent four added to the storefront — useful as “new arrivals” hints when the panel first opens. To customize which four show, edit the loop in snippets/search-panel.liquid and reference a specific collection instead — for example, collections.featured.products limit: 4.

​
Predictive search settings

A few related controls in Theme settings → Search:

​
What’s next

Cart drawer

The other slide-in surface — both share the same data-open pattern.

Search template

The full /search page that the panel links to.