# Search and filters

Chapter 13 of the Ribbon user guide.

## Collection and search pages

The **Collection** section shows a banner (an optional kicker, the title, the description, the number of pieces and, with **Show collection image**, the collection's image beside them), a toolbar and a grid of editorial cards: four to a row on desktop, three on tablets and two on phones, never staggered. On desktop the toolbar stays under the header as shoppers scroll: a pill per filter, each opening a small panel of choices (**size filters as size pills**, color filters as swatches with names, others as checkboxes with counts, and price as From and To fields), then the result count and **Sort**. On phones the filters and sort move into a sheet that slides up behind one **Filter and sort** button, with "Show 24 pieces" to close it. Filtering updates the results without reloading the page, and works without JavaScript too.

Its settings: **Show breadcrumbs** (on), **Kicker** (empty), **Show collection image**, **Show description**, **Enable filtering** and **Enable sorting** (all on), **Show vendor** (off: prints the vendor above each card's title) and **Products per page** (12, 8 to 36).

The **Search** section has **Show breadcrumbs**, **Enable filtering**, **Enable sorting** and **Results per page** (12, 8 to 36). As shoppers type in the header's search panel, it suggests searches and shows matching products, collections, pages and articles, with a link to the full results.

## Set up filters with Search & Discovery

Filters come from Shopify's free **Search & Discovery** app. Install it from the Shopify App Store, open it, go to **Filters › Add filter**, choose the source and save. New filters can take a little while to appear while Shopify indexes your products. Ribbon draws two kinds its own way:

| Filter | Source in Search & Discovery | How Ribbon shows it |
| --- | --- | --- |
| Size | The variant option **Size** (or any option named in **Theme settings › Sizing and fit › Size option names**) | Size pills. The filter's label must match a name in Size option names. |
| Color | The variant option **Color** or **Colour**, with swatches set on the option values in admin | Round swatches with their names |

Every other filter shows as a list of checkboxes with counts. Good ones for a boutique: **Size**, **Color**, **Availability**, **Price**, **Product type** (Dresses, Knitwear, Accessories) and metafields such as **Fit**. A filter you add appears on every collection and on search results; values with no products in the current results are hidden or disabled.

The same app sets the **complementary products** for Wear it with and the Product recommendations section (chapter 10).