Product Feature Carousel
A full-width carousel of product cards — each with a tall portrait image, optional hover media, a tag line, description, and CTA button. On mobile the active card is centered with the adjacent products peeking from both edges; swiping or tapping arrows advances with a fast 300ms transition. Tablet shows two cards in a looping carousel, and desktop lays out three cards in a static grid (no dragging, no arrows) when there are three or fewer products.
The section header uses static blocks for a title, rich text description, and trust badges, all centered above the carousel in a width-constrained column.
Settings
Section titled “Settings”| Setting | What it does |
|---|---|
| Section ID | Optional anchor for jump links. Must be unique on the page, in handle format. |
| Content max width | Controls the maximum width of the title/description/badges area. Three options: 2XL (672px, default), 3XL (768px), 4XL (896px). Does not affect the carousel width. |
| Padding | Separate mobile, tablet, and desktop padding controls. Defaults: 52px mobile, 72px tablet, 96px desktop. |
The carousel itself has no color settings — it inherits the page background. Cards are transparent.
Blocks
Section titled “Blocks”Static blocks (always present in header):
- Title — the section heading, centered above the carousel.
- Rich text — description paragraph below the title.
- Product Trust Badges — trust icons/text below the description.
Repeatable:
- Product Feature Card — each card is one carousel slide. See the Product Feature Card block doc for all card settings.
Mobile behaviour
Section titled “Mobile behaviour”The mobile carousel uses Splide with focus: "center" and 20% padding on each side, creating a peek effect where adjacent products are partially visible. Non-active slides have their text hidden, images scaled up slightly (1.05×), and are completely non-interactive — no taps, no hover effects, no keyboard focus. Text on the active slide overflows the slide column width so product names and CTAs can sit on a single line.
Custom circle-bordered arrows sit inside the image area. The .is-incoming class is added the moment a slide starts moving so the incoming card’s text appears immediately rather than waiting for the transition to finish.
Desktop behaviour
Section titled “Desktop behaviour”With three or fewer cards, desktop renders a static 3-up grid — no dragging, no arrows, no loop. This is intentional; the cards are meant to sit side-by-side as a comparison layout, not scroll. If more than three cards are added, desktop becomes a looping carousel.
Accessibility
Section titled “Accessibility”- Non-active slides are marked
aria-hidden="true"withtabindex="-1"on their links, preventing screen readers and keyboard users from reaching hidden content. - Arrow buttons have descriptive
aria-labelvalues and SVGs are markedaria-hidden="true" focusable="false". - The carousel has
label: "Featured products"for screen reader identification.
Where it’s used
Section titled “Where it’s used”- Homepage — “A kitchen made for more plants” section
- Three cards is the intended count. The desktop grid is optimized for three; two looks sparse, four or more forces a carousel on desktop which changes the feel.
- Always upload mobile images. The default product photos have too much white space for the peek effect. Tighter crops make a dramatic difference.
- Keep descriptions short. On mobile the text overflows the slide width, but long descriptions still wrap awkwardly. One sentence is ideal.
- Hover videos are desktop-only in practice. On mobile, non-active slides disable hover entirely, and touch devices don’t trigger mouseenter. Don’t rely on hover media for essential information.