Search and filters
Chapter 13 of the Ribbon user guide.
Collection and search pages
The Collection section shows a banner (an optional kicker, the title, the description, the number of pieces and, with Show collection image, the collection's image beside them), a toolbar and a grid of editorial cards: four to a row on desktop, three on tablets and two on phones, never staggered. On desktop the toolbar stays under the header as shoppers scroll: a pill per filter, each opening a small panel of choices (size filters as size pills, color filters as swatches with names, others as checkboxes with counts, and price as From and To fields), then the result count and Sort. On phones the filters and sort move into a sheet that slides up behind one Filter and sort button, with "Show 24 pieces" to close it. Filtering updates the results without reloading the page, and works without JavaScript too.
Its settings: Show breadcrumbs (on), Kicker (empty), Show collection image, Show description, Enable filtering and Enable sorting (all on), Show vendor (off: prints the vendor above each card's title) and Products per page (12, 8 to 36).
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 panel, it suggests searches and shows matching products, collections, pages and articles, with a 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. New filters can take a little while to appear while Shopify indexes your products. Ribbon draws two kinds its own way:
| Filter | Source in Search & Discovery | How Ribbon shows it |
|---|---|---|
| Size | The variant option Size (or any option named in Theme settings › Sizing and fit › Size option names) | Size pills. The filter's label must match a name in Size option names. |
| Color | The variant option Color or Colour, with swatches set on the option values in admin | Round swatches with their names |
Every other filter shows as a list of checkboxes with counts. Good ones for a boutique: Size, Color, Availability, Price, Product type (Dresses, Knitwear, Accessories) and metafields such as Fit. A filter you add appears on every collection and on search results; values with no products in the current results are hidden or disabled.
The same app sets the complementary products for Wear it with and the Product recommendations section (chapter 10).