Search and filters — Hooray docs

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 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. Hooray shows whatever filters the app provides, on every collection and on search results. Without it, or with no filters added, there are no filters, and three of Hooray's links lose their filter:

Occasion tiles without their own link or collection open the whole base collection instead of that occasion (chapter 8).
Occasion chips on the product page open the whole collection.
Turning picker ages open the whole number balloon collection instead of that number.

In every case Shopify quietly ignores the filter in the address, so nothing breaks; shoppers simply see more than they asked for. Add the two filters below and all three work.

To add the Occasion and Number filters:

Create the custom.occasions and custom.number 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 Occasions product metafield. Change the Filter label to "Occasion" if you like, then click Save.
Click Add filter again, choose your Number product metafield as the Source, label it "Number" or "Age", 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.

The links use the metafields' keys, not the filter labels, so you can label the filters however you like: ?filter.p.m.custom.occasions=Birthday and ?filter.p.m.custom.number=30. If your metafields have other keys, change Occasion metafield and Number metafield in the sections to match (chapter 8).

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 custom.occasions and custom.number both work as filters. A list of integers doesn't, which is one reason custom.number holds a single number.

If your products spell an occasion two ways ("Baby shower" and "Babyshower"), fix the spelling: the tiles and chips link to one exact value.

Other good filters for a party shop: Availability, Price, Product type, and your options such as Color and Length. The same app sets the complementary products for Product recommendations (chapter 4).

Links to an occasion or an age

With the filters on, you can link straight to an occasion or an age from a menu, a button or a promo. Add the filter to a collection's address:

/collections/all?filter.p.m.custom.occasions=Baby%20shower (use %20 for a space)
/collections/number-balloons?filter.p.m.custom.number=21

To give an occasion its own page and description, make a collection for it instead, and choose it in the occasion tile.