Slideshow

Use the dots to jump to a slide. With a dot focused, Left/Right arrow keys move between dots, and Home/End select the first/last slide. Without JavaScript, the dots are hidden and native sideways scrolling remains available.

The Slideshow shows a horizontal row of image cards, each with its own headline, accent word, text, and button. Shoppers swipe between the slides and can jump with the dots below.

What it does

Use it to present a few equally important messages — collections, campaigns, or seasonal picks — without stacking three sections. Each slide is independent: its own photo and its own call-to-action.

There is no autoplay: shoppers move at their own pace by swiping or using the dots.

Add it to a page

1. In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
2. Open the template where you want the section.
3. Click Add section and choose Slideshow.
4. Click Add block → Slide for each card, and fill in its image and text.
5. Save.

Choose a style

One section setting controls the shape of every slide:

Setting	Default	Options	What it does
Image ratio	Square (1:1)	Landscape (4:3) / Square (1:1) / Portrait (4:5)	The shape of every slide’s photo area

Set it up: quick start

1. Add the section and pick an Image ratio.
2. In the first Slide block, upload an Image, write the Heading and the Accent heading word, and set the button’s label and link.
3. Repeat per slide. Delete the demo slides you don’t need.
4. Save and drag through the slides in the preview to check the flow.

Settings

Section settings

See the table under Choose a style — Image ratio is the only section setting.

Blocks

Block	Limit	What it adds
Slide	Add one per card	One image card with its own text and button

Slide settings

Setting	Default	Options	What it does
Image	Empty	Image picker	The slide’s photo. Transparent PNG cutouts work best — the image sits on the page background
Heading	“Happy”	Text	The slide’s headline
Accent heading word	“Pet”	Text	The word shown in the accent color. Leave empty for a single-color headline
Text	(demo paragraph)	Text	Short line under the heading
First button label	“Shop now”	Text	The slide’s button; leave empty for no button
Link	Empty	URL	Where the button leads

Images and content tips

• All slides share one ratio, so use photos with the same orientation for a calm row.
• Transparent PNG cutouts work best — each image sits directly on the page background like a sticker.
• Keep the headline short: the text area is the width of one slide.

Good to know

• Swiping is native. Slides scroll with touch, trackpad, or mouse — exactly like scrolling a page sideways, and the dots below jump to a slide.
• No autoplay, on purpose. Nothing moves unless the shopper moves it; if you want motion, the Multi-video banner or Shop the scene sections rotate automatically.
• Buttons are per slide. A slide without a button label simply shows its image and text.

Example setups

Collection trio. Three slides (Food / Toys / Beds), Square ratio, transparent cutout per collection, each button linking to its collection page.

Campaign story. Three Portrait (4:5) slides with lifestyle photos telling a before → during → after story, one shared “Shop the look” link.

Common questions

My slides show at different heights. All slides share the Image ratio — mixed photo orientations get cropped to fit. Re-crop the photos to the same shape.

The dots show more slides than I configured. Extra demo Slide blocks are still in the section — delete the unused blocks in the sidebar.

Can slides change by themselves? No — this slideshow is deliberately manual. For auto-rotating content use Showcase carousel or Shop the scene.