Collections grid

Present the storefront’s collection index as a paginated grid of collection cards.

Collections grid is the fixed main section in the Collection list template. It can automatically display the store’s collection index, or use Collection blocks to present a selected set on that page.

You cannot add Collections grid as an ordinary section on other templates. For a reusable, merchant-chosen set with Grid and Carousel layouts, add Collections instead.

The collection index page with the heading Shop by collection and a grid of large collection cards, three per row.

Collections grid on the collection list page.

Content

The Content group in the Theme Editor. The values shown are examples, not defaults.

Setting	Options and default	What it controls
Heading	Shop by collection	The page heading. If you clear it, Strata uses Shopify’s translated collection-index title.
Introduction	Blank	Optional rich text below the heading.
Collections per page	6–48, step 3; default 24	The maximum number of collections requested for each page.

Layout

The Layout group in the Theme Editor.

Setting	Options and default	What it controls
Full width	Off	On lets the grid use the wider section container. Off keeps it in the page-width container.
Heading alignment	Left	Aligns the heading group to the Left or Center.
Collections per row (desktop)	2, 3, or 4; default 3	The number of cards in a desktop row.
Collections per row (mobile)	1 or 2; default 1	The number of cards in a mobile row.
Grid gap	None, Small, Medium, or Large; default Medium	The horizontal and vertical space between collection cards.
Image ratio	Natural, Portrait, Square, or Landscape; default Portrait	The media shape used by every collection card. Natural preserves the source ratio; the other choices crop to a consistent shape.
Content position	Below image or Over image; default Below image	Places the collection title below the media or over it.
Card text alignment	Left or Center; default Left	Aligns card text.

Colors

The Colors group in the Theme Editor.

Setting	Options and default	What it controls
Background color	Leave blank to inherit Theme settings > Colors > General; selecting a color in this section overrides the inherited value.	The section surface behind the collection cards.
Text color	Leave blank to inherit Theme settings > Colors > General; selecting a color in this section overrides the inherited value.	The default text color for the heading and collection cards.
Overlay opacity	0–80%, step 5%; default 15%	Controls the strength of the contrast layer behind card text when Content position is Over image. It does not control blur.

Check collection titles and pagination against the selected colors. Overlay opacity is used only when Content position is Over image.

Spacing

The Spacing group in the Theme Editor.

The Spacing group contains:

Setting	Options and default
Section spacing	Small, Medium, or Large; default Medium.
Top spacing	On by default.
Bottom spacing	On by default.

Choose which collections to show

All collections

Show the complete collection list automatically.

Do not add a selected Collection block. Use Collections per page to choose how many appear before visitors move to the next page.

Selected collections

Choose the collections and their order yourself.

Add Collection blocks and choose a collection in each one. When a selected block is present, this fixed page section shows your chosen collections instead of the complete list. Use the separate Collections section when the same kind of curated group belongs on another template.

The section accepts up to 24 Collection blocks. Reorder the blocks to change their order. Each card uses the selected collection’s featured image. Use the separate Collections section when you need a reusable section or a different image for each card.

Selected collections take priority

When a selected Collection block is present, the page shows your chosen collections instead of the complete collection list.

Pagination and responsive behavior

The collection index on mobile with one card per row.

Collections grid on mobile.

Pagination applies only when the page is showing all collections and the total exceeds Collections per page. Selected Collection blocks appear as one list without pagination.

The mobile and desktop column settings are independent. Strata switches to the desktop grid as the section container becomes wide enough. Use Shopify’s mobile and desktop previews to review the actual layout at both sizes.

If no collections are available, the page has no collection cards. Remove unused Collection blocks before publishing.

Accessibility and media

Collection cards link to their collection destinations and should retain a visible keyboard focus state. Review focus with both Below image and Over image. Use collection images with a clear subject and check that titles remain readable over every image. Do not rely on the image alone to communicate the destination.

Common issues

A collection is not listed: confirm it is available to the Online Store sales channel and that the current page is not beyond the final page.
Only selected collections appear: the presence of a selected Collection block switches the section from the automatic index to the block grid.
An empty position appears while editing: select a collection for that block or remove it before publishing.
The final row looks uneven: this is expected when the number of collections does not fill the selected column count.
The heading is not the custom text: enter Heading; when it is blank, Shopify’s translated collection-index title is used.
Overlay text is difficult to read: change to Below image or review the source image and focal point.
Pagination does not appear: confirm the section is using the automatic collection index and that the catalog contains more collections than Collections per page.