Shoppable video on the product page

Shoppable video (Video Commerce) uses the first native video registered in product media. On the product page, visitors can watch and choose variants before adding to the cart.

In the new editor (Brand Editor), open the product template, select the main product information section and enable Enable shoppable video. The setting applies to the template: products using that template with a native video can display the feature. It is disabled by default.

In Floating video shape, choose Circle (default), Stories (vertical) or Square. Shape affects only the floating widget; the player and purchase remain the same.

On desktop, video appears in a button in the bottom-left corner, muted and looping. Position can be changed to the right in Floating video position. The close button dismisses the widget for that product during the session. If the browser blocks autoplay or visitors prefer reduced motion, the cover allows manual opening.

On mobile, the same floating video appears in the chosen shape, with a default width of 104 px (185 px height in Stories). Tapping opens the full-screen modal. There is no extra button below the gallery. The vertical modal presents a card with name, image, price and Buy over the video. The first Buy click opens variant buttons and quantity with −/+ beside the purchase control; confirmation adds to the cart. Selection follows the page form, and out-of-stock options block the button. After adding, the theme presents its normal cart flow.

Icon controls allow pausing/resuming and enabling/muting sound. Icons follow the state reported by the player and have accessible labels. When the feature is active, its video is removed from the image carousel and thumbnails. Other videos remain; disabling restores the complete gallery. The widget hides while the cart or another theme modal is open. Kits and subscriptions direct visitors to page details to complete their configuration.

The widget uses only native video. For cards on the home or product page, including YouTube/Vimeo, use Shoppable video carousel. Each card can link one product; multiple products in the same video remain outside scope. Moving between the widget and modal can restart playback.

If video fails to load, the modal reports the failure and offers Try again. The card and purchase options remain available. Retrying recreates the player and requests the SDK again when necessary.

Opening options hides the card’s Buy action: only the form confirmation button remains. Reopening the modal restores the compact card.

To return to the compact card, tap the arrow in the card’s upper corner or the video area above the card. Options and quantity are preserved. Pause, sound and X remain independent.

The card does not show a link to the same product page’s details. The collapse icon sits beside the summary without taking a form row.

The form opens and collapses with the carousel’s same short transition, disabled when visitors prefer reduced motion. Colors/images and sizes follow the theme variant appearance, and rounding follows configured surfaces and buttons.

Move the floating video

Drag the widget with the mouse or finger to move it away from content. On release, it snaps to the nearest side, retaining the chosen height within the screen. A short click or tap opens the player. Position is temporary on the page and does not change editor settings.

Customize the widget

The editor offers activation, shape (circle, stories or square), initial side and compact/default size. Default: 144px on desktop and 104px on mobile; compact: 112px and 88px. Stories preserves 9:16. Colors follow the theme and spacing is controlled by the component. On the right, initial position leaves room for the contact button. Visitors can always drag; manual position is temporary.

Floating video on the home page

On the home page, add Floating video, available in the media category. One widget per home page is allowed. Configure a public YouTube or Vimeo link, optional cover, accessible name, shape (circle, stories or square), size (compact or default) and initial side.

This version is informational: it does not link products or display a purchase form. Section position in the list does not change the widget’s screen position. Visitors can drag it to the opposite side, close it or open the video. Preview starts muted; provider controls are available in the player. Reduced motion prevents automatic playback.

Without a configured video, the store does not display the widget; the editor displays guidance. Closing applies to the open page; reloading makes it appear again. Private videos or those with embedding disabled remain subject to provider restrictions.

The product page’s shoppable video retains its current configuration. The home section is not available on category pages and does not replace product page settings.

In circle or square shapes, YouTube previews use a centered crop to fill the widget, including Shorts. Parts of the video edges may be outside the preview. Stories shape and video opened in the modal retain their previous framing. Black bars recorded in the file itself may remain.