Storefront widgets

Collection page

The Typesense-backed replacement for the native grid.

This is the widget that does the heavy lifting: it replaces your theme's native product grid with a Typesense-backed one that knows the shopper's vehicle.

What changes for the shopper#

Fitment filtering
on by default when a vehicle is active. A toggle lets them see everything.
Real filters
price, stock and your own metafield facets, applied server-side.
Four sorts
Best match (the ranking score), price ascending, price descending, alphabetical.
Fast paging
results come from the search index with a cache in front, not from Liquid looping over products.

It renders on every collection#

The grid serves any collection, mapped or not. Unmapped handles get a humanized display name and the normal collection filter; Shopify's reserved all route gets no collection clause and searches your whole catalog. There is no 404 for an unmapped handle — mapping only decides what appears on the post-search list page.

Placement#

On your collection template: remove or hide the theme's product grid section, then add the WySync collection block in its place. Keep the theme's own banner, description and breadcrumbs — the block replaces the grid, not the page.

Hide the native grid, don't delete the template

Removing the theme's grid section is reversible from the theme editor. Editing your theme's Liquid to delete it is not, and it makes rolling back harder than it needs to be.

Settings#

  • Layout variant: standard grid, or grid with a left filter rail
  • Product card variant: compact or detailed
  • Products per page and per-row counts for desktop, tablet and mobile
  • Whether fitment filtering defaults on
  • Copy for the empty state and the fitment toggle

Filters#

Built-in filters are always available: price range, stock status (in stock / low stock / out of stock, with your own low-stock threshold), and vendor. Everything else comes from your mapped metafields — lift height, rotor diameter, beam pattern, hitch class, blade length, wheel diameter, whatever your catalog carries — reorderable by drag, and each hides itself when no product in the current result set has a value for it.

Mobile#

Filters collapse into a bottom sheet with a "Show N results" button, and the grid reflows to one or two per row. This is the default; it is not a variant, because a filter rail on a 390px screen is not a design choice anyone should be offered.

Still stuck?

Support is answered by the people who wrote this code — not a ticket queue.

Contact support