Layout block: Banner slideshow
General settings
| Setting | Description |
|---|---|
| Slideshow width | Choose whether the slideshow stretches to Full width of the browser window or stays within the Container width of the page. |
| Slideshow height type | Choose how the slideshow's height is measured: Percentage (relative to the viewport) or Pixels (a fixed size). |
| Slideshow height percentage | Use the slider to set the slideshow's height on desktop as a percentage of the viewport. Only available when Slideshow height type is set to Percentage. The range is 40% to 120%. |
| Slideshow height percentage mobile | Use the slider to set the slideshow's height on mobile devices as a percentage of the viewport. Only available when Slideshow height type is set to Percentage. The range is 40% to 200%. |
| Slideshow height pixels | Use the slider to set a fixed slideshow height on desktop. Only available when Slideshow height type is set to Pixels. The range is 400px to 1400px. |
| Slideshow height pixels mobile | Use the slider to set a fixed slideshow height on mobile devices. Only available when Slideshow height type is set to Pixels. The range is 100px to 1000px. |
| Horizontal gap | Use the slider to set the spacing between slides on desktop. The range is 0px to 100px. |
| Horizontal gap tablet | Use the slider to set the spacing between slides on tablet. The range is 0px to 100px. |
| Horizontal gap mobile | Use the slider to set the spacing between slides on mobile devices. The range is 0px to 60px. |
| Autoplay | Turn this on to have the slideshow advance through slides automatically. |
| Autoplay pause on hover | Turn this on to pause autoplay while a shopper is hovering over the slideshow. Only available when Autoplay is turned on. |
| Autoplay delay | Use the slider to set how long each slide is shown before advancing automatically. Only available when Autoplay is turned on. The range is 0s to 30s. |
| Scroll speed | Use the slider to set how long the transition animation takes when moving between slides. The range is 0.5s to 30s. |
| Slideshow controls | Choose what navigation controls are shown: None, Arrows, Pagination, or Scrollbar. |
| Slideshow controls position | Choose where the controls are positioned on desktop: Top left, Top center, Top right, Bottom left, Bottom center, or Bottom right. Only available when Slideshow controls is not set to None. |
| Slideshow controls position mobile | Choose where the controls are positioned on mobile devices: Left, Center, or Right. Only available when Slideshow controls is not set to None. |
| Padding top | Use the slider to set the spacing above the slideshow on desktop. The range is 0px to 100px. |
| Padding bottom | Use the slider to set the spacing below the slideshow on desktop. The range is 0px to 100px. |
| Padding left | Use the slider to set the spacing to the left of the slideshow on desktop. The range is 0px to 100px. |
| Padding right | Use the slider to set the spacing to the right of the slideshow on desktop. The range is 0px to 100px. |
| Padding top mobile | Use the slider to set the spacing above the slideshow on mobile devices. The range is 0px to 100px. |
| Padding bottom mobile | Use the slider to set the spacing below the slideshow on mobile devices. The range is 0px to 100px. |
| Padding left mobile | Use the slider to set the spacing to the left of the slideshow on mobile devices. The range is 0px to 100px. |
| Padding right mobile | Use the slider to set the spacing to the right of the slideshow on mobile devices. The range is 0px to 100px. |
Field visibility conditions:
- Slideshow height percentage and Slideshow height percentage mobile appear only when Slideshow height type is set to Percentage.
- Slideshow height pixels and Slideshow height pixels mobile appear only when Slideshow height type is set to Pixels.
- Autoplay pause on hover and Autoplay delay appear only when Autoplay is turned on.
- Slideshow controls position and Slideshow controls position mobile appear only when Slideshow controls is not set to None.
Slide settings
| Setting | Description |
|---|---|
| Color scheme | Choose the color scheme applied to this slide's background and text. |
| Card border radius | Use the slider to set how rounded the corners of the slide card are. The range is 0px to 100px. |
| Image | Upload the image to display on this slide (desktop). |
| Image mobile | Upload a separate image to display on this slide for mobile devices. |
| Desktop content position | Choose where the slide's content is positioned on desktop: Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center, or Bottom right. |
| Mobile content position | Choose where the slide's content is vertically positioned on mobile devices: Top, Center, or Bottom. |
| Desktop content alignment | Choose how the slide's content is text-aligned on desktop: Left, Center, or Right. |
| Mobile content alignment | Choose how the slide's content is text-aligned on mobile devices: Left, Center, or Right. |
| Padding top | Use the slider to set the spacing above the slide's content on desktop. The range is 0px to 100px. |
| Padding bottom | Use the slider to set the spacing below the slide's content on desktop. The range is 0px to 100px. |
| Padding left | Use the slider to set the spacing to the left of the slide's content on desktop. The range is 0px to 100px. |
| Padding right | Use the slider to set the spacing to the right of the slide's content on desktop. The range is 0px to 100px. |
| Padding top mobile | Use the slider to set the spacing above the slide's content on mobile devices. The range is 0px to 100px. |
| Padding bottom mobile | Use the slider to set the spacing below the slide's content on mobile devices. The range is 0px to 100px. |
| Padding left mobile | Use the slider to set the spacing to the left of the slide's content on mobile devices. The range is 0px to 100px. |
| Padding right mobile | Use the slider to set the spacing to the right of the slide's content on mobile devices. The range is 0px to 100px. |
Note: each Slide block can also contain its own nested blocks (Image, Text, Button, Spacer, Divider, or app blocks) to build its content — the fields above only control the slide's card, background image, and content positioning.