§16 / SECTIONS
REF: TG–DOC–16 · REV. 1.7
Video reels
The Shoppable videos section (
sections/video-reels.liquid) shows a scrolling row of short videos. Each video can be linked to a product. A linked product shows a card over the video with its image, title, price and an add-to-cart button.TANGENT 1.7 / SHOPIFY OS 2.0 / UPDATED 2026-10-19
Setup
- In the theme editor, add Shoppable videos (category Video). The preset includes four videos.
- Set Text above heading and Heading.
- Set Videos shown on desktop and Media shape.
- For each Video block (up to 12), upload a video and choose Product in this video.
Upload vertical videos (9:16) to Shopify. Each video plays muted while it is on screen and stops for shoppers who prefer reduced motion.
Section settings
| Setting | ID | Type | Default | Options |
|---|---|---|---|---|
| Text above heading | label | Text | Watch and shop | |
| Heading | heading | Inline rich text | Seen on | |
| Videos shown on desktop | columns | Range 2–6, step 1 | 4 | |
| Media shape | ratio | Select | Portrait (4:5) |
|
| Color scheme | color_scheme | Color scheme | scheme-1 |
Video block (reel)
Maximum 12 per section.
| Setting | ID | Type | Default | Notes |
|---|---|---|---|---|
| Video | video | Video | — | |
| Image | image | Image | — | Shown when the block has no video. Falls back to the product image when empty. |
| Product in this video | product | Product | — | Adds the product card. |
| Caption | caption | Text | — | Shown below the video. |
The add-to-cart button appears only when the product is available. It adds the product's selected or first available variant.
Playback
- Videos are muted, loop and play inline.
- A video plays while at least 60% of it is visible and pauses otherwise.
- Each video has a pause/play button.
- Videos start paused for shoppers who prefer reduced motion or have data saver on.
Structure
1Shoppable videos (sections/video-reels.liquid)2└── <slider-component>3 ├── Heading area + previous/next buttons4 └── Row (.slider.reels)5 └── Video block6 └── <video-reel>7 ├── video (or image / product image / placeholder)8 ├── pause/play button9 └── product card with <product-form> quick addtext
For developers
Last updated for Tangent 1.7