Slideshow

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.

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

1. In your Shopify admin, go to Online Store > Themes and click Customize next to Fragments.

2. Use the page selector at the top of the editor to open the page you want to edit, for example Home page.

3. In the sidebar, click Add section and select Slideshow.

4. 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:

• On desktop: previous and next arrows, a progress bar, a slide counter (01, 02, 03…) and cards for the upcoming slides showing their image, heading and text. Clicking a card opens that slide.

• On mobile: the arrows, progress bar and counter are hidden. Small image thumbnails of all slides appear under the text instead, and visitors tap one to switch 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:

1. Select the Slideshow section.

2. Under Autoplay, check Enable autoplay.

3. 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:

1. Slideshow is the first section on the page.

2. Allow transparent header is checked in the Slideshow settings (it's on by default).

3. 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

Related articles

• Header

• Color schemes

• Image banner

• Adding, reordering and hiding sections

Still stuck? Contact Fragments support and we'll get back to you within two business days.