# Search and filters

Chapter 13 of the Peel user guide.

## Collection and search pages

The **Collection** section shows the title, the description and, with **Show collection image**, the collection's image. Under that come the toolbar and your products, with page numbers when there's more than one page.

The toolbar has **finish 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's Search & Discovery app (below) |
| Enable sorting | On | |
| Show vendor | Off | The vendor as the line under each product's name |
| Products per page | 12 (8 to 36, in steps of 4) | |

The **Search** section has Background (First lid colour; also Surface, Second lid colour, Accent or Board) behind the search field, **Show breadcrumbs**, **Enable filtering** and **Enable sorting** (all on), and **Results per page** (12, 8 to 36, in steps of 4). Results can be narrowed by type with tabs. As shoppers type in the search drawer, it shows matching products, collections, pages and articles.

## How the finish chips work

The chips are the **Finish** filter, taken out of the drawer and set above the grid, each with a small dot showing its sheen. A chip is a checkbox: shoppers tick one or several, and the grid updates in place. Only finishes with products in the current results show.

On a fresh install there are no chips, because the filter doesn't exist yet. The theme editor shows four sample chips so you can see where they'll go. Shoppers see them once you've added the filter.

Peel knows which filter it is by its label: **the filter's label must be one of your Finish option names**. So a filter labelled Finish works straight away, and one labelled Coating works once Coating is in **Theme settings › Finish and size › Finish option names**. Any other filter stays in the drawer. **Enable filtering** must be on, and with **Show finish and size previews** off, the Finish filter stays in the drawer too.

## Set up the Finish filter with Search & Discovery

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

1. Check your products. The option must be named the same on every product: "Finish", not "Finish:" on some of them. Shopify builds the filter from the option's name.
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 **Finish** product option.
5. Leave **Filter label** as Finish, or change it to another name in **Finish option names**.
6. **Save**.

If a value doesn't appear after you've changed your options, allow 24 to 48 hours for Shopify to index it. To hurry it along, make a small edit to the product and save. A store can have up to 25 filters, a filter shows up to 100 values, and collections with more than 5,000 products don't display filters.

If your products spell a finish two ways ("Holo" and "Holographic"), use **Create group** in the filter's **Values** section to show them as one chip.

Other good filters for a sticker shop: **Size**, **Availability**, **Price**, **Product type** (Stickers, Sheets, Pins) 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 "Pairs well with" (chapter 4).

## Links to a finish

With the filter on, you can link straight to a finish from a menu, a **Finish tile** or a button. Add the finish to a collection's address, written the way your value is written: `/collections/all?filter.v.option.finish=Holo`. For two words, use `%20` for the space: `filter.v.option.finish=Gloss%20laminate`.