Slideshow

Slideshow shows up to six full-width slides, one at a time. Each slide has an image, an eyebrow, a heading, text and a button, and you choose whether its text sits on the left, in the center or on the right. Shoppers move between slides with arrows, dots or by swiping.

Slides don't change on their own unless you turn on Change slides automatically. When you do, the slideshow shows a pause button and stops rotating as soon as keyboard focus moves into it. Visitors who prefer reduced motion never see it rotate.

Best practices#

• Two or three slides. Most shoppers only see the first one, so put your most important message there.
• Use images with the same shape. The recommended size is 2400 × 1200 px. Set a focal point on each image so it crops well on phones.
• Keep text short. A heading of a few words and one line of text read well over a photo. Raise Overlay opacity if text is hard to read.
• Leave autoplay off, or slow it down. If you turn it on, choose six seconds or more so shoppers can finish reading.
• Describe it for screen readers. Slideshow label names the slideshow, for example "Autumn campaigns".
• Place it first for speed. When the slideshow is the first section on the page, its first image loads with high priority. Later slides load after.

Preset tips#

• None of the preset home pages starts with Slideshow. If you have one main message, Image banner (used by Sorrel) or Split hero (used by Graphite) is usually stronger.
• With Graphite, a slideshow suits product drops: one slide per drop, center aligned, with a short uppercase heading.

Handle

slideshow

Group

Heroes and banners

Where

Add it to any template with Add section in the theme editor. Up to 6 blocks.

Settings#

Blocks#

Add blocks to this section from the theme editor, then drag them to change their order. A section can have up to 6 blocks.

Slide#