Collection Page

The collection page is where most shoppers decide what to look at, so it gets the same treatment as the product page: a configurable header, a grid you control per device, quick add straight from the card, and three ways to move through a long collection. Filtering has a chapter of its own.

The collection header

• Collection image — on by default. The image set against the collection in your Shopify admin renders full width above the title. A collection with no image simply shows no banner, so switching this on costs nothing on the collections you haven't given one to. Turn it off if you'd rather your collection pages always open on the title and products, even where an image exists.
• Collection description — on by default, rendered as rich text. Written in admin, not the theme, so it stays with the collection.
• Description position — Above the results (the default) puts the description under the title, where most stores want it. Below the results moves it under the grid and pagination, running full width beneath the filter sidebar as well as the products. That second option exists for a specific job: long, keyword-heavy category copy that earns its place for search but pushes the products themselves down the page. Below the results you keep the copy without making every shopper scroll past it. The setting only appears when the description is switched on, and a collection with an empty description still renders nothing in either position — no stray divider, no empty gap.
• Heading alignment — left, centred or right, with a separate value for desktop and mobile so a centred title on a phone can still be left-aligned on a wide screen. It moves the collection title and the description together, and the description keeps its comfortable reading width rather than stretching across the page — centred means genuinely centred, not centred text sitting in a left-hand column. The alignment follows the description wherever you have put it, above or below the results.
• Heading tag (H1–H6) — the collection title is an H1 by default, which is almost always right. As everywhere in Peregrine the tag is semantic only, so changing it never changes the size. See SEO Features.

Breadcrumbs sit above all of this and are on by default, with matching structured data.

The toolbar

A slim row between the header and the grid, holding up to three things — each independently switchable, and the whole row disappearing if you turn them all off:

• Product count — "24 products" for the collection, or the filtered count when filters are applied.
• Sort by — Shopify's own sort list (Featured, Best selling, Alphabetical, Price, Date). The options come from the platform, so you manage the manual "Featured" order by dragging products in the collection in admin.
• Filters — the horizontal bar layout, or the Filter button for the drawer layout, appears here. See Collection Filters.

The product grid

Cards carry the product title, price with sale-aware compare-at pricing and unit pricing where it applies, and any badges. Card style — background, border thickness and colour, drop shadow — works exactly as it does on the homepage grids; see Blocks & Card Styles.

Quick add

Quick add lets a shopper get a product into the cart from the grid without opening the product page. Under Quick add in the Collection section, four choices — off by default, because the right answer genuinely depends on what you sell:

Where "choose options" leads

For the button and chip styles, a Choose options setting decides what happens when the product genuinely needs a choice: open a popup (default) or go to the product page. Sending shoppers to the product page is the conservative choice and costs a page load; the popup keeps them in the grid. The quick shop icon always opens the panel — that's what it's for.

The Icon corner setting (quick shop icon only) puts the icon in any of the four corners of the image, so it can avoid whichever corner your badges use.

How it behaves per product

The pop-up opens on a variant already chosen — the same one the product page would open on: the first available one, not simply the first, so it never opens reading "Sold out" while a buyable size sits beside it. The price is filled in and Add to cart is live straight away, and the shopper only touches the options if they want something different. (Where nothing is in stock it falls back to the first variant, exactly as the product page does.)

• One variant — adds straight to the cart, no panel. The control confirms and returns to normal.
• One option with up to ten values (a size run, say) — the chip style shows every value inline, with sold-out values greyed out rather than removed, so the shopper can see that the size exists and is gone.
• Anything more complex — colour and size, or a long option list — follows your Choose options setting. There's no attempt to squeeze a two-dimensional variant matrix onto a card.
• Sold out — the button style shows a disabled "Sold out"; the chip style shows nothing rather than an unusable strip.

What happens after the add

Quick add always ends at the cart. The pop-up closes the moment the add succeeds and the cart takes over: the drawer slides out if you're running the slide-out cart, and in page mode the shopper goes to the cart page. This applies to the direct one-variant adds and the size chips too, not just the pop-up.

Quick add isn't only a collection-page feature — the same controls, settings and behaviour apply wherever product cards appear with it switched on: the Featured collection section on your homepage, and the recommendation sections at the foot of a product page.

It's the one place the cart's After adding to cart setting doesn't apply — that setting governs product-page adds. A pop-up that closes leaving the shopper on the same grid is indistinguishable from an add that failed, so quick add always shows the result.

Variant picker and Add to cart on the price row

