Slideshow: Split

Show two slideshow images side by side with one shared heading, text and button laid over them.

Pro feature. This section requires a Pro or Max License key. Without one, it's hidden on your live store and shows a 🔒 Pro notice in the theme editor. Learn about plans and License keys

---

The Slideshow: Split section is a looping image slideshow that shows two slides at once on desktop and one slide at a time on mobile. A single caption, heading, description and button stay in place over the images while the slides move behind them. Use it for lookbooks, campaign imagery or any story told across several photos.

1. Our guide to set up a Slideshow: Split section:

Steps:

• In the theme editor, click Add section.

• Locate Slideshow: Split.

• Click Save.

2. Section settings

• Layout: Full width / Compact. Compact keeps the slideshow within the page width.

• Media

  • Image overlay opacity: Darkens every slide so text stays readable, 0–100%.

  • Desktop slide height: Adapt to first image / Small / Medium / Large / Custom.

  • Desktop custom height: Slide height on desktop, 250–850px. Shown when Desktop slide height is set to Custom.

  • Mobile slide height: 350px / 450px / 550px / 650px / 750px.

• Content

  • Caption: Small text shown above the heading.

  • Heading: The main title shown over the slides.

  • Heading size: 15–80px.

  • Description: Text shown below the heading.

  • Content width: Maximum width of the text area, 200–800px.

  • Button label: Text on the button. Leave empty to hide the button.

  • Button link: Where the button goes.

  • Use outline button style: Shows an outline button instead of a solid one.

• Position

  • Desktop content position: Where the text sits over the slides on desktop: Top left / Top center / Top right / Middle left / Middle center / Middle right / Bottom left / Bottom center / Bottom right.

  • Desktop content alignment: Text alignment on desktop: Left / Center / Right.

  • Mobile content position: Top / Middle / Bottom.

  • Mobile content alignment: Left / Center / Right.

• Colors

  • Heading: Color of the heading.

  • Text: Color of the caption and description.

  • Button label: Text color of the solid button.

  • Button background: Background color of the solid button.

  • Button outline: Text and border color of the outline button.

• Corner radius

  • Corner radius: Rounds the corners of each slide image, 0–40px.

• Behavior

  • Auto-rotate slides: Moves to the next slide automatically. Rotation pauses while a shopper hovers over or focuses on the slideshow.

  • Change slides every: Time between slides, 3–9 seconds. Shown when Auto-rotate slides is on.

• Accessibility

  • Slideshow description: Describes the slideshow for screen readers.

3. Image block settings

Each Image block is one slide. You can add up to 5 slides.

• Image: The slide image.

• Mobile image: Optional image used on mobile. If empty, the main image is used.

• Image focal point: Which part of the image stays visible when it's cropped: Center / Top / Bottom / Left / Right.

4. Tips

• Each slide fills half the section width on desktop, so portrait or square images (for example 4:5, at least 1500px wide) work best.

• Add 3 or more slides so shoppers have something to browse on desktop. With exactly 2 slides, both are already visible, so the arrows are hidden on desktop.

• Desktop slide height > Adapt to first image uses the shape of the first slide's image for all slides.

• For a classic one-image-at-a-time slideshow with different text on each slide, use the Slideshow or Slideshow: Pagination section.