Collection page

The collection page shows a collection's products in a grid, with filters and sorting. Open the Collections template in the theme editor to set it up.

Name in the editor

Collection (FR: Collection)

Where to add it

Collections template only (the template's main section)

Settings

Collection header

The header shows the collection's title, description, and image (set in ProductsCollections).

• The image used is the collection image only: unlike collection lists, the header never uses a product photo. Without an image, the header shows the title on its own.
• The text sits on the image, in the colors of the Header color scheme; an overlay mixed from that scheme's background keeps the text readable.
• When hidden with Show collection header, the title is still announced to screen readers.

Grid

The grid has two to five columns on desktop (three at most on tablets) and one or two on phones. The spacing between columns follows the product grid gutter. The product count appears above the grid and updates as the shopper filters.

Filters and sorting

Filters (price, availability, color, size, type, brand…) are created in the Search & Discovery app, not in the theme. See the Collection filters guide to set them up.

Filter layout offers three options:

Layout	Desktop	Phone
Drawer (default)	A "Filter and sort" link opens a side drawer	Drawer
Toolbar	Filters are lined up above the grid as dropdown menus (from 750px)	Drawer
Sidebar	Filters take up a column to the left of the grid (from 990px)	Drawer

• In the drawer, the shopper checks their filters and then confirms with the "View N products" button, whose count updates with each choice. "Clear all" removes all filters.
• In the toolbar and sidebar, each choice applies immediately, without reloading the page. The page address is updated, so the shopper can share a filtered selection and use the Back button.
• Active filters appear as tags that can be removed one by one.
• A value that would return no results is disabled.
• Color filters show as swatches when Search & Discovery provides them.

Sorting uses Shopify's standard options (featured, best selling, alphabetical, price, date).

Without JavaScript, filters are still usable with an Apply button.

Pagination

Type	Behavior
Page numbers (default)	Arrows and page numbers below the grid.
"Load more" button	A "Load more products" button adds the next page below the grid.
Infinite scroll	The next page loads automatically as the shopper nears the end of the grid.

"Load more" and infinite scroll fall back to page numbers if JavaScript is unavailable.

Product cards

All of the theme's grids (collection, search, featured collection, recommendations) share the same Product card settings, which you set separately in each section.

Layout

• Standard: the name and price stacked below the image.
• Compact: the name and price on the same line, with the price aligned right (when the card is wide enough).
• Full bleed: the name, price, and swatches sit at the bottom of the photo, on a gradient mixed from the card's background.

Image shape

Portrait, square, landscape, or Adapt to image so each card takes the shape of its own photo. For a regular grid, choose a fixed shape and photos framed the same way. The Adapt to image option isn't available in search, where products, articles, and pages are mixed.

What a card shows

• Badges: "Sold out" when no variant is available, otherwise "Sale" when at least one variant has a compare-at price. There's no "New" badge.
• Color swatches: up to three swatches from the first option that has swatches, then "+N"; hovering a swatch shows the variant's photo, and clicking goes to that variant.
• Second image on hover: the product's second photo replaces the first on hover, on devices with a mouse.
• Vendor: the vendor (brand) name, above the product name.
• Price: "From …" when variants have different prices; a crossed-out price when on sale.

Quick add

With Show quick add, a "+" button appears on the card:

• a product with a single variant is added straight to the cart;
• a product with options opens a Quick add drawer with the photo, price, variant picker, selling plan, buy buttons, and a "View full details" link.

Quick add isn't available for sold-out products. Gift cards always open the drawer. The contents of the quick add drawer can't be customized in the editor.

Empty collection

A collection with no products shows "There are no products in this collection yet.", without filters. A filter combination with no results shows "No products match the filters you chose.".