# Search and filters

Chapter 13 of the Scruff user guide.

## 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:

1. For Species, create the `custom.species` 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 **Size** option. Keep the **Filter label** "Size" and click **Save**.
5. Click **Add filter** again, choose your **Species** product metafield as the **Source**, label it "Species" (or "Dog or cat"), and **Save**.
6. 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).