logo
Shopify Builds>Surfaces>Search

Search

Search covers two things a storefront renders from the same query index: the search results template, with its facets, tabs and paging, and the predictive panel the header opens as a shopper types. Results are not only products — articles and pages come back too — so the surface has to render more than one card shape and handle an empty state properly.

How We've Used It

The work splits along that same seam. On the results page we extend the theme's own search section: tabs for products, articles and pages, Shopify's facets alongside them, and an AJAX submit path so a query refines the grid in place instead of reloading. In the predictive panel the constraint is latency, so the panel renders client-side from a JSON response and reuses one popdown component in both the header and the results page. Empty states are treated as merchandising rather than as an error message — top searches and a couple of collection cards, configured by the merchandising team.

Builds Using It

12 further gated builds use it; their pages follow.

Related Entities

Builds

Product-card hover video and a reusable deferred-media playback refactor

The shared product card's hover slot can hold a short clip instead of a second still: a per-product metafield decides which, the card emits a video that fetches nothing until asked, and a pointer-only, motion-aware binder plays it on hover of the whole card — plus a refactor of Dawn's deferred-media element that handles every player kind through one function.

LUS Brands

Collection grid card on a licensed theme: metafield merchandising, a badge precedence chain, a hover-swap swatch element and first-row loading hints

Palo Alto's grid item extended so the card's title, strapline, cutline and badge come from product metafields, badges resolve in one fixed order, color options become a swatch element that swaps the card image on hover, and column classes are computed from whatever section happens to be calling.

Three Ships

Predictive search moved off Shopify onto an external search API with client-side templating

The type-ahead rebuilt from the inside: same custom element, same keyboard model, same ARIA contract — a different data source and a render step that did not exist before.

Nudestix

Price snippet with a bundle 'value' metafield line and opt-out labelled price links

Dawn's price snippet on Nudestix, extended in two small ways: a product metafield adds a "worth" line beside a kit's price, and the price text becomes a labelled link to the product unless the caller says otherwise.

Nudestix

Product card with award badges, per-variant content payload and per-card structured data

One snippet renders the whole Nudestix grid card: tag and award badges, quick view, wishlist, comparison, an in-grid add to bag, and a per-variant data payload the shade switcher reads without a fetch.

Nudestix

Filter-triggered promo cards inside the search results grid

A theme-editor block that puts a merchandiser-designed card into the search results grid at a chosen position, and shows it only while a named facet is active on that query.

Three Ships

Tabbed multi-type search results page with faceted filtering

One query, three kinds of answer: a search section that counts products, articles and pages before it renders any of them, tabs between them, and keeps a set of SKUs out of the grid entirely.

Three Ships

Vertical filter rail and an in-place mobile filter accordion replacing Dawn's drill-down drawer

Dawn's facets snippet was rebuilt into a sidebar rail with color swatches and show-more truncation, an accordion mobile drawer where every group opens in place, and a single sort control that physically relocates between breakpoints.

LUS Brands