QUANTM7 Docs
Platform

Search

How storefront search works, including AI enrichment, search suggestions, and cross-store learning.

QUANTM7 storefronts have built-in search. It runs in the browser for instant results as the customer types. Behind the scenes, AI adds extra search phrases so products show up even when the customer uses different words.

How search works

Every store has a search index. This is a JSON file on the CDN that holds all your products, collections, pages, and blog posts. The storefront loads it once and searches it locally with MiniSearch.

Because the index lives on the CDN and search runs in the browser, results appear right away. There is no server call on each keystroke.

The index rebuilds when you save changes in the admin. You can also trigger a rebuild from the admin sidebar.

What gets indexed

Each product in the index includes:

FieldExample
Title"Gold Helix Clicker Ring"
DescriptionProduct description text
Brand"Auricle"
Product type"Earrings"
Tags"gold, clicker, helix, cartilage"
SKU"AUR-HC-001"
Collection names"New Arrivals, Clicker Rings"
Enrichment terms"helix piercing, cartilage jewellery, dainty earring"

Collections, pages, and blog posts are indexed by title and description.

Search suggestions

As the customer types, the dropdown shows grouped suggestions above the product results. These come from a list built at the same time as the search index. No API calls are needed. Matching runs in the browser.

Suggestions fall into four groups:

GroupSourceWhat happens on click
BrandsProduct brand namesFills the input with the brand name and shows matching products
CategoriesProduct typesFills the input with the category and shows matching products
CollectionsCollection titlesGoes straight to the collection page
PopularTrending queries from the last 7 daysFills the input with the query and shows matching products

Each group shows up to three matches. A group only appears when it matches what the customer has typed. If the customer types "au" and a brand called "Auricle" exists, the Brands group appears with "Auricle" as a clickable option.

Suggestions help in three ways. They prevent typos (the customer clicks "Auricle" instead of mistyping it). They guide discovery by showing collections the customer might not know about. And they make sure the dropdown is never empty when relevant content exists.

AI enrichment

Keyword search has a key limit. If a customer searches "helix piercing" but no product contains those words, the results page is empty. The product might be perfect for helix piercings, but keyword matching alone cannot make that link.

AI enrichment fixes this. When you save a product, QUANTM7 generates search phrases that a customer might use to find it. These cover:

  • Use cases like "helix piercing", "birthday gift", or "everyday wear"
  • Synonyms like alternate names a customer might type
  • Materials like "hypoallergenic", "nickel free", or "implant grade"
  • Style words like "minimalist", "dainty", or "statement piece"
  • Occasions like "wedding jewellery" or "gym accessories"
  • Body placement like "cartilage earring" or "ankle bracelet"
  • Tag phrases that build on product tags (e.g. "gold" adds "gold jewellery", "gold plated")
  • Type variants that cover other names for the product type (e.g. "Earrings" adds "studs", "hoops")

These terms are stored on the product and added to the search index. They do not appear on the storefront. They only affect search results.

Enrichment runs on its own. There is nothing to set up. When you save a product, it runs in the background. A scheduled task also catches any products that were missed.

Tiered results

Search results are split into two tiers based on how the match was found.

Direct matches

These are products where the search term appears in the SKU, title, or brand name. Direct matches appear first. They carry the strongest signal. A customer typing a SKU or product title knows what they want.

Secondary matches

These are products that matched on tags, product type, collection names, description, or AI enrichment terms, but not on SKU, title, or brand. They appear in a section called "You might also like".

For example, searching "helix piercing" might show:

Products
  Gold Helix Clicker Ring              (matched on title)

You might also like
  Titanium Flat Back Labret            (matched on enrichment terms)
  14k Threadless Opal End              (matched on enrichment terms)

When there are no direct matches, secondary results move up to the main section. The customer always sees results when relevant products exist.

This layout appears in both the dropdown (predictive search) and the full results page.

Cross-store learning

QUANTM7 collects anonymous search signals across all stores. When a customer searches and clicks a product, the platform records the link between the query and the product's type, tags, and brand. No product IDs or store data are shared.

Over time, these signals reveal patterns. If customers across many stores search "cartilage earring" and click on flat back labrets, the platform learns that link.

