Search and filters — Scruff 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 on the left. Under that they're a drawer, opened by the Filter button, with a "Show 29 products" button at the bottom. Above the grid, the toolbar has the number of products, Only what fits Mabel and Dogs / Cats / All (chapter 8), and Sort by. Active filters show as removable pills with Clear all. Filtering updates the results without reloading the page.

The Search page has the same filters 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. Scruff 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 filters suit a pet shop best:

Size, from your size option. Shop by size links to it.
Species, from the custom.species metafield (chapter 7): filters the whole collection by dog or cat, with the right counts and page numbers, which the theme's own Dogs / Cats / All switch can't do (it filters the current page only).
Colour, from your colour option.

Without a Size filter, the Shop by size tiles open all products. Each tile's default link is /collections/all?filter.v.option.size=M, and when the store has no Size filter, Shopify quietly ignores the filter in the address, so nothing breaks; shoppers simply see everything instead of size M. Add the Size filter and every tile works, or give each tile its own Link to a collection of that size.

To add the filters:

For Species, create the custom.species definition and fill it 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 Size option. Keep the Filter label "Size" and click Save.
Click Add filter again, choose your Species product metafield as the Source, label it "Species" (or "Dog or cat"), and Save.
Click Add filter again, choose your colour option (Colour or Color, whichever your products use), 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 tiles' links use the option's name, not the filter label, so you can label the filters however you like. The default link takes the first name in Size option names. If that name is more than one word (such as "Collar size"), open a collection, tick a size in the filter, copy the address from your browser and paste it into each tile's Link.

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.species works as a filter.

If your products spell a species two ways ("Dog" and "Dogs"), the theme treats them the same, but the Species filter lists both: pick one spelling.

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

Links to a size or a species

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

/collections/harnesses?filter.v.option.size=L
/collections/all?filter.p.m.custom.species=Cat
/collections/collars?fit=1 opens a collection with the theme's Only what fits switch already on (no app needed; chapter 8).