Collections, search and filters
Collection page
The collection template holds the Collection section, then a Formula comparison and a Newsletter section that are hidden by default (turn them on with the eye icon in the theme editor). Product cards follow Theme settings > Product cards.
What shoppers see, top to bottom: breadcrumbs, the collection title (with the collection’s color dot), its description, the filter bar, any active filters as removable chips with “Clear all”, then the product grid.
Collection section settings
| Setting | What it does |
|---|---|
| Show the collection color dot | A dot before the title in the collection’s calyx.color (a Color metafield on Collections) |
| Show collection description | The description from Products > Collections |
| Products per page | 8 to 48, default 24, so a small catalog shows on one page with no paging at all |
| Columns on desktop | 2, 3 or 4 (default 3, which leaves room for the formula line and both prices) |
| Columns on mobile | 1 or 2 |
| Enable filtering | The filter bar and the Filter and sort drawer |
| Filter shown as chips | The name of one filter whose values show as chips in the bar, like Goal or Time of day. Default “Product type”; Dosewell uses Product type when no filter has the name you enter |
| Enable sorting | The Sort by menu (in the bar on desktop, in the drawer on phones) |
| Enable compare | A Compare checkbox on every card; see Compare |
| Products compared at once | 2, 3 or 4 |
| Compare tray and dialog color scheme | Default Scheme 2 |
The section also takes app blocks, which show between the description and the filter bar.
The filter bar and drawer
- Chips. The values of the filter named in Filter shown as chips, with product counts. A chip adds or removes that filter value at once. Values with no products are struck through and cannot be chosen.
- Filter and sort opens a drawer with every filter: checkboxes with counts for list filters, swatches for filters shown as swatches, a checkbox for yes or no filters, and two fields for the price range. Sorting is at the top. The drawer’s footer has Clear all and Show N products.
- Filters apply as soon as a shopper changes them; the price fields wait until typing pauses. The browser’s Back and Forward buttons step through filter changes.
- The product count in the bar updates with every change, and screen readers announce it.
More products than one page
When a collection has more products than Products per page, a Load more button under the grid adds the next page. If a shopper opens page 2 or later from a link, a Show previous products link sits above the grid.
Empty states
A collection with no products shows “No products here yet.” with a link to all products. Filters that match nothing show “No products match these filters.” with the active filters and “Clear all filters”.
Compare
With Enable compare on, every card on the collection page has a Compare checkbox.
- A shopper checks two or more products (up to Products compared at once).
- A tray at the bottom of the screen shows the picks, “2 of 3 selected”, Compare and Clear.
- Compare opens a table of the picked products: goal, time of day, serving, key actives, price per serving and a shop button.
The picks last for the browser session. Browsers that block storage (some private windows and in-app browsers) do not show the checkboxes, so nothing breaks there. The dialog’s rows are fixed; your own rows (like Vegan) belong in a Formula comparison section, which can also compare the collection on the page: turn on the hidden Formula comparison section in the collection template and leave its Collection empty.
Collections list page
The /collections page lists your collections as tiles painted with each collection’s
calyx.color, holding its image, title, product count and description. The Collections list
section has Heading (default “All goals”), Sort collections (alphabetically, or by date;
it sorts the collections of each page of 12), Columns on desktop, Image shape and Show
collection descriptions.
Search page
The Search results section shows the search field, the result count, products as cards with the same filter bar and drawer as collections, then “Articles and pages”.
| Setting | What it does |
|---|---|
| Results per page | 8 to 48, default 24 |
| Columns on desktop | 2, 3 or 4 |
| Show articles and pages | The “Articles and pages” list under the products |
| Enable filtering | The filter bar and drawer, using Shopify’s search filters |
| Filter shown as chips | As on collections |
| Enable sorting | The Sort by menu |
With no results, the page shows “No results for …”, your main menu’s collection links as goal chips, and popular products.
Search suggestions in the header (Theme settings > Search) show suggested searches, products with their price and price per serving, collections, pages and articles as shoppers type.
Search and Discovery app
Shopify’s free Search and Discovery app is optional. Dosewell works without it, and it makes three parts of the theme more useful.
Filters
Without the app, Shopify shows a few default filters (on the Dosewell demo store: availability, price and product type), and the chip row uses Product type. With the app you choose which filters show and in what order:
- Install the app and open Filters.
- Choose Add filter. You can filter by availability, price, product type, vendor, tags, product options (like Size or Flavor) and product metafields.
- To let shoppers filter by time of day or goal, add the Time of day (
calyx.timing) or Goal (calyx.goal) metafield as a filter. The metafield needs a definition in Settings > Custom data, which you created in Set up Dosewell in 15 minutes. - Give the filter the label you want shoppers to see, like “Time of day”.
- Back in the theme editor, type that label into the Collection section’s Filter shown as chips (and the Search results section’s, if you like). The chips then show Morning, With food, Evening and Anytime.
Filters set to display as swatches in the app show as swatches in the Dosewell drawer.
Complementary products
Complementary products are the products that go well with another one. Dosewell shows them in the product page’s Pairs with block and in the cart’s “Pairs with your cart”. In the app, open Product recommendations, pick a product and add its complementary products.
Shopify only returns complementary products set in the app. Until you set them, Dosewell shows the Fallback products of the Pairs with block and the Products to suggest of Theme settings > Cart.
Related products
Shopify picks related products automatically from sales and product descriptions. The app lets you set them yourself under Product recommendations. Dosewell uses them in the Related products section and in a Formula comparison set to “This product and related products”. When Shopify has no related products, the Related products section shows your newest products.
Search
The app’s synonyms and boosts change which results Shopify returns for a search; Dosewell shows the results Shopify returns, so nothing in the theme needs to change.
