Collection list
Help visitors browse a curated set of Shopify collections.
Collection list turns a merchant-chosen set of Shopify collections into image cards. Use it for departments, seasonal ranges, or shop-by-use-case navigation when the order of the cards matters.
Heading
These controls appear first in the section’s Heading group.
| Setting | Default | What it controls |
|---|---|---|
| Eyebrow | Collections | A short line above the main heading. Leave it blank when the section does not need a pre-heading label. |
| Heading | Shop by collection | The main heading for the curated list. |
| Text | Help customers browse your store through a curated list of collections. | Optional rich text below the heading. |
| Link label | View all collections | The label for the heading link. When it is not blank, the link goes to Shopify’s collection index. This section does not provide a separate link URL setting. |
| Heading alignment | Left | Left, Center, or Right alignment for the heading group. |
| Content width | Medium | Small, Medium, or Large width for the heading content. It does not change the card grid width. |
Cards
Use the Cards group to control the grid shared by every Collection block.
| 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. |
| 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 each image’s aspect 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, Center, or Right; default Left | Aligns the title and optional product count within each card. |
| Show product count | Off | On adds the collection’s product count to each card when Shopify provides it. |
Collection blocks
Add up to 12 blocks of type Collection. Blocks are rendered in the order shown in the Theme Editor.
Each block has:
- Collection — chooses the Shopify collection to link to.
- Image override — supplies an image for this section only. When blank, the card uses the collection’s featured image.
Blocks with a blank Collection are skipped. If the section has no blocks at all, Strata renders three placeholder cards. A section with blocks that are all blank does not receive those placeholders, so remove unused blocks or select a collection before publishing.
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. |
Desktop and mobile behavior
The mobile and desktop column settings are independent. Strata switches from the mobile grid to the desktop grid as the section container becomes wide enough; use Shopify’s device previews rather than treating a browser width as a merchant setting. Long titles can change card height, especially when cards use Below image.
Accessibility and media
Use a meaningful collection image or Image override and check that the collection title still identifies the destination. With Over image, review text contrast on every card, not only the first image. Collection cards provide links and keyboard focus; verify the focus state remains visible in both content positions. Do not place important text only inside the image.
Common issues
- A card is missing: confirm its block’s Collection setting is not blank and that the collection is available to the Online Store sales channel.
- The link is missing: enter a Link label; the destination is the collection index and cannot be changed in this section.
- The image is wrong: add an Image override or update the collection’s featured image.
- Overlay text is hard to read: use Below image, choose a stronger image, or revise the image focal point.
- Counts look stale: confirm the collection’s products and publication status in Shopify.