Carousel
A CMS (or child) connected carousel to display any content or products including Recently Viewed, Favorites, and Cart Cross-Sells.
Last updated
How to use
Set a unique
Carousel IDso Carousel Controls, Carousel Dots, and Carousel Scrollbar can bind to this carousel, and set anAria Labelfor screen readers — it defaults to "Product carousel" if left blank.Choose a
Source:⦿ Childrento scroll whatever you place inside the carousel, or⦿ CMSto query a connected Collection List directly.For a
⦿ CMSsource, pick aCMS Displayset and connect an⦿ Empty Statedesign to show when that set has nothing in it.Set
NavigationtoItemorPage— this is the step size that its companion controls all move by.
What each CMS Display option pulls in
When Source is set to ⦿ CMS, CMS Display decides which product set the carousel queries:
CMS Display | Shows | Data source |
|---|---|---|
| Every product in the connected Collection List. | Full list |
| Products the customer has viewed. | Stored per-browser in the customer's browser. |
| Products the customer has favorited. | The favorites store, stored per-browser in the customer's browser. |
| Suggested products based on what's already in cart. | Ordered suggestions derived from the current cart lines. |
Recently Viewed and Favorites are per-browser — a fresh browser has neither until the customer views or favorites something.
What the connected Collection List controls — and what it ignores
The connected CMS Collection List supplies two things: the item design and which items to show. It does not control the carousel's layout — the list's own Grid or Stack settings and row count are ignored, and the carousel always arranges its items in a single left-aligned row, starting from the first item. If the list comes back empty, the connected ⦿ Empty State design takes over immediately.
Pairing with Controls, Dots, and Scrollbar
Carousel Controls, Carousel Dots, and Carousel Scrollbar bind to a carousel by matching Carousel ID exactly — without a match they have nothing to drive. A blank Carousel ID is valid and creates an isolated carousel, but that's intentional: a blank ID never binds to companion components, so give the carousel an explicit ID if you want arrows, dots, or a scrollbar to control it. All three companions, plus native snapping, share the same canonical list of reachable positions — including the final clamped position for fractional item counts — so navigation always lands exactly at the end of the content instead of overshooting or stopping short.
Snapping, motion, and accessibility
Items snap into place as customers scroll, drag, or swipe — with Item navigation the carousel moves one item at a time, with Page it moves a full page of visible items. Either way, the final position always lands exactly at the end of the content, even when the last page is a partial one.
There's no autoplay — the carousel only moves when a customer interacts with it or uses your connected controls. Movement animates smoothly, and a customer's reduced-motion system setting is honored automatically: the animation is skipped, but positions stay identical. Draggable, Swipeable, and Scrollable toggle mouse drag, touch swipe, and scroll input individually, and vertical page scrolling always keeps working over the carousel.
The carousel announces itself to screen readers as a carousel with each item labeled "1 of 8"-style. Carousel Controls arrows are real buttons, Carousel Dots are labeled "Go to item n", and the Carousel Scrollbar thumb is keyboard-operable (arrow keys nudge, Home/End jump to the ends). One thing to know: the track itself isn't keyboard-navigable on its own — connect Controls, Dots, or a Scrollbar so keyboard users can move it too.