Carousel arrows and movement
Arrows, auto-scrolling, and looping for Carousel widgets.
Where to find it: open a Carousel widget, Carousel tab, Arrows and movement card.
The Product page layout has a similar Movement card with Advance every and Start over at the end, but no arrows. See The Product page layout.
Arrows
| Setting | Options | Default |
|---|---|---|
| Arrow position | Under the row: two buttons centred below the cards. Over the clips: buttons at the left and right edges, over the cards. No arrows — swipe only. | Under the row |
| Arrow style | Circle button: a round button. Plain arrow: just the arrow. | Circle button |
| Arrow button color | The circle behind the arrow. Circle button only. | Black |
| Arrow color | The arrow itself. | White |
Each press moves one card along. Arrows hide themselves when every card fits on screen. With No arrows — swipe only, the style and colour settings are hidden.
Change the arrows
Open the Carousel widget and click the Carousel tab.
In the Arrows and movement card, choose an Arrow position.
Choose an Arrow style, then set Arrow button color and Arrow color.
Click Save.
Plain arrows on light pages
Arrow color is white by default. With Plain arrow on a light background, the arrows can be invisible. Pick a darker Arrow color.
No arrows on desktop
With No arrows — swipe only, phone and trackpad users swipe through the cards, but desktop shoppers with a plain mouse have no obvious way to scroll. Keep arrows on, or turn on auto-scroll, if many of your shoppers are on desktop.
Movement
| Setting | What it does | Default |
|---|---|---|
| Advance every | Moves the carousel on by one card every few seconds, 0–30. Set to 0 to turn auto-scrolling off. | 0 (off) |
| Start over at the end | After the last card, go back to the first. With arrows, Next on the last card jumps to the start and Previous on the first jumps to the end. When off, the arrows grey out at each end, and auto-scrolling stops at the last card. | On |
Auto-scrolling pauses while a shopper's pointer or finger is on the carousel, and while the browser tab isn't visible. It works with or without arrows.
Turn on auto-scroll
In the Arrows and movement card, type a number of seconds in Advance every, such as 4.
Leave Start over at the end on so the carousel loops. Turn it off if you want it to stop at the last card.
Click Save.