Editorial collection
Pair a large collection image with a curated product row.
Editorial collection pairs a campaign-style cover with a product row. Use it when a collection story should lead visually and shoppers should be able to continue directly into selected products.
Cover image
The Cover image group controls the story card.
| Setting | Default | What it controls |
|---|---|---|
| Image override | Blank | Replaces the collection image for this section. When blank, Strata uses the collection image and then the first product image if no collection image is available. |
| Cover heading | Blank | Text over the cover. When blank, the collection title is used. |
| Cover image link | Blank | Makes the cover clickable. When blank, the selected collection URL is used. |
| Full width | On | On uses the wider editorial container; Off keeps the section in the page-width container. |
The cover link is independent of the product-card links. If you enter a custom Cover image link, check that it is the destination shoppers expect before publishing.
Heading
These settings introduce the product row:
| Setting | Default | Options and use |
|---|---|---|
| Eyebrow | Featured | Short text above the heading. |
| Heading | Shop the collection | Main product-area heading. |
| Text | Pair an editorial image with selected products from a collection. | Optional rich text below the heading. |
| Heading alignment | Left | Left, Center, or Right. |
| Heading size | Medium | Small, Medium, or Large. |
Products
| Setting | Default | What it controls |
|---|---|---|
| Collection | Blank | Supplies products from the selected collection when Products is blank. If no collection is selected, Strata falls back to the store’s all collection. |
| Products | Blank; up to 16 selected products | A hand-picked product list. When it contains products, it replaces the collection as the product source. |
| Show carousel progress bar | On | Shows progress feedback for the product carousel. |
| Products to show | 2–16, step 1; default 8 | Limits how many products from the chosen source are rendered. |
| Products per row (mobile) | 1 or 2; default 2 | Sets the mobile carousel card density. |
The product row is a carousel in the current implementation. Product card content comes from the global Product card settings, and eligible color options also depend on Color swatches.
Motion and controls
Enable parallax for this section is On by default. It takes effect only when the global Enable parallax effects setting is also on. A reduced-motion preference disables the cover parallax even when both settings are on. Turning this section setting Off keeps the cover static without changing the global setting or other sections.
The cover’s reveal/parallax and the carousel are separate interactions. Check that the cover heading, link, product titles, and controls remain understandable when motion is disabled.
Spacing
| 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
On wide containers, the cover and product area sit as two columns. At smaller container widths they stack, and the cover uses a shorter responsive shape before the wide editorial layout is reached. The mobile product row uses the selected Products per row (mobile) value; there is no desktop per-row setting on this section.
Empty states and dependencies
If no products are selected and the fallback collection has no products, the implementation shows onboarding product placeholders in the editor rather than a merchant-authored empty message. The cover can still render from the collection image or first available product image. Select a real collection or product list before publishing.
Quick-buy controls inside the product cards inherit the global Product card behavior. If a card has multiple variants, quick buy opens the option modal; products with selling plans do not use the card quick-buy path. A successful add can use the global Cart drawer behavior.
Accessibility and media
Use a cover with enough tonal separation for the overlay heading. The cover and product cards must have meaningful text links; do not put the only call to action in the image. Check keyboard focus for the cover link, carousel arrows/progress, card links, and quick-buy controls. Test with reduced motion enabled and ensure the story remains complete.
Common issues
- The chosen product list is ignored: confirm Products is populated; it deliberately takes precedence over Collection.
- The cover image is unexpected: add Image override, or check the selected collection’s featured image and first product image.
- The cover link goes to the collection: this is the fallback when Cover image link is blank.
- Parallax does not move: check global Enable parallax effects, this section’s toggle, and the browser/system reduced-motion preference.
- There are placeholders: select a collection or products before publishing.