Slideshow
A full-width rotating banner, usually the first thing on the homepage. Each slide is a block with its own image, heading, text and buttons, so slides don't have to share a layout.
At a glance: Add it to any page with Add section. Holds up to 5 blocks.
Good for
- Opening the homepage with two or three campaigns at once
- Launching a new collection alongside an ongoing sale
- Giving each promotion its own image, text and buttons
How to add the section
- From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
- Open the page you want to edit from the dropdown at the top of the editor.
- In the left sidebar, click Add section.
- Search for Slideshow and select it.
- Drag it into position, adjust the settings below, and click Save.
Section settings
Layout
| Desktop size | Minimum height of the slideshow on desktop: about 440px for Small, 550px for Medium and 640px for Large. Full screen fills the browser window, and Adapt to first image uses the first slide's image proportions, so nothing is cropped. Slides grow taller if their text needs more room.
Choose Small, Medium (default), Large, Full screen or Adapt to first image. |
| Mobile size | Minimum height of the slideshow on phones: about 375px for Small, 450px for Medium and 500px for Large. Full screen fills the screen, and Adapt to first image follows the first slide's mobile image, or its desktop image when there's no mobile one.
Choose Small, Medium (default), Large, Full screen or Adapt to first image. |
| Enable full width | Stretches the section edge to edge instead of holding it inside the page container.
Off by default. |
Slideshow
| Autoplay | Starts playing automatically when the section comes into view. Keep it off when slides carry text shoppers need to read. Content that moves on its own is hard to follow, and harder still with a screen reader.
Off by default. |
| Autoplay speed | How long each slide stays on screen before the next one appears. Autoplay pauses while a shopper's mouse is over the slideshow.
Adjustable from 2s to 10s (default 5s). Only appears when Autoplay is on. |
| Transition | How one slide gives way to the next. Slide moves them sideways, and Fade cross-fades in place.
Choose Slide (default) or Fade. |
| Show arrows on desktop | Adds previous and next arrows at the sides of the slideshow on desktop. Arrows only appear when there are two or more slides.
On by default. |
| Show pagination dots | Adds a row of dots so shoppers can see how many slides there are and jump to one. When autoplay is on, the active dot fills up to show the time left. Dots only appear when there are two or more slides.
On by default. |
Appearance
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Blocks
Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.
Image slide block
Inside each Image slide you can add these nested blocks: Badge group, Heading, Text, Button group and Button. Click the block in the sidebar, then Add block beneath it.
Media
| Desktop image | Background image used on desktop.
2880 x 1280px (large) .jpg recommended. |
| Mobile image | A separate image used on mobile. Leave empty to reuse the desktop image.
800 x 1000px .jpg recommended. |
| Overlay opacity | Darkens the image behind the text so the text stays readable. Higher values mean a darker image.
Adjustable from 0% to 100% (default 40%). |
Desktop layout
| Content alignment | Text alignment on desktop.
Default: Center. |
| Content position | Where the text block sits over the image on desktop.
Choose Top left, Top center, Top right, Middle left, Middle center (default), Middle right, Bottom left, Bottom center or Bottom right. |
Mobile layout
| Content alignment | Text alignment on mobile.
Default: Center. |
| Content position | Where the text block sits over the image on mobile.
Choose Top left, Top center, Top right, Middle left, Middle center (default), Middle right, Bottom left, Bottom center or Bottom right. |
Appearance
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
Tips
- Lead with your strongest slide. Most shoppers never see slide three, so the first slide carries the section.
- Upload a separate mobile image. A wide 2880 x 1280px desktop image loses its subject on a phone. An 800 x 1000px mobile crop keeps it in frame.
- Keep text off the busy part of the photo. Use Content position to place text over empty space, and raise Overlay opacity if it's still hard to read.
- Use Adapt to first image for product shots. It sizes the slideshow to your image, so nothing gets cropped. Upload every slide at the same proportions.
Troubleshooting
The arrows or dots aren't showing
Arrows and dots only appear when the slideshow has two or more slides. Arrows are also desktop-only. Check that Show arrows on desktop and Show pagination dots are on.
The slideshow stops rotating
Autoplay pauses while the mouse is over the slideshow and starts again when it moves away. If it never rotates, turn on Autoplay in the section settings.
My image is cropped at the top and bottom
Fixed sizes like Medium crop the image to fill the frame. Choose Adapt to first image to use the image's own proportions, or move the subject toward the center of the photo.