Search and filters

Collection and search pages

The Collection section shows the title, the description and, with Show collection image, the collection's image, then your products in a ruled grid with page numbers. From 990px wide the filters are a sidebar. Under that they're a drawer, opened by the Filter button. Sort by sits above the grid, and active filters show as removable pills. Filtering updates the results without reloading the page.

Chapter 4 lists the Collection and Search settings. As shoppers type in the search drawer, it shows matching products, collections, pages and articles.

Filters need the Search & Discovery app

Filters come from Shopify's free Search & Discovery app. Without it, or with no filters added, there's no Family filter, even when every product has custom.family. Decant shows whatever filters the app provides, on every collection and on search results.

To add the Family filter:

1. Create the custom.family definition and fill it in on your products (chapter 7).
2. In admin, go to Apps and open Search & Discovery. If you haven't got it, install it from the Shopify App Store.
3. Click Filters, then Add filter.
4. Click the Source field and choose your Family product metafield.
5. Rename the filter if you like, then click 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 24 to 48 hours for Shopify to index it. To hurry it along, make a small edit to the product and save.

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. So custom.family and custom.seasons both work as filters.

If your products spell a family two ways ("Woody" and "Woods"), use Create group in the filter's values to show them as one, or better, fix the spelling so the finder matches too.

Other good filters for a perfume shop: Seasons (custom.seasons), your Size and Concentration options, Availability and Price. The same app sets the complementary products for Product recommendations (chapter 4).

Links to a family

With the filter on, you can link straight to a family from a menu or a button. Add it to a collection's address: /collections/all?filter.p.m.custom.family=Woody. For two words, use %20 for the space. To give each family its own page and description, make a collection for each one instead, and use those in your Collections grid.