Featured Collections

A centred heading, a set of collection cards, and a call-to-action button underneath. The cards link through to collections, and each one shows the collection’s image and title.

The cards lay out as a three-across grid by default. Switch on Use carousel layout and they become a swipeable carousel on mobile and tablet instead — though the carousel is deliberately torn down at desktop width, where the grid returns. Behind the whole thing you can put a background image, with a separate one for mobile.

Settings

Setting	What it does
Section ID	Optional anchor, so you can link to this section with #your-id.
Desktop Background Image	Sits behind the section from 768px up. Anchored to the top and scaled to fit its full width, so the bottom of a tall image may be cut off.
Mobile Background Image	Sits behind the section below 768px. Fills the whole section and crops to fit.
Use carousel layout	Off by default. On, the cards become a carousel on mobile and tablet.
Show overflow	Off by default. Lets the next card peek past the edge of the page instead of being clipped. Only appears when Use carousel layout is on.
Top / bottom padding (mobile)	0–10 rem, default 3 rem each.
Top / bottom padding (tablet)	0–10 rem, default 3 rem each.
Top / bottom padding (desktop)	0–10 rem, default 7 rem each.

The heading and the button are blocks, not section settings — their text, heading level and link are edited on the block itself.

The carousel only exists below desktop

“Use carousel layout” reads like it applies everywhere, but it doesn’t. It shows one card at a time on phones, two on small tablets, and then switches back to the plain three-across grid at 992px and up. If you’re checking the carousel on a desktop browser you’ll see a grid — narrow the window to see it working.

Blocks

The section accepts one block type:

• Collection Card — one card per collection. Add as many as you need; the preset starts you with six.

Each card has:

Setting	What it does
Collection	The collection this card links to. Required — without it the card shows a grey placeholder.
Title Override	Replaces the collection’s own title. Leave blank to use the collection title.
Image Override	Replaces the collection’s featured image. Leave blank to use the collection’s own image.
Block ID	Optional anchor for this individual card.

The section also has two fixed blocks that are always present and can’t be removed or reordered:

• Title — the centred heading above the cards.
• Buttons — the call-to-action below the cards. Holds one or more Button blocks.

A card with no collection shows a placeholder

If you add a Collection Card and don’t pick a collection, it renders a grey box reading “Collection title” — on the live site, not just in the editor. Either finish setting it up or delete it.

Tips

• Use a multiple of three. The grid is three across on desktop, so six or nine cards fill complete rows. Four or five leave an awkward gap on the last row.
• Give every collection a featured image. The card falls back to the collection’s image, so setting it once in the Collections admin means you never have to fill in the Image Override here.
• Two background images, not one. The desktop image is anchored to the top and scaled to the page width; the mobile one crops to fill. Uploading one image for both usually means the mobile version is cropped somewhere you didn’t intend. Upload both, or leave the section without a background.
• “Show overflow” only reads correctly with a peek. It’s there so the next card is partly visible, which tells people the row scrolls. If your cards already fit the screen, leaving it off is fine.