Search and filters

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