Slideshow shows up to six hero slides in one place. Each slide has its own image or video, heading, text and up to two buttons. Customers move between slides with the previous and next controls, or you can have the slides change by themselves.
Where to find it
In the theme editor, click Add section and choose Slideshow. You can add it to the home page or any other page that takes sections, as many times as you like.
Changing slides automatically
With Change slides automatically on, the slideshow moves on every few seconds, as set in Change slides every. Customers get a pause button, and the slides never change by themselves for customers who have asked their device to reduce motion. It is off by default: most customers read the first slide and scroll on.
With the transparent header
The transparent header works over a slideshow when it is the first section on the home page, uses Text over image and Full width, has Top spacing set to None, and every slide has an image or video. See Header.
Layout options
The slideshow shares its layouts with the image banner, and one choice applies to every slide:
- Text over image: the text sits on the image, placed by each slide's Content position.
- Split: the image and a text panel side by side.
- Framed: an inset image with the text beside it.
- Text below image: the image first, the text under it.
Height and Width work as they do on the image banner. On phones, Mobile text position keeps the text on the image or moves it below.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Height | Adapt to image, Small, Medium or Large. Default: Large. | How tall the slides are. Adapt to image follows the image's own shape. |
| Width | Full width or Page width. Default: Full width. | Edge to edge, or within the page width. |
| Overlay opacity | 0% to 90%. Default: 30%. | Darkens every slide's image so white text stays readable. |
| Change slides automatically | On or off. Default: off. | Moves to the next slide automatically. Customers get a pause button. |
| Change slides every | 3 s to 10 s. Default: 6 s. | How long each slide stays before the next one is shown. |
| Layout | ||
| Layout | Text over image, Split, Framed or Text below image. Default: Text over image. | How each slide's image and text are arranged. |
| Image position | Left or Right. Default: Left. | Which side the image sits on, in the split and framed layouts. |
| Mobile | ||
| Mobile text position | Over image or Below image. Default: Over image. | Whether the text sits on the image or under it on phones. |
| Color scheme | Color scheme. | Used by the text panel in the split, framed and text-below layouts. Text over an image is white. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: None. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: None. | The space below the section. None lets it touch the one below. |
Blocks
This section is built from one kind of block. Click Add block under the section to add one, and drag blocks to reorder them. The section holds up to 6 blocks.
Slide
One slide. Unlike the image banner, a slide's text is set in its own settings, not with theme blocks.
| Setting | Options | What it does |
|---|---|---|
| Image | Image. | The slide's image. Set its focal point. |
| Video | Video. | A Shopify-hosted video to use instead of the image. Plays muted and on a loop. |
| Mobile image | Image. | Optional. Shown on phones instead of the main image. |
| Content position | Top left, Top center, Middle left, Middle center, Bottom left or Bottom center. Default: Bottom left. | Where the text sits on this slide's image. |
| Eyebrow | Text. | A short label above the heading. Optional. |
| Heading | Text. | The slide's heading. Select a word and make it italic for emphasis. |
| Heading size | Medium, Large or Extra large. Default: Extra large. | How large the heading is set. |
| Text | Formatted text. | A line or two under the heading. Optional. |
| Button label | Text. | The first button's text. Leave empty to hide the button. |
| Button link | Link. | Where the first button goes. |
| Second button label | Text. | The second button's text. Leave empty for one button. |
| Second button link | Link. | Where the second button goes. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Slide image | 3000 x 1800 px (5:3 landscape) | Use the same size for every slide, so the slideshow doesn't change shape between them. |
| Mobile image | 1200 x 1600 px (3:4 portrait) | Optional, per slide. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Two or three slides are plenty. Few customers see the fourth.
- Put your most important message on the first slide; it is the only one everyone sees.
- Keep the text in the same position on every slide, so the buttons don't jump around.