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.
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
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Slideshow.
- Click an Image slide. Under Image, select a Background image.
- Optional: select a Mobile background image (optional). If you don't add one, phones show the main image.
- Under Text, enter a Subheading, Heading, and Description.
- Under Buttons, enter a Primary button label and a Primary button link. Clear the label to hide the button.
- To add another slide, click Add block > Image or Video.
- 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
- Under Slideshow, click Add block > Video.
- Under Video, choose a Video source: External (a YouTube or Vimeo link) or Shopify-hosted (a video you upload to Shopify).
- Paste the External video link, or select a Shopify-hosted video.
- 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.
- Turn Enable video loop on or off.
- 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
- Click the Slideshow section.
- Under Controller, turn Enable autoplay on to change slides automatically.
- Drag Change slides every to set how long each slide stays, from 3 to 10 seconds.
- 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).
- Click Save.
Link a whole slide to a page
- Click the slide.
- Under Link, enter a Slide link.
- 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.
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
Updated on: 23/10/2026
Thank you!