Learned synonyms

When two different queries lead to clicks on products with similar traits, the platform treats them as synonyms. For example, "cartilage earring" and "flat back stud" might both lead to clicks on products tagged "flatback" with type "Earrings". They become synonym candidates.

Candidates are promoted to active when they appear across multiple stores with high confidence. Active synonyms are added to every store's search index.

This means your store gains from search patterns across the whole platform. And your customers' clicks help improve search for everyone else.

How signals feed back into enrichment

When a product is re-enriched, the system uses relevant cross-store signals. If customers across the platform search for certain terms and click products like yours, those patterns shape the new enrichment terms. This creates a loop where search gets smarter over time.

Search ranking

Results within each tier are ranked by relevance. The weights are:

FieldWeightTier
SKU5xDirect
Title4xDirect
Brand3xDirect
Tags2xSecondary
Collection names1.8xSecondary
Product type1.5xSecondary
Enrichment terms1.2xSecondary
Description0.5xSecondary

SKU ranks highest because it is an exact code. A customer typing a full SKU knows what they want. That product should always appear first.

Title and brand rank next. They show clear intent. A customer searching "Auricle" or "Gold Helix Clicker Ring" has a target in mind.

Tags, product type, and collection names still help with ranking. But they are secondary matches. They surface relevant products without pushing aside exact title or SKU hits.

Description ranks lowest. Product descriptions use broad language that can match many queries without being a strong signal.

Search UI

The search experience adapts to screen size. On mobile, tapping the search icon opens a full-screen panel that slides in from the right. The input sits at the top with a back arrow to close. Results fill the rest of the screen in a single column.

On desktop, clicking the search trigger opens a full-width overlay below the header. This overlay uses a two-column layout when the customer starts typing. The left column shows suggestions grouped by type (brands, categories, collections, popular). The right column shows product cards in a grid with images, brand names, titles, and prices.

Before the customer types, both mobile and desktop show recent searches and trending searches as clickable pills.

A footer at the bottom of the overlay shows a "View all results" link that goes to the full search page, and an "Ask Joey" AI button (coming soon).

Search display modes

The header search trigger has three display options. Set this in the visual editor under Header > User Actions > Search.

ModeDesktopMobileBest for
Icon (default)Magnifying glass iconSame iconMost stores
Text"Search" text with iconSame textStores that want a visible label
InputClickable search bar with placeholderFalls back to iconLarger catalogs, department-store style

The "Input" mode renders a rounded search bar in the header that looks like a text field. Clicking it opens the same search overlay. On mobile, it falls back to the icon to save header space.

Components

The search UI is split into three components inside the storefront:

ComponentFilePurpose
PredictiveSearchcomponents/PredictiveSearch.tsxTrigger button, composes the overlay
SearchOverlaycomponents/SearchOverlay.tsxResponsive container (mobile drawer / desktop overlay)
SearchContentcomponents/SearchContent.tsxSearch input, suggestions, results, keyboard navigation

PredictiveSearch is loaded via dynamic() with ssr: false in both theme header files. The other two components are static imports inside it, so they share the same code-split boundary and add nothing to the initial page bundle.

Keyboard navigation

The search overlay supports full keyboard control:

  • Arrow down/up cycles through suggestions and results
  • Enter on a suggestion fills the search input (or goes to a collection)
  • Enter on a product goes to the product page
  • Escape closes the overlay

The active item is highlighted. This works across all sections.

Synonyms

The search engine handles synonyms. When a customer searches for one term, it also checks for equal terms. For example, "earring" also matches "earing" (a common misspelling). And "necklace" also matches "chain".

Synonyms come from two sources:

  1. Built-in synonyms that ship with the platform (misspellings, UK/US variants, trade terms)
  2. Learned synonyms found from cross-store click patterns

Both types are merged into the index. No setup needed.

Fuzzy matching

If a customer misspells a word, search still finds results. It allows up to two wrong characters for words longer than five letters. Shorter words must match closely to avoid false hits.

There is also a server-side fallback. If the browser index is not loaded (slow connection or no JavaScript), the storefront runs a database query with the same fuzzy matching.

On this page