Slideshow
The Slideshow section allows you to display multiple slides that transition either automatically or manually. This is a great way to highlight promotions, feature products, or tell a visual story.
Settings
| Setting | Description |
|---|---|
| Automatically advance slides | Enables autoplay. When turned on, slides will automatically advance after a set time. |
| Advance every | Defines how many seconds to wait before advancing to the next slide. Only active if autoplay is enabled. |
| Transition style | Choose how slides transition: Slide (slides move horizontally) or Fade (crossfade effect). |
| Section height | See shared settings > Section height. Associated settings below. |
| Animate on slide | When enabled, triggers content animations as each slide appears. |
Shared settings
These settings are common to several sections and work the same way wherever they appear. Once you learn how they work in one place, you'll recognize them elsewhere.
Section height
Your choice between a custom height or using the sections media height will determine the total height of the section.
| Setting | Description |
|---|---|
| Section height | Select between Slide height or a custom height. |
| Custom desktop height | Set a specific height for the section on desktop screens, in viewport height (vh). Only applies if Section height is set to 'Custom height' |
| Custom mobile height | Same as above applying to mobile screens. |
Visual example.
If Section height is set to Slide height, you can avoid layout shifts by using slide images that use the same aspect ratio.
Overlay content
Overlay content settings control how text, buttons, and other elements appear on top of media. These settings allow you to adjust positioning, layout, and readability.
| Setting | Description |
|---|---|
| Show content background | When enabled, displays a background behind text content, using the selected 'Content background color scheme' colors. Helps improve readability over images. |
| Content background color scheme | Select a predefined color scheme for your content and content background. Only applies if 'Show content background' is enabled. |
| Show background gradient | Show your predefined background gradient associated with the selected 'Content background color scheme'. Only applies if 'Show content background' is enabled.. |
| Content alignment | Controls the position of inner content blocks. |
| Mobile content alignment | Adjusts content positioning specifically for mobile devices. |
| Content max width | Sets the maximum width (in pixels) of the text content area. Useful for limiting line length and improving visual layout. |
Visual example.
Block - slide
Each slide in the Slideshow section includes its own content and styling options. These settings control the appearance and layout of the individual slide.
| Setting | Description |
|---|---|
| Color scheme | Select a predefined color scheme. The background color is used for overlays. |
| Image overlay opacity | Adds a semi-transparent overlay on top of the image using the selected scheme background. Use this to improve text readability. |
| Desktop image | Select the default image. |
Mobile image * | Optional. Upload a different image optimized for smaller screens. If left blank, the desktop image will be used on all devices. |
| Slide content | See shared block settings > Overlay content. Associated settings below. |
Blocks - Nested
Blocks are individual content elements that make up parts of a Section layout. Each block controls a specific piece of content, giving you detailed control over how your store looks and functions.
View the Blocks documentation to learn more.