Collection

The product grid on your collection pages, with filtering, sorting, and an optional collection banner.

Last updated About 4 hours ago

The Collection section shows the products of whichever collection a visitor is viewing. To edit it, open the theme editor, switch to a collection template using the page selector at the top, and select Collection in the sidebar.

Set the grid

  • Default grid size — three or four columns on desktop; one or two on mobile.
  • Enable grid size interface — adds little controls above the grid so visitors can switch the column count themselves. The "default" sizes above are simply what they see first.

Enable filtering and sorting

Under Filter settings, turn on Enable filters to show the filter bar above the grid — clicking it opens the filtering panel where visitors narrow down by availability, price, and any other filters you've configured. Filter position puts the panel on the left or right.

Enable sorting adds the sort dropdown (price, alphabetical, newest, and so on).

⚠️ Important: Filters need a one-time setup in the free Shopify Search & Discovery app — that's where you choose which filters exist and how they're grouped. See Storefront filtering for the walkthrough.

Add a collection banner

The section supports a Collection banner block — a header area with the collection's image, title, description, and breadcrumbs, shown above the grid. Add the block and it picks up each collection's own content automatically.

Other settings

Header settings — an optional section header with heading, caption, icon, and button. Most stores skip this on collection pages since the collection banner plays that role.

Card settings — override the store-wide product card image ratios for this section only; everything else about cards comes from Theme settings > Product cards.

Color scheme / Padding / Content width — the shared settings every section has. See Padding settings and Width settings.