Video reels

A row of video reels in portrait (9:16), square, or landscape (16:9), each with a shoppable product panel. Reels play silently while on screen, and each has a compact options menu for pause, sound, and share.

Merchant-addable

Yes

Settings

18

Block types

1

Max blocks

12

File

sections/video-reels.liquid

Used by default on: Home

Desktop — 1440px

View full size

Mobile — 390px

View full size

Video reels

−

100%

+Reset

Use the zoom controls, then scroll to inspect the image. Press Escape to close.

When to use it

Short product-in-use clips such as application demos, textures, and routines, where shoppers should be able to buy what they just watched without leaving the page.

Setting it up

1. Add the section. It starts with four Reel blocks; add up to 12.
2. In each Reel, use Upload video for a clip that matches the section's Media aspect ratio. Add a Cover image in the same ratio to control the frame shown before the video plays. Without one, the video's own preview image is used, and a reel with neither shows a placeholder.
3. Write a Video description for shoppers using assistive technology. Left blank, the reel uses the product title.
4. Choose a Product to show its image, title, price, and a purchase button over the reel. Products with a single variant are added to the cart directly; products with options or a required subscription open the quick add dialog. A reel without a product shows the film only; in the theme editor it shows an example panel so you can see the layout.
5. Under Content, fill in Eyebrow, Heading, and Subheading and choose Heading size. Use uppercase heading on desktop sets the section heading in capitals from 750px wide; phones keep it as you typed it. Product titles always keep their normal capitalization. Mobile header alignment sets the eyebrow, heading, and subheading to the left or center on phones; it starts centered. Desktop always centers them.
6. Under Layout, choose Media aspect ratio: Portrait (9:16), Square (1:1), or Landscape (16:9). Portrait and square place the product panel over the foot of the video. Landscape places it below the video, because over a short frame it would cover most of the picture.
7. Set Cards per row on desktop (3–5, from 990px wide). Landscape shows at most three per row so the videos stay large. Tablets show just over two portrait or square reels, and phones show one reel at a time, starting at the page margin, with the next reel peeking in on the right.
8. Choose Playback mode: Ambient loop plays each reel muted and looped while it is mostly on screen; Click to play waits for the shopper.
9. Turn Show share button and Show quick add on or off, then set Color scheme and padding.

Where the content comes from

Reel blocks own the order of the reels and each reel's video, cover image, description, and product. Shopify product data owns the panel's title, image, price, compare-at price, variants, and availability. The section settings own the heading and layout. No metafields or apps are used.

Notes and cautions

• The purchase button is a compact round icon: a bag on phones and a plus on desktop. Screen readers announce it as Quick buy with the product name, and on phones the tap area stays 44px even though the circle is smaller.
• Hovering the purchase button also plays the theme's text hover effect on the product title, so it is clear which product the button adds.
• The product panel is as see-through as its color scheme allows. The theme calculates the lowest opacity that keeps the panel text at the 4.5:1 contrast standard over any frame, from pure white to pure black: about half opacity on light schemes such as white, and more on mid-tone schemes such as brown. Choose a lighter or darker color scheme for a more translucent panel.
• Product images in the panel are cropped to a square thumbnail.
• Only one reel plays with sound at a time: turning on sound in one reel mutes the others.
• Each reel shows a single options button (three dots) in its top corner, the same control product cards and quick view use for video. Its menu holds play or pause, sound, and share. On a computer it opens on hover or click; on phones and tablets a tap opens and closes it, and tapping elsewhere closes it. While a reel is paused, a play button also appears in the middle of the video.
• Reels download nothing until they are on screen. Shoppers who prefer reduced motion, or who have Data Saver turned on, never see a reel start by itself and download no video until they press play. The play button is always available.
• Share opens the device share sheet where available and otherwise copies the product link. It shares the product page when the reel has a product, and the current page when it does not.
• Below the row, a progress bar on desktop and position dots on phones show where shoppers are in the row. Desktop shoppers can drag the progress bar to scroll.
• Without JavaScript, each reel shows the browser's own video controls, with the product panel below the video.

Section settings

Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.

Blocks

Blocks are added, reordered, duplicated, and removed inside the section. Each type has its own settings.