Slideshow
Section overview
The Slideshow section allows you to create a responsive banner slideshow with multiple slides, each containing background images or videos with text overlays.
Common Use Cases
Hero banners on homepage to showcase promotions or collections
Product announcements with strong visual impact
Seasonal campaigns or featured content rotations
Brand storytelling through a sequence of banner slides
Usage Tips
For best results, use high-quality images with good contrast to ensure text overlays remain readable
Keep text content concise and impactful to maintain visual hierarchy
Consider mobile users by keeping essential information visible on smaller screens
Use auto-scroll feature judiciously - slower scroll speeds (5+ seconds) work best for readability
Section Settings
Color border
Choose border color style (subtle or strong)
Y spacing
Control the vertical height of the slideshow (extra small to extra large)
Border position
Set where borders appear (none, top, bottom, or both)
Enable header overlap
Allow the slideshow to overlap with the header for a seamless look
Enable margin
Add horizontal margin to the slideshow content
Enable border margin
Add padding inside the borders
Enable max width
Limit the text content width for better readability
Arrow alignment
Position navigation arrows horizontally (left, center, or right)
Arrow placement
Position navigation arrows vertically (top, bottom, or under the slideshow)
Visibility
Control where the slideshow appears (all devices, mobile only, or desktop only)
Auto scroll delay
Set time between automatic slide transitions (0-20 seconds)
Block Settings
Content Block
The Content block allows you to create individual slides within the slideshow, each with its own visual background, text content, and buttons.
Block limit: 4
Heading
Main title text for the slide
Content
Rich text area for descriptive content
URL
Link for the entire slide (optional)
Desktop background image
Background image optimized for desktop view
Mobile background image
Background image optimized for mobile view (falls back to desktop if not set)
Video background
Background video for the slide
Show entire image
Toggle between containing the full image or covering the entire area
Show video on mobile
Enable/disable video playback on mobile devices
Button label
Text for the primary call-to-action button
Button URL
Link destination for the primary button
Button color
Style option for the primary button appearance
Secondary button label
Text for the additional call-to-action button
Secondary button URL
Link destination for the secondary button
Secondary button color
Style option for the secondary button appearance
Color scheme
Background color theme for the slide
Text color
Force light or dark text color, or use theme default
Enable gradient
Add a subtle gradient overlay to improve text visibility
Enable background overlay
Add a background behind text content for better contrast
Vertical alignment
Position content vertically (top, middle, or bottom)
Horizontal alignment
Position content horizontally (left, center, or right)
Last updated
Was this helpful?