Video

The Video element allows you to add engaging videos to your page and create a more dynamic shopping experience. Videos can help showcase your products, tell your brand story, or demonstrate how items are used in real life — making your content more appealing and trustworthy.

You can easily add videos from various sources such as YouTube, Vimeo, an External URL, or by uploading a local video file. With flexible customization options, you can adjust the video’s appearance, size, and playback settings to match your store’s design and style.

1. Add Video Element to your page

From the Basic tab, you can drag and drop the Video element to anywhere that you are wanting to display a video.

2. Configure video

2.1. Content

In the content section, there are several things that you need to pay attention to.

Source: You could choose different sources of video:

• – Youtube: for example this link https://www.youtube.com/watch?v=2djJhgfl91s
• – Vimeo: for example this link https://vimeo.com/210603721
• – External URL: for example this link https://cdn.shopify.com/s/files/1/0332/6420/5963/files/jewelry_video.mp4?&_accept=image/avif
• – Upload: browser a video file from your computer

• Aspect Ratio: Choose from six ratio options to best fit your layout. You can select your preferred ratio or keep the Default ratio for automatic adjustment.
• Start/End time: Define the video playback duration by entering the start and end times. This lets you trim and display only the specific part of the video you want visitors to see.
• Mute: Enable this option to turn off the video sound. This is useful when you want the video to autoplay silently or avoid disrupting the browsing experience.
• Enable lazyload: When activated, media files and images are loaded only when visible on the screen, improving page speed and ensuring a smoother browsing experience.
• Autoplay: Turn this on to have your video play automatically as soon as it appears on the page.
• Loop: Enable this option to replay the video continuously without stopping once it reaches the end.
• Enable player controls: When enabled, viewers can control the video playback (play, pause, volume, etc.) through the built-in control bar.
• Enable overlay: This feature adds an overlay effect on top of your video, often used with a play icon for a clean and professional appearance. Once enabled, you can choose the overlay icon and activate the Open in Lightbox option — allowing the video to open in a popup window when clicked.
• Poster image (Available only for External URL and Upload sources) : The poster image is displayed before the video starts, pauses, or ends. It serves as the video thumbnail and helps improve your page’s visual appeal.

2.2. Design

• Play Icon: Allow you to customize the appearance and behavior of the play button displayed on your video overlay. You can freely adjust the size, rotation, color, background, and border style to match your store’s branding. In addition, you can fine-tune the box shadow, border radius, and spacing (margin and padding) to control how the icon is positioned and styled.
• Overlay: There are two modes which are normal and hover. Both modes allow you to configure many options including background color, opacity…etc of overlay.
• Video content: Give you full control over the video’s size, layout, and spacing within your design. You can adjust the width and height of the video to fit your layout, as well as define its alignment (left, center, or right) for perfect positioning. Additionally, you can customize the background, border radius, and spacing (margin and padding) to achieve a polished and consistent look across your page. These settings make it easy to ensure your video integrates seamlessly with other elements in your design.
• Popup content (only appearing once overlay is enabled): The size of the popup can be edited using the width and height editing options.

2.3. Advanced

Get more information about advanced settings via this link.

Frequently Asked Questions

1. Can I upload my own video instead of using YouTube or Vimeo?

Yes. You can upload your own local video file directly by selecting the Upload source option. This is useful if you want full control over your video content or prefer not to use third-party platforms.

2. Why isn’t my video playing automatically?

Most browsers block autoplay unless the video is muted. To fix this, enable both the Autoplay and Mute options in the settings panel.

3. What video formats are supported for local uploads?

The Video element supports .mp4, .ogg, and .webm file formats. Make sure your video file follows these formats to ensure smooth playback.

4. Will the video slow down my page loading speed?

To improve performance, enable the Lazyload option. This ensures the video loads only when it appears in the visitor’s view.

5. Why can’t I see the Poster Image option when using YouTube or Vimeo?

The Poster Image option is only available when using External URL or Upload sources, since YouTube and Vimeo handle thumbnails automatically.