Layout block: Color slideshow
| 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. |
| 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. |
| Pause autoplay 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. |
| 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. |
| Controls position on mobile | Choose where the controls are positioned on mobile devices: Left, Center, or Right. Only available when Slideshow controls is not set to None. |
| Image height | Use the slider to set a fixed image height on desktop. The range is 200px to 1200px. |
| Image height on mobile | Use the slider to set a fixed image height on mobile devices. The range is 100px to 600px. |
| 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:
- Pause autoplay on hover and Autoplay delay appear only when Autoplay is turned on.
- Controls position and Controls position on mobile appear only when Slideshow controls is not set to None.
Note: this block requires nested Color slideshow slide blocks to add its actual slides/colors — the fields above only control the slideshow container's width, spacing, autoplay, controls, and image height.
Slide card setting
| Setting | Description |
|---|---|
| Color scheme | Choose the color scheme applied to this slide card's background and text. |
| Card corner radius | Use the slider to set how rounded the corners of the card are. The range is 0px to 100px. |
| Card width | Use the slider to set the card's width on desktop as a percentage of the slideshow. The range is 20% to 100%. |
| Card width on tablet | Use the slider to set the card's width on tablet as a percentage of the slideshow. The range is 20% to 100%. |
| Card width on mobile | Use the slider to set the card's width on mobile devices as a percentage of the slideshow. The range is 30% to 100%. |
| Padding top | Use the slider to set the spacing above the card's content on desktop. The range is 0px to 100px. |
| Padding bottom | Use the slider to set the spacing below the card's content on desktop. The range is 0px to 100px. |
| Padding left | Use the slider to set the spacing to the left of the card's content on desktop. The range is 0px to 100px. |
| Padding right | Use the slider to set the spacing to the right of the card's content on desktop. The range is 0px to 100px. |
| Padding top mobile | Use the slider to set the spacing above the card's content on mobile devices. The range is 0px to 100px. |
| Padding bottom mobile | Use the slider to set the spacing below the card'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 card'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 card's content on mobile devices. The range is 0px to 100px. |
Note: each Slide card requires a nested Color variant image block (visible in the sidebar) to display its product color image — the fields above only control the card's background, corner radius, width, and padding.