# 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).