Search — predictive search overlay

SECTIONSNIPPETPLANNED

sections/search.liquid

snippets/predictive-search.liquid

Spec only This component is planned but not yet built. The interactive playground will land in a future Mock U-15 release. This page documents the component's purpose, schema surface, file structure, and dependencies so adjacent work can plan against it.

§ 01What it is.

SKU-aware predictive search overlay. Triggered from the nav search icon. Searches products, pages, and articles via Shopify's predictive-search endpoint, with custom SKU matching for the manufacturing-vertical use case (partial SKU completion, exact SKU prioritization). Returns categorized results: products (with image + price), pages, articles. Keyboard-navigable, screen-reader friendly. Mobile = full-screen takeover.

§ 02When to use it.

Triggered from the site header. Standalone /search results page. Embedded in the parts-by-model lookup page.

§ 03Files, type, build position.

Component type

Section — full-bleed merchant-configurable page region. Lives in sections/, shows up in the theme editor sidebar.
Snippet — reusable Liquid partial called from other Liquid files via {% render %}. Lives in snippets/, not directly merchant-editable.

Files

sections/search.liquid snippets/predictive-search.liquid

Build position

Critical for B2B SKU lookups. Built late but high-value.

§ 04Related components.

The components this one depends on, composes with, or pairs with. Click through to each.