Displays videos linked to specific products, allowing customers to explore product details while watching the content. Suitable for product demonstrations, tutorials, lifestyle videos, and social-style shopping content.
Homepage
Product landing page
Featured products
Product demonstrations
Influencer or user-generated content
Shopify Admin → Online Store → Themes → Customize → Add section → Shoppable video
Section heading: Adds a heading and supporting text.
Item: Adds a video and links it to a selected product.
Setting | Description |
|---|---|
Video height | Sets the video height on desktop. Use Adapt to video to keep the original ratio. |
Fixed height | Applies a custom desktop height. |
Mobile video height | Sets the video height on mobile. |
Mobile fixed height | Applies a custom mobile height. |
Items per row | Controls the number of videos shown on desktop and tablet. |
Setting | Description |
|---|---|
Use prev/next button | Displays slider navigation arrows. |
Navigation design | Selects the arrow style. |
Navigation position | Places arrows inside or outside the content. |
Rounded navigation | Displays fully rounded navigation buttons. |
Navigation icon | Selects Chevron or Arrow icons. |
Use dots | Displays pagination dots. |
Distance between dots and items | Adjusts spacing below the videos. |
Outside content navigation may not work when the section is full width.
Setting | Description |
|---|---|
Text alignment | Aligns the heading content. |
Spacing between items | Adjusts spacing between heading blocks. |
Margin bottom | Sets the space below the heading. |
The heading supports Heading and Text blocks with responsive typography, color, visibility, font weight, and letter-spacing settings.
Setting | Description |
|---|---|
Video | Uploads a video directly. It overrides the external video when both are set. |
External link video | Adds a YouTube or Vimeo video. |
Product | Links the video to a selected product. |
Setting | Description |
|---|---|
Enable section full width | Expands the section across the browser width. |
Color scheme | Controls the section colors. |
Section padding | Adjusts spacing above and below the section. |
Rate padding (mobile) | Controls responsive spacing on mobile. |
Use short, product-focused videos.
Link each video to the most relevant product.
Use consistent video ratios across all items.
Enable arrows or dots when multiple videos are added.
Avoid oversized videos on mobile.
Compress uploaded videos to improve loading speed.
Issue | Solution |
|---|---|
External video is not showing | Remove the uploaded video because it takes priority. |
Product information is missing | Select a product in the video item. |
Video appears cropped | Use Adapt to video or adjust the fixed height. |
Slider arrows are missing | Enable prev/next buttons and check their visibility settings. |
Outside navigation is not working | Disable full-width layout or move navigation inside the content. |
Section loads slowly | Compress videos or reduce the number of visible items. |