# Shoppable videos

> A row of vertical videos – like stories on social media – each with a product. Tapping one opens a full-screen player with sound, the product and an add to cart button.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/shoppable-videos/

## At a glance

- **In the editor:** Shoppable videos
- **Where it goes:** Any page template, with Add section
- **In the presets:** Not on any page by default – add it where you need it
- **Settings:** 22
- **Blocks:** Video
- **App blocks:** Yes

## Set it up

1. Upload your vertical videos (9:16) in **Content › Files**.
2. Add a **Video** block for each, pick the **Video** and its **Product**, and write a short **Caption**.
3. Without a video, a block shows its **Image** or the product photo, so you can set the row up before the videos are ready.

## On the page

- **Play videos on the page:** *When on screen*, *On hover* or *Only in the player*. Videos on the page are always muted. Shoppers who reduce motion see the first frame.
- **Product:** *On the video*, *Below the video* or *Only in the player*.
- **Videos per row on desktop** (2–6) and **on mobile** (1 or 2). **Show part of the next card** lets the next video peek in.

## The player

A tap opens the video full screen with sound. The product appears with its price and an add button; arrows, the arrow keys or a swipe move to the next video.

> **Tip**
>
> Keep videos under 30 seconds and show the product in the first two. Shoppers decide quickly whether to keep watching.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Shoppable videos** (22 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Rich text (one line) | Sample text |
| **Text** | Rich text | Sample text |
| **Heading size** | Large · Medium · Small | Medium |
| **Link next to the heading** | Text | – |
| **Link** | Link | – |

*Videos*

| Setting | Options | Default |
| --- | --- | --- |
| **Videos per row on desktop** | 2–6 (step 1) | 5 |
| **Videos per row on mobile** | 1 · 2 | 2 |
| **Play videos on the page** – Videos play muted. Shoppers who reduce motion only see the first frame. | When on screen · On hover · Only in the player | When on screen |
| **Product** | On the video · Below the video · Only in the player | On the video |
| **Show part of the next card** – For sliders: the next card shows in part and the edges fade, so it is clear the row goes on. | Checkbox | On |
| **Color scheme** | Color scheme | Scheme 1 |

*Grid spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Use custom spacing** – Otherwise the section keeps its built-in spacing. | Checkbox | Off |
| **Space between columns** | 0–120px (step 2) | 20px |
| **Space between columns on mobile** | 0–64px (step 1) | 8px |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 64px |
| **Bottom padding** | 0–160px (step 4) | 104px |
| **Top padding on mobile** | 0–120px (step 4) | 40px |
| **Bottom padding on mobile** | 0–120px (step 4) | 72px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| **Animate on scroll** | Checkbox | On |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Block settings

**Block: Video** (4 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Video** – Vertical video (9:16) works best. Upload it in Content, Files. | Video file | – |
| **Image** – Shown when there is no video. Uses the product photo when empty. | Image | – |
| **Product** | Product | – |
| **Caption** | Text | Sample text |

## Related

- [Video](https://themelab.page/tally/docs/sections/video.md): A video from your files or from YouTube or Vimeo, with a cover image and an optional heading and text.
- [Lookbook](https://themelab.page/tally/docs/sections/lookbook.md): A horizontal row of large images in mixed shapes that shoppers drag or swipe through, with products on the photos.
- [Testimonials](https://themelab.page/tally/docs/sections/testimonials.md): Customer quotes with stars, a name, a photo and the product they bought, as a grid or carousel.