Shoppable video

ProProductv1.0.0

Sell from short videos the way shoppers already watch them. A row of vertical clips plays muted as it comes into view, each with its product as a chip; hovering one lifts it forward. Tapping a clip opens a full-screen viewer with sound, story-style progress, previous and next by button, arrow keys or swipe, and up to three products per clip with live prices, options and Add to cart. Upload clips to Shopify, or paste a YouTube, Vimeo or TikTok link in the same block: linked clips show their cover on the card and play through the platform's own player in the viewer.

Good for: Shop the video · How-to and styling clips · Creator or customer videos

When to use it

Use it on your home page or a landing page to show short vertical clips of your products in use: styling videos, how-tos, or videos from creators and customers.

Products in motion. A row of clips plays muted as shoppers scroll past, each with its main product as a chip showing the name and price.
Buy without leaving the video. Tapping a clip opens a full-screen viewer with sound and up to three products, each with its price, options and Add to cart.
Watched like stories. In the viewer, a progress bar runs along the top and the next clip starts when one ends. Shoppers move between clips with buttons, arrow keys or a swipe.

Set it up

Add the section

On your home page or another template, choose Add section and pick SU: Shoppable video. It starts with five Video blocks showing example art in the theme editor until you add your clips. Shoppers only see clips that have a video file, a cover image or a YouTube, Vimeo or TikTok link.

Add a clip to each Video block

Select a Video block and choose a Video file. Use a vertical (9:16) video. It plays muted on the card and with sound in the viewer.

If the clip is on YouTube, Vimeo or TikTok, leave Video file empty and paste its address into Or a video link. A linked clip plays only in the viewer, through that platform’s own player. On the card it shows a Cover image: pick one for Vimeo and TikTok links, because without it the card shows a plain dark tile. YouTube uses its own thumbnail if you don’t pick one.

Add a caption and products

Write a short Caption, shown on the card and above the products in the viewer. Then pick a Product, and optionally a Second product and Third product. The first product also shows as a chip under the card, linking to its product page.

Add another Video block for each clip, up to 12.

Choose how the row behaves

Under Videos, set Card size to Small, Medium or Large. Turn off Play videos muted while on screen if you’d rather a clip plays only when shoppers hover over it. Shoppers can always pause every clip with the pause button above the row.

Choose what happens after adding to cart

Set After adding to cart to Open the cart, or to Stay on the page so shoppers keep watching.

Linked YouTube, Vimeo and TikTok clips use the platform’s own controls. Their progress doesn’t move the story bar, and the viewer doesn’t move on to the next clip when they end. Upload the file to Shopify if you want the full story behavior.

Shoppable video: The full-screen viewer with the products in the video. — The full-screen viewer with the products in the video.

Try it

Open full page(opens in a new tab)

Live example with sample products. Links and checkout are turned off; Add to cart shows what shoppers would see.

Settings

In the theme editor, in the order you'll see them. Every section also has the heading and style settings.

Videos

Setting	What it does
Card sizeDropdown	Options: Small, Medium, LargeDefault: Medium
Play videos muted while on screenCheckbox	Off: a video plays when hovered. Shoppers can always pause them, and nothing plays for those who prefer reduced motion.Default: On
After adding to cartDropdown	Options: Open the cart, Stay on the pageDefault: Stay on the page

Blocks go inside the section: use Add block, up to 12 in all, and drag them to change the order.

Block: Video

Setting	What it does
Video fileVideo	Upload a vertical (9:16) video in Content > Files. Plays muted on the card, with sound in the viewer.
Or a video linkLink	A YouTube, Vimeo or TikTok link, used when no file is chosen. It plays in the viewer through the platform's own player.
Cover imageImage	Shown on the card for a video link (YouTube uses its own thumbnail without one).
CaptionText
ProductProduct
Second productProduct
Third productProduct

Good to know

Up to 12 videos with up to 3 products each.
Uploaded videos play muted on the card; YouTube, Vimeo and TikTok links show a cover there and play in the viewer only, with the platform's own controls (their progress doesn't move the story bar or advance to the next clip).
TikTok and Vimeo links need a cover image to show a picture on the card.
Without JavaScript the clips show their poster or cover images, and each product chip links to its product.

Accessibility: Each clip is a labelled button that opens a modal dialog (focus kept inside, Escape closes); a control pauses every clip; arrow keys move between clips; sound and pause controls are labelled toggles. Nothing autoplays for shoppers who prefer reduced motion.

Speed: Videos load nothing until they come into view (preload none, poster first) and only the clips on screen play; the viewer reuses the same file. Products render in Liquid.

Changelog

1.0.0: Initial release.