Shine Slideshow Banner

Theme: Shine · Section type: All-template section

A Slideshow banner section shows up to 5 full-width slides that change automatically. Each slide has its own image, text, and buttons, so you can feature several collections or promotions in one place.

Note: You can add this section to any template, except the header and footer. Each section holds up to 5 slides. The section comes with 3 slides.

Slideshow banner slide with heading, two buttons, and slideshow controls

What you can do

Add the section and your slides
Add buttons or a link to a slide
Control autoplay and navigation
Make the text easy to read
See what customers see
Change the height and content position
Fix common problems

Add the section and your slides

In the theme editor, open the template where you want the section.
In the left sidebar, click Add section > Slideshow banner. The section comes with 3 slides.
Click a Slide block.
Under Image, select a Background image.
Optional: select a Mobile background image. If you don't add one, mobile shows the background image.
Under Text, enter a Subheading, a Heading, and a Description.
To add another slide, click Add block > Slide.
Click Save.

Tip: Use background images with the same ratio for all slides, as the theme editor recommends. This keeps the section height steady when the slides change.

Add buttons or a link to a slide

Each slide can have up to 2 buttons, or one link on the whole slide.

Click a Slide block.
Under Button, enter a Button 1 label and select a Button 1 link.
Optional: enter a Button 2 label and select a Button 2 link.
To make the whole slide clickable instead, clear both button labels. Then, under Link, select a Link.
Click Save.

Note: A slide's Link is inactive while either button has a label.

Click the Slideshow banner section.
Under Controller, select Enable autoplay to change slides automatically.
Drag Change slides every to set how long each slide stays on screen, from 3 to 10 seconds.
Select Show navigation to show the previous and next arrows, and Show pagination to show the slide dots.
Click Save.

Make the text easy to read

Click a Slide block.
Under Custom color, select a Mask overlay color. If you don't select one, the overlay uses the background color of the section's color scheme.
Drag Overlay opacity to darken or lighten the image, from 0 % to 90 %.
Optional: select a Text overlay color to change the color of the slide's text.
Click Save.

Tip: Check every slide on mobile. Text that is easy to read on a wide image can sit on a busy part of a narrow image.

What customers see

Slides: each slide fills the width of the page. The slideshow loops, so the first slide follows the last one.
Autoplay: when autoplay is on, the slides change at the speed you set. A pause button sits next to the arrows, and customers can click it to stop or restart autoplay.
Arrows and swiping: customers move between slides with the arrows, or by swiping on touch screens. Clicking an arrow stops autoplay.
Pagination: the dots at the bottom show which slide is active.
Buttons and links: customers click a button to open its link. If a slide has no buttons, clicking anywhere on the slide opens the slide's Link.
Mobile: below 1025 px, slides show the mobile background image, and the Mobile screen height and content position apply.

Paused slideshow with the play button, arrows, and pagination dots

Settings reference

General

Setting	What it does
Color scheme	Sets the colors of the section. You edit color schemes in Theme settings > Colors.
Heading size	Sets the size of the slide headings: Headline, H1, H2, or H3.

Controller

Setting	What it does
Show pagination	Shows dots that mark the active slide.
Show navigation	Shows the previous and next arrows.
Enable autoplay	Changes slides automatically and shows a pause button.
Change slides every	Sets how long each slide stays on screen, from 3 to 10 seconds.

Large screen and Mobile screen

Setting	What it does
Section height	Sets the height of the slides: 50% screen, 70% screen, Fill screen, or Adapt to image. The section grows if the content needs more space. When the slideshow is the first section, the height doesn't include the header.
Content position	Places the text at Top left, Top center, Middle left, Middle center, Bottom left, or Bottom center.

Accessibility

Setting	What it does
Slideshow description	Describes the slideshow for customers who use screen readers.

Slide settings

Setting	What it does
Subheading	Adds a short line of text above the heading.
Heading	Sets the slide heading. To highlight part of the heading, put it between [ and ]. You choose the highlight style in Theme settings > Typography.
Description	Adds text below the heading.
Background image	Sets the slide image on large screens.
Mobile background image	Replaces the image on screens below 1025 px. If you don't add one, the background image is used.
Link	Makes the whole slide clickable. See "Add buttons or a link to a slide" above.
Button 1 label	Sets the text of the first button. If you leave it empty, the button is hidden.
Button 1 style	Shows the first button as Filled, Outlined, or Text link.
Button 1 link	Sets the page that the first button opens.
Button 2 label	Sets the text of the second button. If you leave it empty, the button is hidden.
Button 2 style	Shows the second button as Filled, Outlined, or Text link.
Button 2 link	Sets the page that the second button opens.
Mask overlay	Sets the color of the layer over the image. See "Make the text easy to read" above.
Overlay opacity	Sets how strong the overlay is, from 0 % to 90 %.
Text overlay	Changes the color of the slide's text.

Troubleshooting

Clicking the slide doesn't open my link.
The slide Link works only when both Button 1 label and Button 2 label are empty. Clear the labels, or set the button links instead.

I can't add a sixth slide.
A Slideshow banner section holds up to 5 slides. To show more, add a second Slideshow banner section.

The slideshow stopped changing slides.
Autoplay stops after a customer clicks an arrow or the pause button. If it never starts, check that Enable autoplay is selected under Controller.

The section height jumps between slides.
With Adapt to image, each slide takes the height of its own image. Use images with the same ratio, or choose a fixed Section height.

The text overflows the slide on mobile.
Shorten the text, or choose a taller Section height under Mobile screen.

In other themes: Blum Slideshow · Electro Slideshow · Normcore Slideshow

Updated on: 22/10/2026

Was this article helpful?

Thank you!