Collection Grid

The main body of a collection page: the collection title and description, then every product in the collection laid out as wide horizontal cards over the diagonal brand gradient.

It’s the whole collection page. There’s no separate filtering or sorting section — the catalogue is small enough that this one section does the job.

Used on the collection template.

Settings

Setting	What it does
Title	The heading. Leave blank to use the collection’s own title — which is what you normally want. Fill it in only to override, or connect it to a metafield with the dynamic-source picker.
Description	The copy under the heading. Leave blank to use the collection’s own description.
Show breadcrumbs	Off by default. Turn on to show the breadcrumb trail above the title.
Products per page	How many products load before pagination kicks in. 2–48 in steps of 2, default 12.
Show price	On by default. Turn off to hide prices on every card.
Button label	The main button on each card. Default “Add to Cart”.
Secondary link label	The smaller link beside it. Default “Learn more”. Leave blank to hide the secondary link.
Secondary link behavior	What the secondary link does — Learn more (product page) goes to the product page, Quick Add (variant picker) opens the add-to-cart picker. Default is the product page. Only appears once Secondary link label has text in it.
Show gradient background	On by default. Applies the diagonal brand gradient behind the grid.
Top / bottom padding (desktop)	0–12 rem, default 4 rem each.
Top / bottom padding (mobile)	0–12 rem, default 2 rem top and 2.5 rem bottom.
Section ID	Optional anchor, so you can link to this section with #your-id.

Title and Description default to the collection

This is the single most useful thing to know about this section. Both fields are deliberately empty out of the box so a brand-new collection page renders correctly with no setup — it pulls the title and description you already wrote in the Collections admin.

They’re settings rather than automatic Liquid so that you can point them at a metafield through the dynamic-source picker when a collection needs different copy on the page than in the admin.

Blocks

None. The cards are generated from the collection’s products — there’s nothing to add or reorder.

Pagination

How the extra products load is not set here. It follows the theme-wide pagination setting in Theme settings, which offers Load more, AJAX paging, or plain numbered pages. All three work; whichever is chosen applies to every collection page consistently.

Products per page controls how many appear before that kicks in.

Card layout

One column on mobile, two from 1024px up. The cards themselves are horizontal at both widths — image on the left, text on the right — which is why they read fine in a single mobile column rather than needing to stack into a narrow portrait card.

Each product’s heading is an h2, sitting beneath the collection title’s h1.

Tips

• Leave Title and Description blank. Editing the collection in the Collections admin then updates the page automatically. Filling these in here means two places to keep in sync.
• Keep Products per page reasonably low. 12 is a good default. Setting it to 48 loads every card’s image up front and slows the page down for no benefit when a Load more button would do.
• Blank out the secondary link if you don’t want it. There’s no separate on/off switch — clearing Secondary link label is how you hide it, and doing so also hides the Behavior setting.
• Turn the gradient off if the section sits below another coloured one. Two gradients meeting rarely blend cleanly.
• An empty collection shows a message, not a broken page. “No products found in this collection” renders in place of the grid.