Slideshow
A sequence of full-width banners, each with its own image or video, overlay, text and buttons. Slides change on their own or with arrows, swipes and the keyboard.
- In the editor
- Slideshow
- Where it goes
- Any page template, with Add section
- In the presets
- Poster: Home page
- Settings
- 18
- Blocks
- Slide
- App blocks
- Yes
When to use it
Use a slideshow when you have two to four equally important stories – a new collection, a sale, a brand story – and want them all at the top of the page. The Poster preset opens its home page with one. If one message matters most, an Image banner is stronger.
Set it up
- Add a Slide block for each story.
- In each slide, upload an Image (and a Mobile image if needed), then write the label, heading, text and buttons.
- Choose the section's Height, Transition and whether slides change automatically.
- Give the slideshow an Accessible name, such as Spring collection, for screen readers.
Each slide
Slides have the same options as the Image banner: an optional Video that loops over the image, an Overlay (solid, gradients, vignette or duotone), Content position for desktop and mobile, an optional Content background (card or frosted glass), and two buttons with their own styles. Each slide can look different – one dark and dramatic, the next light and airy.
Movement
- Transition: Slide moves the slides sideways like a strip of film; Fade crossfades them in place.
- Change slides automatically: advances after Time per slide (3–12 seconds). It pauses on hover and as soon as a shopper uses the controls, and it stays off for shoppers who reduce motion.
- Shoppers can swipe on touch screens and use the arrow keys when the slideshow has focus.
Controls
- Show arrows: previous and next buttons.
- Slide indicator: Dots, Lines (each fills up while its slide is shown), a Counter (2 / 4) or None.
- Controls position: On the image, or Below the image for a calmer photo.
All settings
Every setting in the order of the theme editor, with its options and its default value.
Section: Slideshow18 settings
| Setting | Options | Default |
|---|---|---|
| Height | Small · Medium · Large · Full screen | Large |
| Full width | Checkbox | On |
| Transition | Slide · Fade | Fade |
| Change slides automaticallyPauses on hover and when the shopper uses the controls. Shoppers who reduce motion change slides themselves. | Checkbox | On |
| Time per slide | 3–12s | 6s |
| Navigation | ||
| Show arrows | Checkbox | On |
| Slide indicator | Dots · Lines · Counter · None | Lines |
| Controls position | On the image · Below the image | On the image |
| Accessible nameRead by screen readers, for example Spring collection. | Text | Sample text |
| Color scheme | Color scheme | Scheme 2 |
| Section spacing | ||
| Top padding | 0–160px | 0px |
| Bottom padding | 0–160px | 0px |
| Top padding on mobile | 0–120px | 0px |
| Bottom padding on mobile | 0–120px | 0px |
| Advanced | ||
| Hide on mobile | Checkbox | Off |
| Hide on desktopMobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| Animate on scroll | Checkbox | Off |
| Anchor IDLink to this section with #anchor-id. | Text | – |
Block settings
Block: Slide22 settings
| Setting | Options | Default |
|---|---|---|
| Image | Image | – |
| Mobile imageOptional. Shown on small screens. | Image | – |
| VideoOptional. Plays muted on a loop over the image, which stays as the poster and on slow connections. | Video file | – |
| Overlay | ||
| Overlay style | Solid · Gradient from bottom · Gradient from left · Vignette · Duotone | Gradient from bottom |
| Overlay color | Color | #161616 |
| Overlay opacity | 0–90% | 35% |
| Content | ||
| Content position on desktop | Top left · Top center · Top right · Middle left · Middle center · Middle right · Bottom left · Bottom center · Bottom right | Bottom left |
| Content position on mobile | Top · Middle · Bottom | Bottom |
| Text alignment | Left · Center | Left |
| Content background | None · Card · Frosted glass | None |
| Content background color scheme | Color scheme | Scheme 2 |
| Text color without background | Color | #FFFFFF |
| Label | Text | – |
| Heading | Rich text (one line) | Sample text |
| Heading size | Extra large · Large · Medium | Large |
| Text | Rich text | Sample text |
| First button label | Text | Sample text |
| First button link | Link | – |
| First button style | Primary · Secondary · Highlight | Highlight |
| Second button label | Text | – |
| Second button link | Link | – |
| Second button style | Primary · Secondary · Highlight | Secondary |
Related
Image bannerA large photo or video with a heading, text and up to two buttons on top – full width or within the page.HeroThe catalog opener – a big headline and short text beside a framed image, with quick links to what shoppers look for most.LookbookA horizontal row of large images in mixed shapes that shoppers drag or swipe through, with products on the photos.