Collection page

The collection page shows a collection's title and its products in a grid, with filters and sorting. Open the Collections template in the theme editor to set it up. The template holds two sections: Collection header, which opens the page with the collection's title, and Collection, the product grid below it.

Collection header

Name in the editor

Collection header (FR: En-tête de collection)

Where to add it

Collections template only, above the Collection section

Accepted blocks

Collection titleCollection descriptionTextRich textButton

The header opens the page with the collection's title and description, over the collection image when there is one. Its content is made of blocks:

• Collection title: the collection's name, as the page's main heading (h1).
• Collection description: the description set on the collection in ProductsCollections. Nothing shows for a collection without one.
• Text, Rich text and Button: your own words and links, the same on every collection that uses the template.

The section comes with the title and the description. The Collection title and Collection description blocks have no settings: they show the collection's own title and description.

Image, height and overlay

With Show collection image, the header shows the image set on the collection in ProductsCollections across the width of the page, with the words at its foot. The header only uses the collection image: unlike collection lists, it never borrows a product photo. A collection without an image shows its words alone, as it does when Show collection image is off.

Over an image:

• Height sets the height of the band: Small, Medium or Large.
• Image overlay (0 to 90%, 55% by default) sets the strength of a veil behind the words. The veil is at that strength from the bottom of the band to the top of the words, then fades above them, so the rest of the image shows as it is. It follows the words, so it covers a description of any length. At 0%, there's no veil: check the header on a pale image before leaving it there.
• Color scheme over the image sets the color of the words, and the veil is mixed from that scheme's background. The description takes the scheme's full text color over an image, rather than its muted one.

Color scheme applies when the header shows no image.

Updating from 1.0.0

In Faubourg 1.0.0, the header was part of the Collection section. An update keeps your own Collections template, which has no Collection header section: after the update, your collection pages show no title above the grid until you add it.

Collection section

Name in the editor

Collection (FR: Collection)

Where to add it

Collections template only (the template's main section)

Accepted blocks

Promotion

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.

Promotions in the grid

Add a Promotion block to the Collection section to set a promotion among the products: a new campaign, a service, an editorial page. The section takes up to three.

• Position among the products (1 to 24) sets the product whose place the promotion takes; the products move along. A position past the last product of the page puts the promotion after them.
• Width makes it one or two products wide.
• The promotion takes the frame of the cards (Image shape; with Adapt to image, portrait). Without an image, it shows a placeholder illustration, including on your online store. With Full bleed cards, its words sit over the picture like the cards' names.
• It shows on the first page only, never in an empty collection, and isn't counted in the number of products. It stays in place as the shopper filters and sorts, and works without JavaScript.

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).

The "Filter and sort" link is there as soon as the page appears, so nothing on the page moves when the drawer is ready. Without JavaScript, filters are still usable: the link opens the same panel, and an Apply button confirms the choice. In the toolbar and sidebar, the filters show in the page 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.
• Rating: five stars filled to the product's score, the score, and the number of reviews, under the price. The rating comes from Shopify's product rating, which a reviews app fills; a product without one shows nothing. Unlike the settings above, which you set in each section, Show ratings on product cards is in Theme settings > Product and applies to every card in the store. It's on by default.
• A product whose media are only videos shows the preview image of its first video.

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 product's media, price, variant picker, selling plan, buy buttons, and a "View full details" link.

The tax and shipping note, the quantity selector, and the dynamic checkout buttons in the drawer follow Theme settings > Product, like the product page.

The drawer shows all of the product's media, videos included, one at a time, in a carousel with arrows and a progress bar. It moves to the variant's image when the shopper chooses a variant. There's no zoom in the drawer.

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.". A page number past the last page (from an old link, for example) shows "There is nothing on this page." and a "Back to the first page" button.