Collection page and product grid

The Collection product grid is the main section of the collection template. It lays out a collection's products as a grid of cards and carries the filtering, sorting, and pagination controls. It is built into the template, so you edit it rather than add it from Add section. Every collection page in your store uses this template, so its settings apply to all of them.

Open it in the editor

In the theme editor, open the template selector at the top of the screen.
Choose Collections, then Default collection.
In the section list, select Collection product grid.

To preview a real collection while you work, use the same selector to pick a specific collection from your store.

Each grid cell is a block named Product card, built from its own child blocks: Image, Title, Price, Label, Rating, and Swatches. Select the Product card in the section's blocks to change what every card shows. See The product card below.

Grid

Products per page: how many products load at once, from 8 to 48. With Infinite scroll pagination this is the size of each batch as the shopper scrolls.
Card size: the width of each card, which sets how many fit per row. Choose Small, Normal, or Large. Smaller cards fit more per row; larger cards show fewer, bigger cards.
Pagination: how shoppers move through a long collection. Pages adds numbered page links at the bottom. Infinite scroll loads the next batch as the shopper reaches the end.

Filters and sort

This grid carries the collection's filtering and sorting controls (Enable filtering, Enable sorting, Expand filter groups by default, and Desktop filter layout). They have their own article: see Filtering and sorting.

Inline card

Show inline card: places a content card into the flow of products, on the first page only. Use it for a promotion or an editorial note without breaking the grid.
Position in grid: which grid cell the card takes, from 1 to 12. Default is 6, so the card fills the sixth cell and the products shift along behind it. If the first page holds fewer products than that, the card moves to the cell right after the last product. Available when Show inline card is on.

When Show inline card is on, a Card deck block appears in the section's blocks. Add or remove Sticky card children inside it to decide how many cards the deck holds. With one card the deck stands still; with more than one it cycles through them.

Rotate cards automatically: cycles through the deck on its own. On by default.
Change cards every: how long each card stays on screen, from 3 to 20 seconds. Available while Rotate cards automatically is on.
Pause on hover: holds the current card while the pointer is over it. Available while Rotate cards automatically is on.

Open a Sticky card block to set its Image, its Mobile image, and its Overlay strength. Its text and buttons are its own child blocks, so you build the content the same way as anywhere else in the theme. The deck follows the image ratio from your theme-level product card settings, so it lines up with the products around it.

Grid decoration

Show decoration in grid corner: places a drawing in the corner of the product grid, behind the cards. Off by default. Turning it on adds an Illustration block to the section, which you open to pick the drawing, its type, size, and color. The decoration is decorative only and is hidden from screen readers.

The product card

Each product is a Product card block, built from smaller blocks: Image, Title, Price, Label, Rating, and Swatches. To change what appears on every card (for example to hide the rating, or reorder the title and price), select the Product card block and edit its child blocks. Those changes apply to every product in the grid. There is no per product card setting.

Other settings

This section also uses the standard Color (including Use dark header theme over this section), Padding, Margin, and Visibility controls. See Common section settings.

Tips

Products per page sets the batch size for Infinite scroll too, not only numbered pages. A smaller value loads faster on the first view and fetches more often as the shopper scrolls.
The card deck appears on page one only, so it works as a single feature rather than a repeating banner. Shoppers who reach page two or scroll past the first batch will not see it again.