Collections grid
Present the storefront’s collection index as a paginated grid of collection cards.
Collections grid is the main section in the Collection list template. It automatically reads the store’s collection index and paginates it. Use it when shoppers need to browse the full catalog of collections rather than a hand-picked list.
Do not confuse it with Collection list, which is a curated section built from merchant-added Collection blocks. Collections grid has no collection blocks.
Heading
These controls appear first in the Heading group.
| Setting | Default | What it controls |
|---|---|---|
| Heading | Shopify’s translated collection-index title when blank | The page heading. If you leave it blank, Strata uses Shopify’s translated collection-index title. |
| Introduction | Blank | Optional rich text below the heading. |
Cards
| Setting | Options and default | What it controls |
|---|---|---|
| Collections per page | 6–48, step 3; default 24 | The maximum number of collections requested for each page. |
| Full width | Off | On lets the grid use the wider section container. Off keeps it in the page-width container. |
| Collections per row (mobile) | 1 or 2; default 1 | The number of cards in a mobile row. |
| Collections per row (desktop) | 2, 3, 4, or 5; default 3 | The number of cards in a desktop row. |
| 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 title and optional count below the media or over it. |
| Card text alignment | Left, Center, or Right; default Left | Aligns card text. |
| Show product count | Off | On adds each collection’s product count when Shopify provides it. |
Spacing
The Spacing group contains:
| Setting | Options and default |
|---|---|
| Section spacing | None, Small, Medium, or Large; default Medium. |
| Top spacing | On by default. |
| Bottom spacing | On by default. |
Pagination and responsive behavior
Pagination appears only when the collection index contains more pages than the current Collections per page value. Check the first page, a full middle page, and the final page when the catalog is large enough. The final page may contain fewer cards than the configured page size.
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 instead of documenting a fixed browser breakpoint.
There is no custom empty-state copy in this section. If Shopify supplies no collections, the grid has no collection cards; keep the page heading and introduction useful without assuming that cards are present.
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 and optional product counts 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.
- 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 catalog contains more collections than Collections per page.