Slideshow section
The Slideshow section shows slides with an image or video and text, as split screen halves or full width in Split, up to 8 slides.
Applies to: Split 5.1.0 and later. Added in: Split 1.0.0. Last checked: 2026-10-13 against Split 5.1.0.
The Slideshow section shows up to 8 full-screen slides, each with a tagline, title, subtitle, button and an image or video. On desktop the slides follow each other as the customer scrolls down the page; on phones they become a swipe slider.
Where to find it: select Add section in the theme editor, then choose Slideshow.
Desktop layout: split screen or full width
Desktop layout sets how each slide looks on screens wider than 1024 px:
- Split screen (default): the text sits on one half of the screen and the image or video fills the other half. This is the two-halves design that How Split is built explains.
- Full width: the image or video fills the whole screen and the text sits over it, in the center.
The other Desktop layout settings depend on that choice:
- Image position (Split screen only) puts the media on the Right (default) or the Left half. The text takes the other half.
- Custom text color sets the slide text color. Leave it transparent to use the colors from Colors theme settings.
- Custom background color (Split screen only) paints the text half.
- Image overlay (Full width only) lays a color over the media at 30 percent opacity, so light text stays readable on a bright image.
Headings size under Typography sets the size of every slide title: Regular, Large (default) or Extra large.
How the slides move
- Every slide is one screen tall. On desktop the slides are stacked: while the customer scrolls down, the media of the next slide slides up over the current one and the current slide darkens slightly.
- There are no arrows and no autoplay on desktop. The customer moves through the slides by scrolling.
- After the last slide the page scrolls on to the next section as usual.
Adding slides
Select Add block inside the Slideshow and choose Slide. The section takes up to 8 slides; drag them in the sidebar to reorder them. The preset starts with 3.
Slide
- Tagline, Title and Subtitle are the three lines of text. Leave any of them empty to hide it.
- Button label shows a button under the text; without a label there is no button. Button link is the page the button opens.
- Image fills the media half (Split screen) or the whole slide (Full width). The editor suggests a square image for Split screen and a landscape image for Full width.
- Mobile image replaces Image on phones and on tablets held upright, for example a portrait crop of the same photo.
- Video plays an MP4 from your Shopify files instead of the image, muted and looping ("MP4 format required, no sound"). When the video cannot load, the slide shows Image (and Mobile image) instead, so set an image as well.
- Heading tag (under SEO) sets the HTML tag of the slide title for search engines, H2 by default. It does not change the size.
A slide with no image and no video shows a placeholder illustration.
Mobile layout
On phones and on tablets held upright the Slideshow is always full width: the media fills the slide, the text sits over it in the center, and customers swipe between slides. Arrows and a slide counter show under the slides when there are two or more.
- Slider height sets the height of the slideshow: Full (default) is the screen height below the header, Large is 75 percent of the screen height.
- Custom text color sets the slide text color on these screens.
- Image overlay lays a color over the media at 30 percent opacity on these screens.
How do I hide the slideshow?
Hide the section with the eye icon next to Slideshow in the theme editor sidebar, or remove it. A Slideshow with no slides shows nothing on the storefront.
Can the slideshow play automatically?
No. Split does not autoplay the Slideshow. On desktop the slides change as the customer scrolls; on phones the customer swipes or uses the arrows.
Which image size works best?
Images are always cropped to fill their box, so keep the subject away from the edges. For Split screen a tall image fills the half screen, for Full width a landscape image, and for Mobile image a portrait one. See Image size recommendations for the sizes.
All Slideshow settings
Every setting in this group, with its type and default.
Accepts these blocks: Slide (up to 8 blocks in the section).
Slideshow section: Desktop layout
Where to find it: Slideshow → Desktop layout
Desktop layout (dropdown, default: Split screen): Sets how each slide looks on screens wider than 1024 px: Split screen puts the text on one half and the media on the other, Full width spreads the media across the screen behind the text. Options: Split screen, Full width.
Image position (dropdown, default: Right): Sets the half of the screen that holds the slide media in the split screen layout; the text takes the other half. Options: Right, Left. Shown only when Desktop layout is Split screen.
Custom text color (color, default: transparent): Sets the slide text color on desktop. Leave it transparent to use the theme colors.
Custom background color (color, default: transparent): Sets the background color of the text half in the split screen layout.
Image overlay (color, default: transparent): Lays this color over the slide media at 30 percent opacity in the full width layout, to keep the text readable.
Slideshow section: Mobile layout
Where to find it: Slideshow → Mobile layout
Slider height (dropdown, default: Full): Sets the slideshow height on phones and on tablets held upright: Full is the screen height below the header, Large is 75 percent of the screen height. Options: Full, Large.
Custom text color (color, default: transparent): Sets the slide text color on phones and on tablets held upright.
Image overlay (color, default: transparent): Lays this color over the slide media at 30 percent opacity on phones and on tablets held upright.
Slideshow section: Typography
Where to find it: Slideshow → Typography
Headings size (dropdown, default: Large): Sets the size of every slide title. Options: Regular, Large, Extra large.
Slide block
Where to find it: Slideshow → Add block → Slide
Tagline (text field, default: "Introducing").
Title (text field, default: "Our brand new store").
Subtitle (text field, default: "Showcase your best products").
Button label (text field).
Button link (link).
Slide block: Media
Where to find it: Slideshow → Add block → Slide → Media
Image (image): It is best to provide a square image for the split screen style and a landscape image for the full width style.
Mobile image (image): An alternative image that will show up on mobile devices.
Video (video): MP4 format required, no sound.
Slide block: SEO
Where to find it: Slideshow → Add block → Slide → SEO
Heading tag (dropdown, default: H2): Specify heading level to help search engines index the structure of your page. Options: H1, H2, H3, H4, span.
Related pages
- How Split is built: the split-screen layout and the screen heights the slides use.
- Image size recommendations: image sizes for split screen, full width and mobile slides.
- Rich text section: text on one half and a background image on the other, without slides.
- Video: background section: one full-width video behind a heading and button.
Shop the look
The Shop the look section shows a photo on one half of a Split page and the products in it on the other half, in a slider of up to 4 products.
Testimonials
The Testimonials section shows up to 7 customer quotes with author name, title and avatar beside the section title in Split, and a slider on mobile.