Search and filters on the whole catalog.
Instant search, a results page and faceted filters, designed in Webflow or Astro and run by Shopify. Search & Discovery is Shopify's own free app; we connect it, we don't charge for it.
Every filter and sort control is an element you style: list, checkbox, select, dropdown, swatch, text search, price range. The filtered catalog renders on the page with no CMS behind it.
What's in it.
Components come with every plan. Add-ons say which plan they need.
Predictive search
Add-on, every planAn instant search box, every pixel designed in Webflow or Astro, with states for results, no query and no results.
Read moreSearch & Discovery
Add-on, every planFilters and sorting from Shopify's free Search & Discovery app, rendered in your layout.
Read moreSearch page
ComponentThe full list of results for a query. Predictive search stops at 10; this page doesn't.
Price slider
ComponentTwo inputs, two ranges and a progress bar, styled however you want.
How to keep it fast on a real catalog.
The parts most people never find in the docs.
Shareable filters
sync-query-params writes the active filters into the URL, so a filtered view can be shared and indexed. Few people turn it on.
A collection page that filters itself
Put a filter section on the collection template bound to the current collection. The page then shows that collection through the discovery engine, instead of a Collection List that cannot filter.
Filters outside the wrapper
data-expand lets the filters live in a side panel or a modal, hooked up with a selector. It is what you want on mobile.
Sold-out products, your call
The search page takes unavailable-products with LAST, HIDE or SHOW: sold-out items go to the bottom, disappear or stay.
- No CMS inside the wrapper. Search & Discovery renders in JavaScript, and on Webflow a Collection List inside it produces wrong output.
- Keep limit under 24. The technical maximum is 250, but performance drops fast above 24.
- Above 200 products, use previous and next, not "load more". On phones with little memory, load more piles up nodes until the page freezes.
- Webflow's bot protection slows the page on Apple devices. It is the first thing to check when someone says "it's slow on my iPhone".
The rest of the store.
Start in Figma.
Go live on Shopify.
Free to build, pay only when you go live. One Shopify app with 17 add-ons, billed on the store’s Shopify invoice.
- One Shopify app with 17 add-ons, on the Shopify bill
- Free to build, pay only when you go live
- Works on Basic, Grow and Advanced
- Your 1.x store keeps working
- Every element stays yours to change
- Docs indexed in llms.txt