How do I add a slideshow with several slides to my home page?

The Slideshow shows several images or videos one after the other, each with its own text and buttons. Use it for several promotions in the same spot.

Add a slideshow and its slides

1. Open the builder and choose Home page in the Pages tab.
2. In the Sections tab, click Add new section and pick Slideshow from the Content group.
3. Select the slideshow and click Add new block to add a Slide. Drag slides to change their order.

The slideshow is only offered on the home page. You can add 2 per page, each with up to 7 slides. Hide a slide to keep it for later without showing it.

Slideshow settings

• Mode: Frame shows one slide edge to edge and loops around. Inset also shows a peek of the slides next to it. Layer stacks the slides like cards, and shoppers click a slide to open it.
• Media height: Small, Medium, Large, or Image (each slide follows the shape of its own image, so nothing is cut off).
• Content position: In puts the text on the media, Out puts it below the media.
• Section width (Page or Full) and Full on mobile (not in Layer mode), which makes it full width on phones with no gap or rounded corners.
• Color scheme, Corner radius, and Border thickness (Layer mode only).
• Gap: the space between slides, Inset mode only.

Navigation

• Auto-rotate: moves to the next slide on its own, every Speed seconds (2 to 10).
• Navigation icons: Arrows, Chevrons, or None, with an Icon background (None, Circle, or Square).
• Pagination: Dots, a Counter (like 2/5), or None. When Auto-rotate is on and Pagination is not None, a pause button shows next to it.

Slide settings

Click a slide to edit it:

• Media: an image or a video. The video of the slide on screen plays muted on a loop, and pauses when another slide shows.
• Direction, Stack vertically on mobile, Alignment, and Position: where the content sits on the slide.
• Use parent color scheme: on by default. Turn it off to give this slide its own Color scheme.
• Media overlay, with Overlay color, Overlay style, and Gradient direction: a color layer that keeps text readable.
• Gap and Padding.

Each slide holds up to 4 blocks: Text, Button, Group, and Divider (2 of each at most). See Group, Text, Button, and Divider blocks: how do the layout component settings work?

Good to know

• The whole Navigation group is hidden in Layer mode and when fewer than 2 slides are visible. Layer mode never rotates on its own.
• Auto-rotate stops while the slideshow is off screen and goes on when shoppers scroll back. Shoppers who turned on reduced motion on their device do not get auto-rotation.
• Auto-rotate only moves between slides. Whether other videos on your store start on their own is a separate setting, see Automations settings.
• Corner radius is hidden when Section width is Full.
• When every slide is hidden, the slideshow does not show at all.