Search and filters — Dose docs

Collection and search pages

The Collection section shows the title, the description and, with Show collection image, the collection's image. Above the grid sits the goal chip row: All and one chip per name in Goal names, each with its goal colour's dot, linking to the collection filtered by that goal. Without the Goal filter, each chip links to the collection whose handle is the goal's name (Sleep goes to /collections/sleep) when that collection has products, a goal without one gets no chip, and with none at all the row is hidden; on a goal's own collection its chip is the current one and All goes to all products. On the search page the chips need the Goal filter, because a collection link would lose the search. The toolbar has the number of products and Sort by. From 990px wide the filters are a sidebar on the left; under that they're a drawer, opened by the Filter button, with a "Show 42 products" button at the bottom. Active filters show as removable chips with Clear all. Filtering updates the results without reloading the page.

The Search page has the same filters, goal chips and toolbar, with chips to show All, Products, Pages or Articles. As shoppers type in the search panel, it shows matching products, collections, pages and articles. Chapter 4 lists the Collection and Search settings.

Filters need the Search & Discovery app

Filters come from Shopify's free Search & Discovery app. Dose shows whatever filters the app provides, on every collection and on search results. Without it, or with no filters added, there are no filters in the sidebar. Three suit a supplement shop best:

Goal, from custom.goals: chips with each goal's colour dot.
Format, from custom.format: chips with the format's icon.
Certification, from custom.certifications: tick boxes with counts, like every other filter.

An option named in Colour and flavour option names (Theme settings › Product cards), or one with swatches, is drawn as dots with names; price is two fields; everything else is tick boxes.

Without a Goal filter, goal links open the whole collection. The menu drawer's goal tiles link to ?filter.p.m.custom.goals=<goal>. When the store has no Goal filter, Shopify quietly ignores it, so nothing breaks; shoppers simply see everything. Add the Goal filter and every goal link works. (The goal finder's tiles check for the filter first and use their fallback collection when it's missing, chapter 9; the goal chip row checks too and links to each goal's own collection, as described above.)

To add the filters:

Create the custom.goals, custom.format and custom.certifications definitions and fill them in on your products (chapter 7).
In admin, go to Apps and open Search & Discovery. If you haven't got it, install it from the Shopify App Store.
Click Filters, then Add filter.
Click the Source field and choose your Goals product metafield. Label it "Goal" and click Save.
Click Add filter again, choose Format, label it "Format" and Save.
Click Add filter again, choose Certifications, label it "Certification" and Save.

Check Enable filtering is on in the Collection section, which it is by default. If a value doesn't appear after you've changed your products, allow some time for Shopify to index it; a small edit and save on the product can hurry it along.

Shopify's limits:

A store can have up to 25 filters.
A filter shows up to 100 values on your store.
Collections with more than 5,000 products don't display filters.
A metafield filter works on these types: Single line text, Single line text (List), Decimal, Integer, True or false, and Metaobject reference (one or a list). So all three work as filters.

The filter matches values exactly, so spell each goal, format and certification one way across all your products: "Sleep" and "sleep", or "Gummy" and "Gummies", show up as separate values.

Other good filters for a supplement shop: Availability, Price, Product type, and options such as Flavour or Size. The same app sets the complementary products for Product recommendations (chapter 4).

Links to a goal, a format or a certification

With the filters on, you can link straight to them from a menu, a button or a promo:

/collections/all?filter.p.m.custom.goals=Sleep
/collections/all?filter.p.m.custom.format=Gummy
/collections/all?filter.p.m.custom.certifications=Vegan

Write a value with a space as it is in admin; your browser encodes it (Third-party%20tested). The easiest way to get a link right is to tick the filter on your store and copy the address.