A second, quieter route to the cart, and a different idea to quick add. Switch it on and every card grows one extra line beneath the title: the price, a variant dropdown, and an Add to cart button, all on the same row and all always visible. Nothing opens, nothing overlays the image — the shopper picks a size and adds it without the card ever changing shape.

Where to find it: Theme settings → Add to cart on product cards. Not in the Collection section — it's one decision for your whole store, so it lives with Filtering and Badges rather than being set page by page. Three switches:

How the button looks

Not here — in Theme settings → Add to cart buttons. Style, colour, text colour and border are set once there and apply to these buttons and your product page's Add to cart together, so the two can't drift apart. Hover comes from Buttons → Hover, along with every other button in the theme.

This group decides only where the row appears. The confirmation and error states follow whichever style you picked — an outlined button recolours its border and label, a filled one repaints its fill.

How it behaves per product

• One variant — no dropdown, and the Add button takes the whole line rather than leaving a short stub beside an empty space.
• Several variants — one dropdown listing full variant names ("Blue / Small"), not one dropdown per option. Sold-out values stay in the list, marked and unselectable, so a shopper can see the size exists and has gone.
• More variants than your limit — the row shows Choose options, linking to the product page. The Variant limit setting (default 12) is where you draw that line. A dropdown of forty variants is not a picker, it's a wall, and the product page does that job properly.
• Sold out — a disabled Sold out button, no dropdown.

On a phone

Below roughly 640px — where the grid drops to two columns and a card is around 170px wide — the row splits deliberately rather than wrapping wherever it happens to run out of space:

• The variant dropdown takes a line of its own, full width, so long variant names stay readable.
• The price and Add to cart sit together beneath it, with the button taking whatever room the price leaves.

On a product with no dropdown — one variant, sold out, or over your variant limit — there is nothing to put on the first line, so price and button share one line exactly as they do on desktop.

Using it alongside quick add

The two stack, with one exception, because most of the quick-add styles live somewhere else on the card:

Because Quick add is a section setting and this is a theme setting, the two can't be shown together in one panel — so if the price row isn't appearing on a page where you've switched it on, check that section's Quick add isn't set to the button style.

What happens after the add

Unlike quick add, this one honours your cart's After adding to cart setting. The reason is the difference between the two controls: a pop-up that closes leaving the shopper on the same grid looks exactly like a failure, so quick add always shows the cart. Here nothing closed — the button itself confirms in place and the header count ticks up — so "Stay on the page" is a real choice and is respected. With the slide-out cart the drawer opens as it does everywhere else.

If an add fails, Shopify's own message (a stock limit, say) appears on the button for a moment and then it returns to normal.

Loading more products

The Grid loading setting controls how shoppers move through a long collection. It's independent of filtering — it applies whether or not you use filters:

Whatever the mode, search engines always see the full numbered pagination, changing a filter always restarts from the first page of the new results, and newly loaded products are announced to screen readers.

Colours and spacing

Under the section's Colors header it takes its own Background, plus separate heading, card title and card text colours. Leave any of them blank and it follows your theme palette — which is what you want almost always, and is why they're blank out of the box. Vertical and horizontal padding are set separately for desktop and mobile.

When a collection is empty

Two different empty states, because they're two different problems. A collection with no products at all says so plainly. A collection whose filters have excluded everything says that instead, and keeps the filters on screen with Clear all in reach — a shopper who filters themselves into nothing needs a way back, not an apology.

Structured data

Every collection page renders CollectionPage and ItemList JSON-LD server-side, plus BreadcrumbList from the breadcrumbs. Nothing to configure, and it can be switched off with the rest of the theme's structured data if an SEO app is providing its own — see App Integration.

Apps on the collection page

App blocks slot in between the toolbar and the product grid, and every card exposes data-product-id and data-product-handle for app scripts. See App Integration.

The collections list page

Separately from the individual collection pages, your store has a page listing every collection, at /collections. It's worth linking from your main menu — it's the natural "shop by category" landing page, and it's a page search engines like.

Edit it in the theme editor by switching the page selector to Collections list. Settings:

The collection name's size and alignment come from Theme settings → Typography → Collection cards, shared with the homepage's Collection list so the two never disagree.

You don't need to set a collection image for every collection. Where one isn't set, the card falls back to the first product's photo, so the grid looks complete from the day you install rather than showing blank tiles for the collections you haven't got round to. Set a collection image in Shopify admin when you want a designed banner instead.

If you have more collections than fit on one page, the extras are on numbered pages — they are real links, so search engines follow them and shoppers can bookmark them.