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:
- 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.
- In admin, go to Apps and open Search & Discovery. If you haven't got it, install it from the Shopify App Store.
- Open Filters and click Add filter.
- Click the Source field and choose your Finish product option.
- Leave Filter label as Finish, or change it to another name in Finish option names.
- 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.