Search Page

Full search results with a predictive UI, filters, sorting and the product grid.

Overview

How predictive search matches products

The header search bar does not rely only on Shopify’s native predictive search for products. Native Shopify search tokenizes titles and SKUs, so a mid-code query like 1212 inside CK2P1212-SJ-NT often returns nothing.

Nova-IMP builds a local product index (title, vendor, handle, and every variant SKU) and matches with substring search, so:

Behaviour details

1. Opening search (or loading the page) prefetches /collections/all/products.json and caches the index in sessionStorage for about 30 minutes.
2. Typing uses a 100 ms debounce so suggestions feel immediate.
3. Product suggestions render from the local index as soon as it is ready (up to 8 products).
4. Pages, articles, collections and query suggestions still come from Shopify predictive search and merge in afterwards.
5. While the index is still loading on the first visit, Shopify predictive search is shown as a temporary fallback, then replaced by local title/SKU matches.
6. Sold-out products are omitted when Hide fully sold-out products is enabled (Theme settings → Products).

Admin tip: Put the searchable code in the product title and/or each variant’s SKU field. Codes only in the body description are not indexed by this search.

Step-by-step user journey

Step 1 — Start a search from the header

1. Click the search icon
2. The predictive search overlay opens (the product index begins loading in the background if needed)
3. Type a query → live suggestions from title and SKU (plus pages/articles/collections when available)
4. Click a suggestion → product page
   or press Enter / "View all" → the full Search page

Step 2 — Land on the search results

1. The query is confirmed in the search field
2. Result count, or the empty state

The full /search results page still uses Shopify storefront search. Mid-SKU matches are most reliable in the header predictive overlay. Prefer that for code/SKU lookups, or ensure important codes also appear as separate tokens in the title.

Step 3 — Empty results

1. A "No results" message
2. Refine the query and search again
3. Popular products or continue shopping, depending on the theme's empty state

Step 4 — Filter and sort the results

1. Filter drawer or sidebar (collection-style filters)
2. Sort options
3. The grid updates

Step 5 — Browse and buy

1. Product tiles
2. Quick shop modal or the full product page
3. Add to cart → cart drawer

Step 6 — Paginate

• Further pages of results

Related pieces

Theme Editor settings

Each section below links to its full settings reference — every setting with id, type, default and a screenshot of the panel.

Full index: settings reference

Related files

templates/search.json
sections/main-search.liquid
sections/search-results.liquid
sections/predictive-search.liquid
snippets/predictive-search.liquid
snippets/search-results.liquid
snippets/search-grid-item.liquid
snippets/collection-grid-filters.liquid
snippets/pagination.liquid
assets/theme.js
layout/theme.liquid