CaffenzaDocs

Collection page and filters

Product grid, filters, sorting and promo tiles.

Collection with sidebar filters.
Collection with sidebar filters.

Turn on filters

  1. Install the free Shopify Search & Discovery app.
  2. In the app, open Filters and add filters such as Availability, Price, Product type and your metafields (for example Origin or Roast level).
  3. In the theme editor, open a collection and turn on Enable filtering.
Note

Filters do not show on collections with more than 5,000 products.

Promo tiles

Add a Promo tile block to place an image or message between products, for example “Try our subscription”. Choose its position in the grid and whether it spans one or two columns.

Screenshots

Filter bar layout.
Filter bar layout.
Filters on a phone.
Filters on a phone.
A promo tile.
A promo tile.
Active filters.
Active filters.
Filters in Search & Discovery.
Filters in Search & Discovery.
Collection settings.
Collection settings.

Settings

SettingOptionsWhat it does
Section appearance
Color schemeColor scheme
Settings
Heading sizeSmall · Medium · Large · Extra large
Heading alignmentLeft · Center · Right
Show imageOn / OffShows the image set on the collection in Shopify admin as a wide banner above the title. Collections without an image show just the title.
Show descriptionOn / Off
Card styleBrew specs · Pairs with"Brew specs" shows the spec cells set in Theme settings. "Pairs with" shows the companion product.
Products per page8–48Editorial images repeat on every page.
Columns on desktop2–5The grid fits fewer columns where it has less room: at most 3 on tablets, and beside the filter sidebar on smaller laptops. Phones use the mobile setting below.
Columns on mobile1 · 2
PaginationNumbered · Load more buttonNumbered pages suit large collections and are easier to link to. A load more button suits browsing.
Filtering and sorting
Enable filteringOn / OffFilters come from the Shopify Search and Discovery app. Collections with more than 5,000 products show no filters. The price filter shows only in your store's default currency.
Desktop filter layoutSidebar · Filter bar · DrawerOn phones, filters always open in a drawer.
Filter groups open by default0–10Applies to the sidebar and drawer layouts. A group with an active filter always opens.
Values shown before "Show more"5–20
Show product countsOn / Off
Show active filtersOn / Off
Show the filter name in active filtersOn / Off
Enable sortingOn / Off
Keep filters and sorting in viewOn / OffThe sidebar or filter bar stays on screen while shoppers scroll. On phones, the filter and sort row does.

Blocks

Click Add block under the section in the sidebar. Drag blocks to change their order.

Promo tile up to 4

SettingOptionsWhat it does
Position in grid1–241 puts the tile first. Tiles show on the first page only, among its products; a position past the last product puts the tile at the end.
Columns to span1 · 2On phones a tile never spans more columns than the grid has. A two-column tile that lands in the last column moves down to the next row.
Color schemeColor scheme
ImageImage
HeadingText (bold, italic, links)Italicized words switch to the Accent font from Theme settings → Typography. They stay italic and keep the color of the text around them.
Heading sizeSmall · Medium · Large · Extra large
Heading levelH1 · H2 · H3 · H4 · H5 · H6Adjust for page structure — one H1 per page. Size is controlled separately.
TextRich text
Text sizeSmall · Medium · Large
Button labelText
LinkLink
Button stylePrimary · Secondary · Ghost · Link
Button sizeSmall · Medium · Large
Open in a new tabOn / Off

This section also accepts Custom Liquid blocks and app blocks. It also has the shared Animate on scroll and Section spacing settings.