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

The whole page is built from four blocks under the section's Blocks list — Collection image, Collection title, Collection description and Products. Drag them into the order you want and remove any you don't need. Blocks above Products form the page header; anything you place below Products runs under the results, full width beneath the filter sidebar, with a rule above it. The three content blocks each have their own alignment, left, centred or right, with a separate value for desktop and mobile, so a centred title on a phone can still sit left on a wide screen. A page with no blocks at all shows image, title, description and then the products, which is what stores installed before this feature existed already have, so nothing changes until you touch it.

• Collection image — the image set against the collection in your Shopify admin. A collection with no image shows nothing here, so the block costs nothing on the collections you haven't given one to (the editor tells you so). A Width slider runs from 30% to full width, and the alignment places a narrower image on the left, centre or right.
• Collection title — carries the heading tag (H1–H6). 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.
• Collection description — the rich text written against the collection in admin, so it stays with the collection. Its place on the page is simply where you drag it: under the title is the usual spot, and dragging it below the Products block moves it under the grid and pagination. That second arrangement exists for a specific job: long, keyword-heavy category copy that earns its place for search but pushes the products themselves down the page. A collection with an empty description renders nothing wherever the block sits — no stray divider, no empty gap. The description keeps its comfortable reading width whichever way it is aligned, so centred means genuinely centred rather than centred text sitting in a left-hand column.
• Products — the toolbar, filters, product grid and pagination as one block, so the other three can sit above or below it. If it is removed the products still show, after whatever blocks remain: a collection page is never left without its products.

Breadcrumbs sit above all of this and are on by default, with matching structured data. The section itself keeps a fixed, even spacing above and below; there are no padding sliders on this page.

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 the size exists but is out of stock.
• 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 → Product cards → Add to cart on 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 — nothing to pick, so no dropdown and no rows of its own. On a grid where other products do have rows it still reserves them blank and takes the same price-then-button block, so a water bottle sitting beside a jacket lands its price and its Add button on exactly the same lines. A grid where nothing has options keeps the older single line.
• Several variants — the card's option rows are the picker. Colourways as the swatch row, sizes as the size run, and any other option (a material, a fit) as a compact dropdown on a row of its own. Tap a colour, tap a size, and the line under them is just the price and Add to cart. The chosen size fills solid, the size run strikes through what is sold out in the chosen colour (rather than across the whole product, which is what it shows on cards without the row), the price follows the choice, and a combination that has gone disables the button and labels it Sold out. Without JavaScript the card offers a Choose options link to the product page instead of the Add button.
• Too many to fit on the line — a colour row with more colourways than your swatch limit (Theme settings → Product cards), or a size run longer than eight sizes, shows as a dropdown of that option instead of the row. Phones are judged separately: more than five of either is a dropdown on a phone while the desktop grid keeps the swatches or sizes. Nothing changes after the page has painted; both are rendered and the screen size decides which you see.
• Rows line up across the grid — every card on the page carries the same set of rows, left blank where a product lacks that option, so a product with no colourways sits its sizes on the same line as its neighbours and the price and Add line is at one height on every card. That includes the cards that have nothing to pick at all: a single-variant product and a sold-out one reserve the rows too, rather than dropping out of the alignment the rows exist to create.
• Sold out — a disabled Sold out button, no dropdown.
• Your size — once a shopper has saved their measurements (the header's My size button, the Find your fit section, or a Fit finder), every card whose product carries a fit guide works out their size from it and says so in a line under the size run: Your size, M, or Your size is sold out when that size is struck through. Told on the grid, before the click. It selects the size too: on a card with an Add button the size run switches to their size, so price, availability and what Add puts in the cart all follow, exactly as a tap on it would; on a card without one the image and title open the product on that size. A size the shopper has already tapped on the card is left alone, and a size that is sold out is marked but not selected. Forget, or the hour running out, puts every card back to the variant it started with. The line is reserved on every card while something is saved, so the grid stays level; with nothing saved it takes no space at all. A shopper a little beyond an end of the size run is told Nearest size, XL, and XL is selected all the same. A guide that does not reach the shopper's measurements at all says so in your own words — Not in your size range by default, in the same quiet grey as sold out, reworded under Theme settings → Fit finder — and the card stays on the variant it was served with, because the nearest size would be a guess and a guess should never reach the cart from a grid.

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, or sold out — there is nothing to put on the first line, so price and button share one line exactly as they do on desktop.

On a card in a grid with option rows — collection, search, featured collection, product recommendations, recently viewed and the 404 page alike — the block under the rows is always the same at every width: the price on its own line, then a full-width Add to cart. That is what keeps a two-, four- and five-column grid, the homepage and the product page's recommendation rows reading identically.

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.