Predictive search and suggestions

The search icon opens a full-screen overlay over the coal ground. Results appear as the shopper types, grouped by what they are; before a single key is pressed the overlay offers their recent searches and the terms you’ve chosen to push.

Settings

Theme settings → Layout

Setting	Type	Default	What it does
Popular searches	Text	`Jacket, Ski mask, Travel pack`	Comma-separated terms shown as chips in the empty overlay

That’s the only setting. Everything else is behaviour.

The empty state

An empty search field is a dead end, so the overlay fills it with two things:

Recent searches — up to five, remembered by that shopper’s own browser and never leaving it. There’s a Clear button because a list of what someone searched for is theirs. A term is only remembered when the search is actually submitted, not on every keystroke — a half-typed word is not a search.

Popular searches — your popular_searches terms as chips linking straight to the search results page.

Both disappear the moment there’s a query to answer with, and come back when the field is cleared.

Live results

Typing two or more characters queries Shopify’s predictive search API, debounced at 220 ms so a fast typist makes one request rather than eight.

/search/suggest.json
  ?q=…
  &resources[type]=product,page,article,collection
  &resources[limit]=4
  &resources[limit_scope]=each

Products come first, each with a thumbnail, title and price. Then the pages a shopper actually hunts for — collections, pages, journal articles — as plain grouped rows under their own headings.

`limit_scope=each` is the point

Without it, the storefront applies the limit to the whole response. A query matching four collections, eight pages and three articles would surface two collections, one page and one article — a limit of four across everything combined. Scoping the limit per type previews each group properly: up to four products, up to four collections, up to four pages, up to four articles.

Results morph rather than rebuild

Results update in place as the shopper types rather than being thrown away and rebuilt, which is why the list doesn’t flicker and why a row stays put while they move toward its contents (see Performance and architecture).

The effect is visible: a result that’s still in the list after the next keystroke keeps its node, so its thumbnail isn’t re-requested and the list doesn’t flash on every character typed. On a slow connection the difference between this and an innerHTML rebuild is the difference between a stable list and a strobing one.

No matches

A query with no results shows “No matches — press Enter for the full search” rather than an empty panel. Pressing Enter goes to the full search results page, which has filters and pagination the overlay doesn’t.

Prices in the overlay

The predictive search API returns prices as bare decimal strings — "8500.00" — with no currency symbol and no shop formatting. Signal converts those to cents and formats them in the cart’s active currency, so the figure in the overlay matches the figure on the card.

Keyboard and dismissal

The field is focused automatically a moment after the overlay opens.
Escape closes it.
Clicking the backdrop closes it.
Enter submits to the full search results page.
Page scroll is locked while open.

The full search page

The overlay is a shortcut, not a replacement. Submitting lands on Signal’s search results page, which renders product results as the theme’s real product cards and carries the same filter drawer the collection pages use — so filtering and sorting work the same way after a search as they do inside a collection. Results are paginated with numbered pages.

Locale keys

Under search in locales/en.default.json: collections, pages, articles (the group headings — the journal heading is articles), and none (the no-match line).

Under general: search, recent_searches, clear_recent, popular_searches, search_hint.