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

# Electro How to Use Electro Slideshow

**Theme:** Electro · **Section type:** All-template section

A Slideshow shows up to 5 full-width slides, each with its own image, text, and 2 buttons. Use it at the top of your homepage to promote several collections or campaigns in the same space.

> **Note:** You can add this section to any template, but not to the header or footer. Each section holds up to 5 slides.

![Slideshow with Line controls on the right, on the Electro Nextron preset](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/ss1_tk08c.png)

**What you can do**
- Add the section and your slides
- Add text and buttons to a slide
- Change the slideshow controls and autoplay
- Set the slide height and content position
- See what customers see
- Look up every setting
- 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**. The section comes with 3 slides.
3. Click a **Slide** block. Under **Image**, select a **Background image**.
4. Optional: select a **Mobile background image (optional)**. If you don't add one, mobile shows the background image.
5. To add a slide, click **Add block** > **Slide**. To change the order, drag the slides in the sidebar.
6. Click **Save**.

> **Tip:** Use images with the same ratio for all slides, so the slideshow doesn't change height between slides. About 2880 x 1200 px is recommended for large screens and 750 x 1400 px for mobile.

## Add text and buttons to a slide
1. Click a **Slide** block.
2. Under **Text**, enter a **Subheading**, a **Heading**, and a **Description**.
3. Under **Buttons**, enter a **Button 1 label**, choose a **Button 1 style**, and add a **Button 1 link**. Do the same for Button 2, or leave its label empty to hide it.
4. Under **General**, choose a **Content position on large screen** and a **Content position on mobile**.
5. Optional: adjust **Overlay opacity** so the text is easy to read.
6. Click **Save**.

> **Note:** The heading size is set for the whole slideshow. Click the **Slideshow** section and change **Heading size** under **General**.

## Change the slideshow controls and autoplay
1. Click the **Slideshow** section.
2. Under **Controller**, choose a **Style** and a **Position**.
3. Turn **Show pagination** and **Show navigation** on or off.
4. Turn on **Enable autoplay** and set **Change slides every** to how long each slide stays on screen.
5. Click **Save**.

| Setting | What it does |
| ---- | ---- |
| Style | Shows the controls as Default (dots) or Line (short bars, with round arrow buttons). |
| Position | Places the controls at the Left, Center, or Right of the bottom of the slideshow. |
| Show pagination | Shows a dot or bar for each slide. Customers click one to go to that slide. |
| Show navigation | Shows the previous and next arrows. |
| Enable autoplay | Moves to the next slide automatically and shows a pause/play button. |
| Change slides every | Sets how long each slide shows during autoplay, from 3 to 10 seconds. |

## Set the slide height and content position
1. Click the **Slideshow** section.
2. Under **Layout**, choose a **Section height on large screen** and a **Section height on mobile**.
3. Click **Save**.

> **Tip:** Choose **Adapt to image** to show each image without cropping. If a slide's text needs more room than the height you choose, the slideshow grows to fit it.

## What customers see
- **Large screens:** one slide at a time, with its text and buttons at the content position you chose. The controls sit at the bottom of the slideshow.
- **Changing slides:** customers click the arrows or a dot or bar. With autoplay on, slides change on their own, and customers can stop and restart them with the pause/play button.
- **Mobile:** each slide shows its mobile image, or the main image if you didn't add one. Customers can also swipe between slides.
- **Buttons:** clicking a button opens its link.
![Second slide shown after clicking the next arrow, with autoplay paused](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/ss2_1cw4rac.png)


## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the text, buttons, and controls. |
| Heading size | Sets the heading size on every slide: Headline, H1, H2, or H3. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Section height on large screen | Sets the slideshow height on large screens: 50% screen height, 70% screen height, Fill screen height, or Adapt to image. |
| Section height on mobile | Sets the slideshow height on mobile, with the same options. |

### Controller
| Setting | What it does |
| ---- | ---- |
| Style, Position, Show pagination, Show navigation, Enable autoplay, Change slides every | See "Change the slideshow controls and autoplay" above. |

### Accessibility
| Setting | What it does |
| ---- | ---- |
| Slideshow description | Describes the slideshow for customers who use screen readers. It isn't shown on the page. |

### Slide settings
| Setting | What it does |
| ---- | ---- |
| Content position on large screen | Places the slide content at Top left, Top center, Middle left, Middle center, Bottom left, or Bottom center. |
| Content position on mobile | Places the slide content on mobile, with the same options. |
| Overlay opacity | Darkens the image so the text is easier to read, from 0 % to 90 %. |
| Custom mask overlay | Replaces the overlay color with a color you choose. |
| Custom text overlay | Replaces the text color on this slide with a color you choose. |
| Subheading | A short tagline above the heading. |
| Heading | The slide heading. |
| Description | A paragraph of text below the heading. |
| Background image | The main slide image. 2880 x 1200 px is recommended. |
| Mobile background image (optional) | A separate image for mobile. 750 x 1400 px is recommended. If empty, mobile shows the background image. |
| Button 1 label | The text on the first button. Leave it empty to hide the button. |
| Button 1 style | Sets the button style: Primary, Secondary, or Tertiary. |
| Button 1 link | The page the first button opens. |
| Button 2 label, Button 2 style, Button 2 link | The same settings for the second button. |

## Troubleshooting
**I can't add another slide.**
A Slideshow holds up to 5 slides. Remove a slide, or add a second Slideshow section.

**The slides don't change on their own.**
Turn on **Enable autoplay** under **Controller**. Customers can also pause autoplay with the pause/play button.

**The slideshow jumps in height between slides.**
With **Adapt to image**, each slide takes the ratio of its own image. Use images with the same ratio for all slides, or choose a fixed height such as **70% screen height**.

**I can't change the heading size on one slide.**
**Heading size** is a section setting and applies to all slides. Click the **Slideshow** section and change it under **General**.

## Related articles
- [Electro Image banner](https://help.ecomx.co/en/article/electro-how-to-use-electro-image-banner-section-mxjav/)
- [Electro Moving image banner](https://help.ecomx.co/en/article/electro-how-to-use-electro-moving-image-banner-1xxmm8e/)
- [Electro Video banner](https://help.ecomx.co/en/article/electro-how-to-use-electro-video-banner-1uqofi1/)
- [Electro Theme settings](https://help.ecomx.co/en/article/electro-theme-settings-2ubwqk/)