# Search and filters

Chapter 13 of the Sprinkle user guide.

## Collection and search pages

The **Collection** section shows a small count ("12 treats"), the title, the description and, with **Show collection image**, the collection's image in a scalloped frame. Under that come the toolbar and your products on the display shelf, with page numbers when there are more than one page.

The toolbar has **dietary chips** first, then a **Filter** button that opens a drawer at every screen size, and **Sort by**. Active filters show as removable pills with **Clear all**. Filtering updates the results without reloading the page, and works without JavaScript too. Every filter in the drawer is a list of checkboxes with counts; price is From and To fields.

The **Collection** section's settings:

| Setting | Default | What it does |
| --- | --- | --- |
| Show breadcrumbs | On | |
| Show collection image | On | |
| Show description | On | |
| Enable filtering | On | Set up filters in Shopify Search & Discovery (below) |
| Enable sorting | On | |
| Show dietary chips | On | The chip row above the grid |
| Dietary filter | `custom.dietary` | The metafield behind the chips. Turn it on as a filter in Shopify's free Search & Discovery app. A shop that uses tags can enter a whole filter parameter instead, such as `filter.p.tag`. |
| Show vendor | Off | The vendor above each product's name |
| Products per page | 12 (8 to 36, in steps of 4) | |

**Dietary chip** blocks each have a **Label** ("Gluten free") and a **Fallback collection**.

The **Search** section has **Show breadcrumbs**, **Enable filtering**, **Enable sorting** and **Show dietary chips** (all on), **Dietary filter** (`custom.dietary`), **Results per page** (12, 8 to 36) and the same **Dietary chip** blocks. Results can be narrowed to Products, Pages or Articles. As shoppers type in the header's search, it shows matching products, collections, pages and articles.

## How the dietary chips work

Each chip does one of three things, depending on what's set up:

| The dietary filter | A Fallback collection on the chip | What the chip does |
| --- | --- | --- |
| On in Search & Discovery, and the results include products with this value | Either | **Filters the grid in place.** The chosen chip is filled, and an **All** chip clears it. |
| Off, or no product in the results has this value | Yes | **Links to the fallback collection** |
| Off, or no product in the results has this value | No | **Doesn't show.** A shopper never lands on a filter that does nothing. |

The chips' labels come from your **Dietary chip** blocks, in their order. With no blocks, they come from **Theme settings › Allergens and dietary › Dietary labels**. A value on your products that no label names still gets a chip when the filter is on, because the filter leaves the drawer and the chips are the only way to reach it.

**What the fallback collections do until the filter is on.** The presets' Collection section has no Dietary chip blocks, and the filter isn't on when you install, so a fresh store shows no chips above its grids. The theme editor shows sample chips, so you can see where they'll go. You have two ways to make them real, and you can do both:

* **Turn on the filter** (below). This is the better way: chips then filter whichever collection the shopper is on.
* **Add fallback collections.** Add a **Dietary chip** block for each label, and choose a collection you've made by hand or by tag, such as a Gluten free collection, as its **Fallback collection**. The chip is then a plain link to that collection. It takes shoppers out of the collection they're on, but it works straight away.

Once the filter is on, a chip with a fallback collection only uses it when the current results have no products with that value.

## Set up the dietary filter with Search & Discovery

Filters come from Shopify's free **Search & Discovery** app. To add the `custom.dietary` filter:

1. Check you have the **Dietary** metafield definition from chapter 7. It must be `custom.dietary`, a **Single line text** **List of values**, and defined for all products rather than for one category. Fill it in on your products first.
2. In admin, go to **Apps** and open **Search & Discovery**. If you haven't got it, install it from the Shopify App Store.
3. Open **Filters** and click **Add filter**.
4. Click the **Source** field and choose your **Dietary** product metafield.
5. **Save**.

Sprinkle recognises the filter by its metafield, so you can label it as you like. If its values don't appear after you've changed your metafields, allow 24 to 48 hours for Shopify to index them. A store can have up to 25 filters, and collections with more than 5,000 products don't display filters.

Other good filters for a bakery: **Availability**, **Price**, **Product type** (Cookies, Cakes, Boxes) and **Tag**. A filter you add appears on every collection and on search results, in the Filter drawer.

The same app sets the **complementary products** behind "Goes well with" (chapter 4).

## Chips on the home page

**Featured collection** has its own chip row at the right of its heading, one link per **Dietary chip** block. It works a little differently:

1. A block with a **Collection** links to that collection.
2. A block without one links to the section's collection, filtered by the label, when the filter is on.
3. With neither, shoppers don't see the chip. In the theme editor it shows as a sample.

So to make a chip filter, leave its **Collection** empty and turn on the filter. The Sprinkle home page ships Gluten free, Vegan and Nut free chips this way. The section's **Show dietary chips** and **Dietary filter** work as they do on the collection page, except that this section takes a metafield only. An **All** chip leads to the collection.

**Dietary tiles** are a **Collections grid** with **Tile** blocks, which show their **Tile label** whether or not anything's behind them yet. Point each tile somewhere: choose a **Collection**, or paste a filtered address into **Link**, such as `/collections/all?filter.p.m.custom.dietary=Gluten%20free`. A tile with neither leads to all products.