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:
- 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. - 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 Dietary product metafield.
- 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:
- A block with a Collection links to that collection.
- A block without one links to the section's collection, filtered by the label, when the filter is on.
- 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.