# Search and filters

Chapter 13 of the Tress 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 by**, and a grid of capsule cards. 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. Active filters show as small tags with **Clear all**. Filtering updates the results without reloading the page, and works without JavaScript too.

Tress draws two filters its own way:

* **Texture**: a filter whose name is in **Texture option names** shows each texture as a small capsule with its picture (its Shopify swatch, a line in **Texture images**, or the drawn texture) and its name and count.
* **Length**: a filter whose name is in **Length option names** shows a two-column list of checkboxes in both units, "18 in · 46 cm".

Every other filter is a list of checkboxes with counts; price is From and To fields with **Apply**. Values with no products in the current results are greyed out.

The **Collection** section's settings: **Show breadcrumbs** (on), **Show collection image** (on), **Show description** (on), **Enable filtering** (on; set up filters in Shopify Search & Discovery), **Enable sorting** (on), **Show vendor** (off) and **Products per page** (12, 8 to 36).

The **Search** section has **Show breadcrumbs**, **Enable filtering** and **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. With no results, it suggests "Try a shorter word, like a texture or a length."

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

**Texture and Length filters.** Add a filter from your **Texture** product option and one from your **Length** option. Tress recognises them by the filter's name, so keep each filter's label the same as the option name (Texture, Length), or add the label you use to **Texture option names** or **Length option names** in Theme settings › Hair, lashes and nails. A filter you rename to "Hair texture" without adding that name shows as an ordinary checkbox list. If your texture lives in the `custom.texture` metafield rather than an option, add the filter from that metafield instead (Search & Discovery can filter by a single line text product metafield) and label it Texture.

Other good filters for a hair, lash or nail store: **Lace**, **Density** and **Cap size** (options), **Shape** and **Nail length** for press-ons, **Product type** (Bundles, Closures, Wigs, Lashes), **Price** and **Availability**. A filter you add appears on every collection and on search results.

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