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.