Search and filters
Chapter 14 of the Clasp user guide.
Collection and search pages
The Collection section shows a banner (an optional kicker, the title, the description, the number of pieces and, with Show collection image, the collection's image), a toolbar and a grid of product cards: four to a row on desktop, three on tablets and two on phones. On desktop the toolbar stays under the header as shoppers scroll: a small menu per filter, each opening a panel of choices (metal and stone filters as chips with their names, ring sizes and other sizes as size tiles, others as checkboxes with counts, and price as From and To fields with Apply), then the result count and Sort. Active filters show as small tags with Clear all. On phones the filters and sort move into a sheet that slides up behind one Filter and sort button, with "Show 24 pieces" to close it. Filtering updates the results without reloading the page, and works without JavaScript too.
Its settings: Show breadcrumbs (on), Kicker (empty), Show collection image, Show description, Enable filtering and Enable sorting (all on), Show vendor (off) and Products per page (12, 8 to 36).
The Search section has Show breadcrumbs, Enable filtering, Enable sorting and Results per page (12, 8 to 36). As shoppers type in the header's search panel, it suggests searches and shows matching products, collections, pages and articles, with a link to the full results.
Set up filters with Search & Discovery
Filters come from Shopify's free Search & Discovery app. Install it from the Shopify App Store, open it, go to Filters › Add filter, choose the source and save. New filters can take a little while to appear while Shopify indexes your products. Clasp draws two kinds its own way:
| Filter | Source in Search & Discovery | How Clasp shows it |
|---|---|---|
| Metal or stone | The variant option Metal (or any option named in Theme settings › Jewelry › Metal option names) | Chips with their names, colored as on the product page (chapter 8). The filter's label must match a name in Metal option names. |
| Ring size, size, length | The variant option Ring size, Size or Length (any option named in Ring size option names or Size option names) | Size tiles. The filter's label must match a name in one of those settings. |
Every other filter shows as a list of checkboxes with counts. Good ones for a jewelry store: Metal, Stone, Ring size, Availability, Price and Product type (Rings, Earrings, Necklaces). A filter you add appears on every collection and on search results; values with no products in the current results are hidden or disabled.
The same app sets the complementary products behind the "Worn with the …" recommendations (chapter 4).