Everything you need to set up and customize the Shoppable Video blocks — from uploading videos and adding timed product hotspots to letting customers shop directly from your video content.
Shoppable videos are short, engaging video clips with built-in product tags that let your customers browse and shop without leaving the video experience. Instead of just watching a product in action, visitors can tap a product hotspot that appears at just the right moment to view details and add items to their cart.
In the Boardwalk theme, Shoppable Video is a set of blocks that work together in a three-level structure: a Videos group holds one or more Video blocks, and each Video block can contain multiple Product Hotspot blocks. Videos play in a centered, horizontally scrollable carousel with a vertical (portrait) aspect ratio — ideal for social-media-style content. Product hotspots appear and disappear at specific times during playback, giving you full control over when each product is highlighted.
Follow these steps to add shoppable video content to any section of your Shopify store that supports nested blocks in the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Navigate to the page
where you want to display shoppable videos using the page
selector dropdown at the top center of the editor.
Inside the section where you want shoppable videos, click Add block and choose Videos from the list. This creates the container that will hold all of your individual video cards.
Inside the Videos group, click Add block and choose Video. Each Video block represents one video card in the carousel. You can add as many video blocks as you need.
Click on the Video block in the sidebar. Use the Video picker to upload a video file directly to Shopify, or paste a direct link to an MP4 file in the Or video URL field. Uploaded videos are recommended for the best performance.
Note: Videos uploaded through Shopify's file manager are recommended. Use MP4 format and keep file sizes under 20MB for the best loading speed. The video URL field only supports direct links to MP4 files — YouTube and Vimeo links are not supported for shoppable videos.
Inside the Video block, click Add block and choose Product Hotspot. Use the product picker to select a product from your store, then set the Start time and End time (in seconds) to control when the hotspot appears and disappears during the video. You can add multiple hotspots to a single video to highlight different products at different moments.
Note: Products you link must be set to Active status and published to your Online Store sales channel in the Shopify admin. Draft or archived products will not appear on your storefront.
Click Save in the Theme Editor. Preview your page to verify the video carousel, playback controls, and product hotspots are displaying and appearing at the correct times.
Shoppable Video uses a nested block structure. Understanding how these blocks fit together will help you build the exact video experience you want.
The top-level container block. It creates the scrollable carousel track that holds all of your video cards. The Videos group includes spacers on each side of the track so the currently active video appears centered on screen. This block has no configurable settings — it simply acts as the wrapper for your video blocks.
Each Video block is an individual video card inside the carousel. It contains the video player, playback controls, and a container for product hotspots. When no video is assigned, a placeholder is displayed with a prompt to add a video.
Product Hotspots are child blocks that sit inside a Video block. Each hotspot links to one product from your store and appears at a specific time during the video. When visible, the hotspot shows the product's thumbnail image, title, and price at the bottom-left of the video card.
These settings are available when you click on an individual Video block inside the Videos group.
Upload a video file directly to Shopify. MP4 format is recommended, and files should be kept under 20MB for the best performance. The video's preview image is automatically used as the poster frame while the video loads.
A direct link to an MP4 file hosted elsewhere. This field is used only when no video file is uploaded above. Note that YouTube and Vimeo links are not supported — the URL must point directly to an MP4 file.
These settings are available when you click on a Product Hotspot block inside a Video block. Each hotspot connects one product to a specific moment in your video.
Select any active product from your Shopify catalog. The hotspot will display the product's featured image, title, and price. If the product has multiple variants with different prices, a "From" label is shown before the lowest price.
The point in the video (in seconds) when this hotspot
appears. For example, entering 5 means the
hotspot will become visible 5 seconds into the video.
The point in the video (in seconds) when this hotspot
disappears. For example, entering 15 means
the hotspot will hide after the 15-second mark.
Shoppable Video blocks come with features that work automatically — no apps or custom code needed.
Videos are displayed in a horizontally scrollable carousel with the active video centered on screen. Spacers on either side of the track create a visually balanced, three-card layout that draws focus to the currently playing video.
Videos are set to play silently by default, following modern browser standards. This ensures videos can autoplay without being blocked. Visitors can unmute audio at any time using the options menu.
Each video card includes a play/pause button so visitors can control playback. The button icon automatically switches between play and pause states to reflect the current status.
A three-dot menu on each video card provides additional controls including mute/unmute, restart current product hotspot, jump to the previous product, and jump to the next product. Menu items appear dynamically based on available hotspots in the video.
Product hotspots appear and disappear based on the start and end times you configure. As the video plays, the theme continuously checks the current playback position and shows or hides each hotspot at the right moment.
When a hotspot first appears, it plays a brief pulse animation to draw the visitor's attention. This helps make sure customers notice the product tag without being disruptive.
Clicking a product hotspot pauses the video and opens the Quick View modal — a pop-up that displays the full product details, variant options, and an Add to Cart button. Customers can shop without leaving the video page. A loading spinner is displayed on the hotspot while the product information loads.
When a product has multiple variants with different prices, the hotspot automatically shows a "From" label followed by the lowest price. Single-price products display the price directly.
All interactive elements — including play/pause, the options menu, and product hotspots — include proper labels for screen readers so that visitors using assistive technology can navigate and interact with the shoppable video experience.
Common questions about setting up and using the Shoppable Video blocks.