Layout block: 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. |
| Vertical alignment | Choose how slides are vertically aligned within the slideshow: Top, Center, or Bottom. |
| Slides per view | Use the slider to set how many slides are visible at once on desktop. The range is 1 to 6. |
| Slides per view tablet | Use the slider to set how many slides are visible at once on tablet. The range is 1 to 6. |
| Slides per view mobile | Use the slider to set how many slides are visible at once on mobile devices. The range is 1 to 3. |
| 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 10s. |
| 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:
- 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.
Note: this block requires nested Slide blocks to add its actual slides — the fields above only control the slideshow's layout, columns, spacing, autoplay, and controls.
Slide settings
| Setting | Description |
|---|---|
| Style | Choose how the slide looks: Standard (no card background) or Card (adds a background color and rounded corners). |
| Color scheme | Choose the color scheme applied to the slide's card background and text. Only available when Style is set to Card. |
| Card border radius | Use the slider to set how rounded the corners of the card are. Only available when Style is set to Card. The range is 0px to 100px. |
| 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. |
Field visibility conditions:
- Color scheme and Card border radius appear only when Style is set to Card.
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 style, color, and padding.