Shoppable videos section
The Shoppable videos section of Combine shows short videos, each linked to a product with an optional quick buy button.
Applies to: Combine 4.2.0 and later. Added in: Combine 4.0.0. Last checked: 2026-10-13 against Combine 4.2.0.
The Shoppable videos section shows a row of short videos, each with the product it features under it. Customers watch the video, then open the product or buy it with a quick buy button.
Where to find it: in the theme editor, select Add section and choose Shoppable videos. The section starts with six videos.
Setting up a shoppable video
Prepare the videos
Make short, vertical MP4 videos, one per product. Upload them in Shopify admin → Content → Files, or straight from the video picker of each block.
Add a Video block per video
Select Add block inside the section and choose Video. Pick the file in Video file.
Link the product
In the same block, pick the product in Select product. Its image, price, title and vendor show under the video.
Add a fallback image
Upload a still from the video in Fallback image. It shows on phones that block autoplay, and while the video loads.
Turn on quick buy, if you want it
Select the section and turn on Enable quick buy. Products that are in stock get a small add to cart button on their card.
Content
- Desktop layout sets how many videos show side by side: 3 columns, 4 columns or 5 columns (the default). Combine reduces it on smaller screens. The videos always scroll sideways as a slider.
- Mobile layout sets the videos per row on phones: 1 column (the default) or 2 columns.
- Media aspect ratio crops the videos to one shape, from Short (4:3) to Tallest (9:16) (the default, for phone videos).
- Mobile video aspect ratio sets the shape of the mobile videos. Natural keeps each video's own proportions.
- Show video controls adds play, pause and sound controls. Without them, the videos play muted in a loop.
- Show vendor (on by default) shows the brand in the product box.
- Enable quick buy shows a quick buy button when the product is in stock. Products without variants go straight to the cart; products with variants open the quick view popup.
Custom card design
- Background, Text and Border set the colors of the product box under each video. Hide border removes its line.
- Border radius rounds the corners of the videos and the product boxes, 0 to 30 px (default 20 px).
The section heading, colors, margins and heading tag work as described in General section styling. The color under Section design is called Text color.
Blocks
Video
- Video file is the video. It plays muted, in a loop, as soon as it is on screen.
- Use different media on mobile shows Mobile video file on screens narrower than 768 px.
- Select product is the product shown under the video.
- Fallback image shows instead of the video on mobile devices where autoplay may be off, and when there is no video.
Why does my shoppable video show only an image on my phone?
Because the phone does not allow autoplay, for example in low power mode. The Fallback image shows instead. Upload a still from the video there, so the card still looks right.
Why is there no quick buy button on a video?
Because Enable quick buy is off, or the product is sold out. The button shows only for products in stock. Turn on Enable quick buy in the section settings.
All Shoppable videos settings
Every setting of this section, with its type and default.
Accepts these blocks: Video.
Shoppable videos section: Section heading
Where to find it: Shoppable videos → Section heading
The Shoppable videos section uses the standard Section heading settings, listed in General section styling.
Heading (text field, default: "Shoppable videos"): Sets the section title. Leave Heading, Subheading and Button label empty to hide the heading area.
Subheading (text field, default: "Showcase your best products").
Heading size (dropdown, default: Regular). Options: Regular, Large.
Text alignment (dropdown, default: One row: Left). Options: One row: Left, Two rows: Left, Two rows: Center.
Button label (text field): Adds a button to the heading area on desktop; below 768 px it shows under the section as a full-width button.
Button link (link). Shown only when Button label is set.
These settings differ from the standard ones or exist only here:
Heading (text field, default: "Shoppable videos"): Sets the section title. Leave Heading, Subheading and Button label empty to hide the heading area.
Subheading (text field, default: "Showcase your best products").
Shoppable videos section: Content
Where to find it: Shoppable videos → Content
Desktop layout (dropdown, default: 5 columns): Sets how many videos show side by side on desktop. The videos always scroll sideways. Options: 3 columns, 4 columns, 5 columns.
Mobile layout (dropdown, default: 1 column): Sets the videos per row on phones. Options: 1 column, 2 columns.
Media aspect ratio (dropdown, default: Tallest (9:16)): Crops the videos to this shape. Tallest (9:16) suits phone videos. Options: Short (4:3), Square (1:1), Tall (5:6), Taller (2:3), Tallest (9:16).
Mobile video aspect ratio (dropdown, default: Natural): Sets the shape of the mobile videos. Natural keeps each video's own proportions. Options: Natural, Wide (16:9), Short (4:3), Square (1:1), Tall (5:6), Taller (2:3), Tallest (9:16).
Show video controls (checkbox, default: off): Adds play, pause and sound controls. Without them the videos play muted in a loop.
Show vendor (checkbox, default: on): Shows the brand in the product box under each video.
Enable quick buy (checkbox, default: off): Shows a quick buy button for products in stock. Products with variants open the quick view popup.
Shoppable videos section: Custom card design
Where to find it: Shoppable videos → Custom card design
Background (color, default: transparent): Sets the background of the product box under each video.
Text (color, default: transparent): Sets the text color of the product box.
Border (color, default: transparent): Sets the color of the line around the product box.
Hide border (checkbox, default: off).
Border radius (slider 0 to 30 px, default: 20 px): Rounds the corners of the videos and the product boxes.
Shoppable videos section: Section design
Where to find it: Shoppable videos → Section design
The Shoppable videos section uses the standard Section design settings, listed in General section styling.
Background color (color, default: transparent).
Background gradient (gradient).
Text color (color, default: transparent): Sets the color of the section heading, the subheading and the text of the section.
These settings differ from the standard ones or exist only here:
Text color (color, default: transparent): Sets the color of the section heading, the subheading and the text of the section.
Shoppable videos section: Gutter
Where to find it: Shoppable videos → Gutter
The Shoppable videos section uses the standard Gutter settings, listed in General section styling.
Decrease top margin (checkbox, default: off): Makes the space above the section smaller.
Remove bottom margin (checkbox, default: off): Pulls the next section up, so the two sections touch.
Shoppable videos section: SEO
Where to find it: Shoppable videos → SEO
The Shoppable videos section uses the standard SEO settings, listed in General section styling.
Heading tag (dropdown, default: H2): Sets the HTML level of the section heading for search engines; span gives it no level. It does not change the size. Options: H1, H2, H3, H4, span.
Video block
Where to find it: Shoppable videos → Add block → Video
Video file (video): Sets the video. It plays muted, in a loop, when it is on screen.
Use different media on mobile (checkbox, default: off): Shows a different video on screens narrower than 768 px. Shown only when Video file is set.
Mobile video file (video). Shown only when Use different media on mobile is on and Video file is set.
Select product (product picker): Sets the product shown under the video.
Fallback image (image): Shows instead of the video on phones that block autoplay, and when there is no video.
Related pages
- Quick view template: what the quick buy button opens for products with variants.
- Video section: a YouTube or Vimeo video with a poster.
- Flex slideshow section: slides with uploaded videos.
- General section styling: the standard section settings.