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.