# Search and filters

Chapter 13 of the Littles user guide.

## Collection and search pages

The **Collection** section shows a centered banner (a doodle, the title, the description, the number of pieces and, with **Show collection image**, the collection's image), the age chips (chapter 8), a toolbar and a grid of pillow cards. The toolbar has a chip per filter (each opens a small panel of choices, with color swatches where the filter's values have them and From and To fields for price), the result count and **Sort**. On phones the filters and sort move into a sheet that slides up from the bottom behind one **Filter and sort** button, with "Show 24 products" to close it. Filtering updates the results without reloading the page, and works without JavaScript too.

Its settings: **Doodle** (Cloud), **Show breadcrumbs**, **Show collection image**, **Show description**, **Enable filtering** and **Enable sorting** (all on), **Show vendor** (off: prints the vendor above each card's title), **Products per page** (12, 8 to 36), **Columns on desktop** (4; 3 or 4) and **Columns on phones** (2; 1 or 2).

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 field, a panel suggests searches and shows matching products (with their age and price), collections, pages and articles, and a "Search for…" 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. Littles draws one filter its own way:

| Filter | Source in Search & Discovery | How Littles shows it |
| --- | --- | --- |
| Age range | Product metafield **Age range** (`custom.age_range`), named in Theme settings › Shop by age › **Age filter metafield** | The **age chips** above the toolbar, ordered by age, each with its count (chapter 8) |

Every other filter shows as a chip in the toolbar. Good ones for a kids' shop: **Size** and **Color** (variant options), **Availability**, **Price**, **Product type**, and metafields such as **Certifications** or **Skill**. A filter you add appears on every collection and on search results; values with no products in the current results are hidden or disabled.