Slideshow with text controls

A split layout: clickable text items on one side, fading images on the other.

Last updated About 4 hours ago

This section pairs a text control panel with an image slider. Each Slide block is one topic — when a visitor clicks it (or it becomes active during autoplay), the matching image appears in the slider column.

Set up slides

Add Slide blocks. Each one has:

  • Heading and Content (rich text) — what shows in the control list.
  • Image — the photo that appears in the slider when this slide is active.
  • Shopify-hosted video — optional; replaces the image if set.
  • Icon — optional accent beside the heading in the control list.

On mobile, slides stack vertically: the text controls sit above the image, and the active item expands to show its content.

Choose which side the controls sit on

Controls position horizontalLeft or Right. The image slider always takes the other half on desktop, so you get a clean 50/50 split.

Shape the images

Aspect ratio and Aspect ratio (mobile) control the image column proportions — adapt to image, landscape, square, or portrait.

Run the slider

Slideshow settings covers autoplay, animation speed, loop, navigation arrows, and pagination — same family of controls as other slideshow sections. See Slideshow control settings.

The image column uses a fade transition between slides.

Other settings

Optional Header settings (section-level caption, heading, button above the split). Color scheme, Padding settings, Visibility settings, Width settings.