# Search and filters

Chapter 14 of the Inkwell user guide.

## Collection and search pages

The **Collection** section shows a banner (the title, the description and, with **Show collection image**, the collection's image), a toolbar with the number of products and **Sort**, and a grid of product cards: four to a row on desktop, three on tablets and two on phones. With filters set up, they sit in a column beside the products from 990px wide, and in a drawer behind a **Filter** button on smaller screens: each filter a list of checkboxes with counts, and price as From and To fields with **Apply**. Active filters show as small tags with **Clear all**. Filtering updates the results without reloading the page, and works without JavaScript too.

Its settings: **Show breadcrumbs** (on), **Show collection image** (on), **Show description** (on), **Enable filtering** (on), **Enable sorting** (on), **Show vendor** (off) and **Products per page** (12, 8 to 36).

The **Search** section has **Show breadcrumbs**, **Enable filtering**, **Enable sorting** (all on) and **Results per page** (12, 8 to 36). As shoppers type in the header's search, it 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.

Good filters for a digital shop: **Product type** (Planners, Printables, Templates), **Price**, the variant option **License** or **Paper size**, and a **Works with** filter from the `custom.works_with` metafield (Search & Discovery can filter by a product metafield of type single line text). A filter you add appears on every collection and on search results; values with no products in the current results are hidden or disabled. Leave **Availability** out if you sell only downloads: they're always in stock.

The same app sets the **complementary products** behind "Pairs well with" when its **Recommendation type** is Complementary products (chapter 4).