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

# Blum Slideshow

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

The Slideshow section shows up to 5 full-width slides that change automatically or when customers click the arrows. Each slide can be an image or a video, with its own heading, text, and buttons, so you can promote several campaigns in the space of one banner.

> **Note:** You can add this section to any template, except the header and footer. A Slideshow holds up to 5 slides. When you add it, it comes with 1 video slide and 2 image slides.
![Slideshow section on desktop, with heading, buttons, and slide controls](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/slideshow-1_eso8ac.png)

**What you can do**
- Add the section and your first slides
- Add a video slide, with a separate video for phones
- Control how slides change
- Link a whole slide to a page
- See what customers see
- Change the layout, content position, and colors
- Fix common problems

---

## Add the section and your first slides
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Slideshow**.
3. Click an **Image** slide. Under **Image**, select a **Background image**.
4. Optional: select a **Mobile background image (optional)**. If you don't add one, phones show the main image.
5. Under **Text**, enter a **Subheading**, **Heading**, and **Description**.
6. Under **Buttons**, enter a **Primary button label** and a **Primary button link**. Clear the label to hide the button.
7. To add another slide, click **Add block** > **Image** or **Video**.
8. Click **Save**.

> **Tip:** Use images with the same aspect ratio for every slide. The section keeps one height for all slides, so a wider or taller image is cropped differently from the others.

## Add a video slide, with a separate video for phones
1. Under **Slideshow**, click **Add block** > **Video**.
2. Under **Video**, choose a **Video source**: **External** (a YouTube or Vimeo link) or **Shopify-hosted** (a video you upload to Shopify).
3. Paste the **External video** link, or select a **Shopify-hosted video**.
4. Optional: under **Mobile video**, choose a **Video source** and add a second video for phones, for example a vertical cut. If you leave it empty, phones play the main video.
5. Turn **Enable video loop** on or off.
6. Click **Save**.

> **Note:** When **Enable autoplay** is on, a video that is longer than **Change slides every** is cut off and the slideshow moves to the next slide. Match the video length to the slide interval, or turn off autoplay.

## Control how slides change
1. Click the **Slideshow** section.
2. Under **Controller**, turn **Enable autoplay** on to change slides automatically.
3. Drag **Change slides every** to set how long each slide stays, from 3 to 10 seconds.
4. Turn **Show navigation** on to show the previous and next arrows, and **Show paginations as number** to show the slide counter (for example 2/3).
5. Click **Save**.

## Link a whole slide to a page
1. Click the slide.
2. Under **Link**, enter a **Slide link**.
3. Click **Save**.

The whole slide becomes clickable only when the slide has no working button. If a button has both a label and a link, customers use the button instead.

## What customers see
- **Slides:** each slide fills the section, with the text and buttons on top of the image or video. A mask overlay darkens the media so the text stays readable.
- **Controls:** customers move between slides with the arrows, or swipe on touch screens. When autoplay is on, a pause button lets them stop and restart the slideshow.
- **Videos:** videos start on their own, without sound and without player controls, like a moving background.
- **Phones:** screens up to 768 px wide show the mobile background image or mobile video when you add one.
- **Slide link:** a slide link opens in a new browser tab.
![Slideshow on a phone, with autoplay paused and the slide counter](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/slideshow-2_10y1k4d.png)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. Edit schemes in Theme settings > Colors. |
| Enable large heading | Shows slide headings in the larger headline size. Useful when the slideshow is the first section on the page. |
| Enable full-width banner | Stretches the slideshow to the full screen width. Turn it off to keep it inside the page margins. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Section height on large screen | Sets the height on desktop: 50% screen height, 70% screen height, Fill screen height, or Adapt to media (the height follows the image or video ratio). The section grows if the content needs more space. |
| Section height on small screen | Sets the height on phones, with the same options. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Controller
| Setting | What it does |
| ---- | ---- |
| Show paginations as number | Shows the slide counter, for example 1/3. |
| Show navigation | Shows the previous and next arrows. |
| Enable autoplay | Changes slides automatically and shows a pause button. |
| Enable parallax effect | Moves the slide images at a different speed from the page as customers scroll. |
| Change slides every | Sets how long each slide stays before the next one, from 3 to 10 seconds. |

### Content
| Setting | What it does |
| ---- | ---- |
| Content position | Places the text and buttons at Center, Left center, or Left bottom of each slide. |

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

### Image slide settings
| Setting | What it does |
| ---- | ---- |
| Mask overlay opacity | Sets how dark the mask over the image is, from 0% to 90%. |
| Mask overlay | Sets the color of the mask. The color picker sits right below Mask overlay opacity. |
| Content overlay | Sets the color of the text on the slide. |
| Subheading, Heading, Description | The text shown on the slide. |
| Background image | The slide image on desktop and tablets. |
| Mobile background image (optional) | A different image for phones. |
| Primary button label, Secondary button label | The button text. Leave a label empty to hide that button. |
| Primary button link, Secondary button link | Where the button goes. Appears after you enter the button label. |
| Slide link | Makes the whole slide clickable. Works only when no button has both a label and a link. |

### Video slide settings
| Setting | What it does |
| ---- | ---- |
| Mask overlay opacity, Mask overlay, Content overlay | Same as on image slides. |
| Enable video loop | Plays the video again from the start when it ends. |
| Subheading, Heading, Description | The text shown on the slide. |
| Video source (Video) | Chooses External (YouTube or Vimeo link) or Shopify-hosted for desktop and tablets. |
| External video | The YouTube or Vimeo link. Appears with External. |
| Shopify-hosted video | The uploaded video. Appears with Shopify-hosted. |
| Video source (Mobile video) | Chooses the source of the phone video: External or Shopify-hosted. |
| External video (Mobile video) | The YouTube or Vimeo link for phones. Appears with External. |
| Shopify-hosted (Mobile video) | The uploaded video for phones. Appears with Shopify-hosted. |
| Buttons and Slide link | Same as on image slides. |

## Troubleshooting
**My video slide is cut off before it ends.**
Autoplay moves to the next slide after the time in **Change slides every**. Shorten the video, set a longer interval (up to 10 seconds), or turn off **Enable autoplay**.

**The slide link doesn't work.**
The slide link is turned off when a button on that slide has both a label and a link. Clear the button link or label, or let customers use the button.

**Phones show the wrong image or video.**
Phones use **Mobile background image (optional)** or the **Mobile video** settings when they are filled. Check those settings on the slide.

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

**The text is hard to read on my image.**
Increase **Mask overlay opacity** on the slide, or change the **Content overlay** color.

## Related articles
- [Blum Image Banner](https://doc.ecomx.co/en/article/blum-image-banner-jzf00j/)
- [Blum Video Banner](https://doc.ecomx.co/en/article/blum-video-banner-umopmy/)
- [Blum Countdown banner section](https://doc.ecomx.co/en/article/blum-countdown-banner-section-yf2nwm/)
- [Blum Hero Image With Text](https://doc.ecomx.co/en/article/blum-hero-image-with-text-10ms29c/)