Slideshow
Rotate full-width image slides with a heading, text and up to two buttons. Works best as the first section on your home page.
Last updated 37 minutes ago
The Slideshow section shows a series of full-width image slides. Each slide has its own image, subheading, heading, text and up to two buttons. Visitors move between slides with the arrow buttons or by clicking a preview of an upcoming slide, and you can let the slides change automatically.
Use it as the first section on your home page to introduce your brand, a new collection or a seasonal campaign. When it's the first section, your header can sit transparently on top of it.
Where you can use it
On any page template: home page, product, collection, blog, pages and more.
Not in the header or footer areas.
Add a Slideshow
In your Shopify admin, go to Online Store > Themes and click Edit theme next to Fragments.
Use the page selector at the top of the editor to open the page you want to edit, for example Home page.
In the sidebar, click Add section and select Slideshow.
Drag the section to the top of the page if you want it to be the first thing visitors see.
A new Slideshow comes with four sample slides. Replace their images and text with your own.
Manage slides
Each slide is an Image slide block inside the section.
Add a slide: click Add Image slide under the Slideshow section in the sidebar.
Reorder slides: drag a slide up or down by its handle.
Hide a slide without deleting it: click the eye icon next to it.
Delete a slide: select it and click Remove block at the bottom of its settings.
When you select a slide in the sidebar, the preview jumps to that slide, so you can see your changes straight away.
What visitors see with two or more slides:
With only one slide, these controls are hidden.
Tip: 3–5 slides is usually the sweet spot. Visitors rarely see more than that.
Choose images
Each slide has two image settings:
Image (Desktop) is shown on screens wider than 768 px.
Image (Mobile) is shown on screens up to 768 px wide. If you leave it empty, the desktop image is used and cropped to fit the taller mobile layout.
Images always fill the whole slide and are cropped to fit, so keep the main subject away from the edges.
Overlay opacity adds a dark gradient over the image, slightly stronger at the bottom, so white text stays readable. Set it from 0% (no overlay) to 100%. The default is 35%.
Edit text and buttons
Subheading, Heading and Text appear in that order. Leave any of them empty to hide it.
Under Typography, set the size of each text element separately for desktop and mobile, for example a large heading on desktop and a smaller one on mobile.
Each slide can show two buttons: First button and Second button. Each has a Label, a Link and a Style (Primary, Secondary, Outline or Link).
A button only appears when its Label is filled in. By default, the first button reads "Explore products" and links to all products, and the second button is empty, so it's hidden.
Adjust height, position and spacing
Section height (Desktop) and Section height (Mobile) control how tall the slideshow is. Auto makes it just tall enough for the text and buttons. The other options set a minimum height:
If the content needs more room, the slideshow grows taller. When the header is transparent, the header's height is added on top so your content isn't hidden behind it.
Content vertical alignment (Desktop): places the text at the top left, middle left or bottom left of the slide.
Content horizontal alignment (Mobile): places the text at the bottom of the slide, aligned left, center or right.
Content maximum width: limits how wide the text block can get (400–1200 px). Lower values make long headings wrap onto more lines.
Spacing top / Spacing bottom: adds space above and below the slide text. Desktop and mobile have separate values.
Show border bottom: adds a thin line under the section.
Turn on autoplay
Autoplay is off by default. To turn it on:
Select the Slideshow section.
Under Autoplay, check Enable autoplay.
Set the Autoplay interval, how long each slide stays on screen, from 3 to 10 seconds. The default is 5 seconds.
Autoplay pauses while a visitor hovers over the slideshow, or touches it on mobile, and resumes afterwards. Clicking an arrow restarts the timer.
Use a transparent header
The header can sit transparently on top of the first slide, so your image runs right to the top of the page. This needs three things:
Slideshow is the first section on the page.
Allow transparent header is checked in the Slideshow settings (it's on by default).
Make header transparent is checked in the Header section settings (also on by default). Use Transparent header text color to choose a color that reads well on your images.
If your header is sticky, it switches back to its normal background once visitors scroll past it.
Set colors
The section's Color scheme sets the colors of the slideshow controls: the arrows, the counter and the progress bar.
Each slide's Color scheme sets the colors of that slide's text and buttons, so you can use light text on a dark image and dark text on a light one.
To edit the color schemes themselves, open Theme settings > Color schemes.
Settings reference
Section settings
Image slide settings
Good to know
The first slide's image loads first, so use your strongest image there.
Visitors who have turned on "reduce motion" on their device see a simple slide change instead of the animated transition.
Keep headings short. Long headings wrap onto several lines on mobile and can cover most of the image.
Troubleshooting
I don't see the arrows or slide previews.
I don't see the arrows or slide previews.
They only appear when the section has two or more slides. Add another Image slide, or check that your slides aren't hidden.
My header isn't transparent.
My header isn't transparent.
Check the three requirements under Use a transparent header above. The most common cause is another section, such as a spacer or rich text, sitting above the Slideshow on the page.
My image is cropped badly on mobile.
My image is cropped badly on mobile.
Add a portrait image in Image (Mobile). Without it, the desktop image is cropped to fit the taller mobile layout.
My button isn't showing.
My button isn't showing.
Fill in its Label. A button with an empty label is hidden even if it has a link.
The text is hard to read.
The text is hard to read.
Increase Overlay opacity, or switch the slide's Color scheme to one with higher contrast against your image.
Related articles
Header
Color schemes
Image banner
Adding, reordering and hiding sections
Was this helpful?
Still need help? Ask the team