> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/slideshow-1_1iggpie.jpg)

**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
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Slideshow banner**. The section comes with 3 slides.
3. Click a **Slide** block.
4. Under **Image**, select a **Background image**.
5. Optional: select a **Mobile background image**. If you don't add one, mobile shows the background image.
6. Under **Text**, enter a **Subheading**, a **Heading**, and a **Description**.
7. To add another slide, click **Add block** > **Slide**.
8. 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.

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

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

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

## Make the text easy to read
1. Click a **Slide** block.
2. 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.
3. Drag **Overlay opacity** to darken or lighten the image, from 0 % to 90 %.
4. Optional: select a **Text overlay** color to change the color of the slide's text.
5. 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](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/slideshow-2_txxp89.jpg)


## 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**.

## Related articles
- [Shine Image Banner](https://doc.ecomx.co/en/article/shine-image-banner-12txcz9/)
- [Shine Video Banner](https://doc.ecomx.co/en/article/shine-video-banner-4gepr1/)
- [Shine Compacted Banner](https://doc.ecomx.co/en/article/shine-compacted-banner-1jn034g/)
- [Shine Header](https://doc.ecomx.co/en/article/shine-header-1cp1uks/)
- [Shine Typography](https://doc.ecomx.co/en/article/shine-typography-6k6p3o/)

**In other themes:** [Blum Slideshow](https://doc.ecomx.co/en/article/blum-slideshow-8jnt92/) · [Electro Slideshow](https://doc.ecomx.co/en/article/electro-how-to-use-electro-slideshow-1k0sydt/) · [Normcore Slideshow](https://doc.ecomx.co/en/article/normcore-slideshow-1maypqe/)