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.
- 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
- Upload your vertical videos (9:16) in Content › Files.
- Add a Video block for each, pick the Video and its Product, and write a short Caption.
- 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.
All settings
Every setting in the order of the theme editor, with its options and its default value.
Section: Shoppable videos22 settings
| 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 | ||
| Videos per row on desktop | 2–6 | 5 |
| Videos per row on mobile | 1 · 2 | 2 |
| Play videos on the pageVideos 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 cardFor 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 | ||
| Use custom spacingOtherwise the section keeps its built-in spacing. | Checkbox | Off |
| Space between columns | 0–120px | 20px |
| Space between columns on mobile | 0–64px | 8px |
| Section spacing | ||
| Top padding | 0–160px | 64px |
| Bottom padding | 0–160px | 104px |
| Top padding on mobile | 0–120px | 40px |
| Bottom padding on mobile | 0–120px | 72px |
| Advanced | ||
| Hide on mobile | Checkbox | Off |
| Hide on desktopMobile 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 IDLink to this section with #anchor-id. | Text | – |
Block settings
Block: Video4 settings
| Setting | Options | Default |
|---|---|---|
| VideoVertical video (9:16) works best. Upload it in Content, Files. | Video file | – |
| ImageShown when there is no video. Uses the product photo when empty. | Image | – |
| Product | Product | – |
| Caption | Text | Sample text |
Related
VideoA video from your files or from YouTube or Vimeo, with a cover image and an optional heading and text.LookbookA horizontal row of large images in mixed shapes that shoppers drag or swipe through, with products on the photos.TestimonialsCustomer quotes with stars, a name, a photo and the product they bought, as a grid or slider.