§13 / SECTIONS
REF: TG–DOC–13 · REV. 1.7
Slideshow
The Slideshow section (
sections/slideshow.liquid) shows up to six full-width slides. Each slide has an image (plus optional mobile image) or a video, text, up to two buttons and its own overlay and color scheme. Shoppers swipe or scroll between slides, or use the dots.TANGENT 1.7 / SHOPIFY OS 2.0 / UPDATED 2026-10-19
Setup
- Add Slideshow (category Banners). The preset includes two slides.
- Set a Slideshow name. Screen readers announce it.
- Choose Height, and turn Auto-rotate slides on or off.
- For each slide, add an Image and, optionally, a Mobile image (used up to 749 px wide). Add a Video to play it muted on loop instead of the image.
Section settings
| Setting | ID | Type | Default | Options / notes |
|---|---|---|---|---|
| Slideshow name | label | Text | Featured | Read out by screen readers. |
| Height | height | Select | Full screen |
|
| Auto-rotate slides | autoplay | Checkbox | On | A pause button is always shown. Rotation stops for shoppers who prefer reduced motion. |
| Time per slide | speed | Range 3–12 s, step 1 | 6 s |
Slide heights: Full screen 100svh, Large min(86svh, 880px), Medium min(64svh, 640px), Small min(44svh, 440px).
Slide block (slide)
Maximum six slides per section.
| Setting | ID | Type | Default | Options / notes |
|---|---|---|---|---|
| Image | image | Image | — | |
| Mobile image | image_mobile | Image | — | Used on screens up to 749 px wide. |
| Video | video | Video | — | Plays muted on loop instead of the image. |
| Text above heading | label | Text | New season | |
| Heading | heading | Inline rich text | The new collection | |
| Text | text | Rich text | — | |
| First button label | button_1 | Text | Shop now | |
| First button link | link_1 | URL | — | Falls back to the all-products collection. |
| Second button label | button_2 | Text | — | |
| Second button link | link_2 | URL | — | Falls back to the all-products collection. |
| Content position | position | Select | Bottom left |
|
| Overlay opacity | overlay | Range 0–90%, step 5 | 40% | |
| Color scheme | color_scheme | Color scheme | scheme-3 |
Controls
- Dots: shown when there are two or more slides. The active dot fills over the slide duration.
- Pause button: shown when auto-rotate is on or any slide has a video. It pauses rotation and slide videos.
- There are no previous/next arrows.
Rotation also pauses on mouse hover, on keyboard focus inside the slideshow, when the slideshow is off screen, and when the browser tab is hidden. In the theme editor, selecting a slide block shows that slide and pauses rotation.
Structure
1<slide-show> (sections/slideshow.liquid)2├── Track (CSS scroll-snap, data-slides)3│ └── Slide blocks (role="group"): media, overlay, label, heading, text, buttons4└── Controls5 ├── Dots (one per slide)6 └── Pause / play buttontext
For developers
Last updated for Tangent 1.7