Slideshow

One slide at a time, edge to edge, with the copy laid over the photograph and a control cluster in the bottom corner. Use it where you have three or four campaign shots that each deserve the full width — a lookbook teaser, a collaboration, the three pieces at the centre of a drop.

Unlike most carousels, this one is a horizontally scroll-snapping strip rather than a stack of transformed slides. The browser does the physics, so a swipe on a phone and a two-finger trackpad flick both work before any of the theme’s scripts load.

Section settings

Setting	Type	Default	What it does
Heading	Text	Slideshow	Accessible name. It is not displayed — it is read out by screen readers to introduce the carousel.
Height	Range, 40–100, step 5	80	Slide height as a share of the viewport height. The editor labels it %; it is applied as viewport height, with a 420 px floor.
Autoplay	Checkbox	false	Advance slides on a timer. See the conditions below — it is off in more cases than this one checkbox.
Seconds per message	Range, 3–12 s	6	Seconds per slide when autoplay is running.
Top spacing	Range, 0–160 px	0	Top spacing. Zero so it can butt up against the hero.
Bottom spacing	Range, 0–160 px	0	Bottom spacing.

Slide blocks

Add one Slide block per shot. There is no cap on the number of slides.

Setting	Type	Default	What it does
Image	Image	—	The slide photograph, cropped to fill.
Kicker	Text	—	Small accent eyebrow above the heading.
Heading	Inline rich text	The new standard	The slide headline, in the display face.
Text	Text	—	One supporting line under the heading.
Result button	Text	—	Button text.
Button link	URL	—	Button destination. Both the label and the link must be set for the button to render.
Menu position	Select — Left / Centre / Right	left	Which corner the copy block sits in.

The preset ships with two empty slides.

How autoplay actually behaves

Autoplay needs three things to be true at once:

1. The section’s Autoplay checkbox is on.
2. The theme’s global Motion setting is on (Theme settings → Motion). Switch motion off for the store and every slideshow stops rotating.
3. The visitor has not asked their system for reduced motion.

When it is running, it stops on its own whenever someone might be reading: on mouse-over, when anything inside the slideshow takes keyboard focus, and when the browser tab is hidden. A pause button appears in the control cluster — and only when autoplay is on, because a pause button with nothing to pause is noise.

Other behaviour

The controls are progressive. Arrows, dots and the pause button are rendered hidden and revealed when the component mounts. If the script never runs, you are left with a horizontally scrollable strip of full-bleed photographs — still usable, still swipeable. With a single slide, no controls render at all.

The dots follow the real scroll position. A swipe moves the track without going through the arrows, so the active dot is computed from where the track actually is, not from where it was last told to go.

Keyboard. Left and right arrow keys move between slides when the slideshow has focus.

Loading. The first slide is requested eagerly at high priority; the rest are lazy. Put your strongest image first.

Copy legibility. The copy block carries its own soft shadow, because the theme cannot know whether your photograph is dark behind the text. It also reserves clearance above the control row so a button never collides with the arrows.

Tip

Leave autoplay off. A rotating slide steals the reader’s place mid-sentence, and the Shopify Theme Store guidance is against auto-advancing content. If you do turn it on, push interval to 8–10 seconds — six is barely enough time to read a headline, a line of copy and decide to click.

Caution

The section renders nothing at all if it has no slide blocks — not an empty band, nothing. If a slideshow has vanished from a page, check that its slides are still there.