Skip to content
Slideshow
Section overview
The Slideshow section allows for the creation of an interactive banner carousel with customizable content slides, supporting both image and video backgrounds with text overlays and navigation controls.
Common use cases
- Showcasing multiple promotional banners or announcements in a single space
- Highlighting featured products or collections with eye-catching visuals
- Creating an engaging homepage hero section with multiple messages
- Displaying seasonal campaigns or promotional offers in rotation
Usage tips
- Use high-quality images with good contrast to ensure text remains readable
- Keep slide content concise and focused on a single call-to-action per slide
- Consider mobile users by ensuring text remains legible on smaller screens
- Limit the number of slides to 3-4 to maintain user engagement
- When using auto-scroll, set a reasonable delay (5-7 seconds) to allow users to read content
- Test the slideshow on both desktop and mobile to ensure proper responsiveness
Section settings
| Setting | Description |
|---|---|
| Auto scroll delay | Sets the time in seconds between automatic slide transitions. Set to 0 to disable auto-scrolling. |
| Y spacing | Controls the vertical height of the slideshow. Options range from extra small to extra large. |
| Color border | Sets the color of the border. Choose between subtle or strong. |
| Border position | Determines where borders appear. Options include none, top, bottom, or top and bottom. |
| Enable margin | When enabled, adds horizontal margin to the slideshow. |
| Enable border margin | When enabled, adds rounded corners and padding to the slideshow. |
| Enable max width | When enabled, limits the width of the text content. |
| Visibility | Controls on which devices the slideshow appears. Options include all devices, mobile only, or desktop only. |
Block settings
Content
This block type allows for the creation of individual slides within the slideshow, each with customizable content, background media, and styling options.
Block limit: 4
| Setting | Description |
|---|---|
| Heading | The main title displayed on the slide. |
| Content | Rich text content displayed below the heading. |
| Url | Makes the entire slide clickable, linking to the specified URL. |
| Image background desktop | Background image displayed on desktop devices. |
| Image background mobile | Background image displayed on mobile devices. If not set, the desktop image will be used. |
| Video background | Background video that plays behind the slide content. |
| Show entire image | When enabled, shows the entire image without cropping. |
| Show video on mobile | When enabled, plays the background video on mobile devices. |
| Button label | Text displayed on the primary call-to-action button. |
| Button url | URL the primary button links to when clicked. |
| Color button | Style option for the primary button. Options include primary, secondary, tertiary, neutral, plain, outline, inverted outline, link, and inverted link. |
| Secondary button label | Text displayed on the secondary call-to-action button. |
| Secondary button url | URL the secondary button links to when clicked. |
| Secondary color button | Style option for the secondary button. Options include primary, secondary, tertiary, neutral, plain, outline, inverted outline, link, and inverted link. |
| Color scheme | Sets the background and text color theme for the slide. |
| Color text | Forces text color to be light or dark, overriding the color scheme. |
| Enable gradient | When enabled, adds a gradient overlay to the background. |
| Enable background overlay | When enabled, adds a background to the text for better readability. |
| Y alignment | Controls the vertical alignment of content within the slide. Options include top, middle, or bottom. |
| X alignment | Controls the horizontal alignment of content within the slide. Options include left, center, or right. |