# Search and filters

Chapter 13 of the Rep user guide.

## Collection and search pages

The **Collection** section shows the title, the description and, with **Show collection image**, the collection's image. Then come the **activity pills** from your **Activity list** (chapter 8), and 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 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 activity pills, 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.

Rep draws each kind of filter its own way: **Activity** as chips with pictograms, **Support level** as chips with the three-bar meter, your size option as size pills, your colour option as colour dots with their names, and price as two fields. Other filters are tick boxes.

## Filters need the Search & Discovery app

Filters come from Shopify's free **Search & Discovery** app. Rep 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.**

Four filters suit an activewear shop best:

* **Activity**, from the `custom.activities` metafield (chapter 7). The activity tiles and pills link to it.
* **Support level**, from the `custom.support_level` metafield. The support chips and cards link to it.
* **Size**, from your size option. The fit finder promo's **Shop in size M** links to it.
* **Colour**, from your colour option.

**What the theme shows without them:**

| Filter missing | What happens |
| --- | --- |
| Activity | The activity tiles, the activity pills above collections and the menu drawer's pills open the whole collection, not one activity. Nothing breaks: Shopify quietly ignores a filter it doesn't have. Give each tile its own **Link** as a fallback (chapter 8). |
| Support level | The support chips and support cards open the whole collection (or the one you chose for them). Give the cards their own **Link**, and choose a sports bra collection for the chips (chapter 8). |
| Size | **Shop in size M** opens the whole collection. The fit finder itself works without it. |
| Colour | No colour dots in the sidebar. Swatches on cards and product pages don't need it. |

To add the filters:

1. Create the `custom.activities` and `custom.support_level` definitions and fill them 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. Choose your **Activities** product metafield as the **Source**, label it "Activity" and click **Save**.
5. Click **Add filter** again, choose your **Support level** product metafield, label it "Support level" (or "Support") and **Save**.
6. Click **Add filter** again, choose your **Size** option and **Save**.
7. 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 links use the metafield's key and the option's name, not the filter label, so you can label the filters however you like.

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.activities` and `custom.support_level` work as filters.

The filter lists each spelling separately, so if some products say "Yoga" and others "yoga", it offers both: pick one spelling. Other good filters for an activewear shop: **Availability**, **Price**, **Product type**, and `custom.fit_type` or `custom.compression` if your shoppers ask for them. The same app sets the **complementary products** for Product recommendations (chapter 4).

## Links to an activity, a support level or a size

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

* `/collections/all?filter.p.m.custom.activities=Pilates`
* `/collections/sports-bras?filter.p.m.custom.support_level=High`
* `/collections/leggings?filter.v.option.size=M`