Search and filters

Predictive search. The header's search opens a field with your "Search suggestions" chips (Theme settings › Search). As shoppers type, results show products (with their formula line and price), collections, pages and articles, then "See all results". Turn it off with Header › "Show search".

Search page. Results with filters and sorting: "Enable filtering", "Enable sorting" and "Results per page" (8 to 36, default 12).

Collection filters. Filters come from Shopify's free Search & Discovery app: install it and add filters under Filters. Derma shows them as a sticky sidebar on large screens and a "Filter and sort" sheet on phones, with the active filters as removable chips above the products. Filtering works without JavaScript too. Useful filters for a Derma store:

• Availability, Price, Product type and Vendor.
• The four derma metafield filters: Skin type, Concern, Key ingredient and Strength (chapter 7, Step 4).
• A Shade or Color option filter with swatches for cosmetics.

Turn filters and sorting on or off per template in the Collection section ("Enable filtering", "Enable sorting"). The "Show skin quiz prompt" setting adds "Not sure what suits you? Take the skin quiz" above the products, or "Filter for oily skin" for a shopper with a saved profile.