Video
Add videos from YouTube, Vimeo, or upload your own, then customize with overlays, captions, aspect ratios, and playback options for a visually engaging section that looks great on both desktop and mobile.
Last updated 4 months ago
Overview
The Video section allows you to feature video content alongside customizable overlays and captions, helping your storefront stand out with rich visuals and dynamic storytelling. Supporting both embedded and self-hosted videos, this section is designed to drive engagement, highlight key messages, and reinforce brand style.
⚠️ Important: Combine video sources, overlays, aspect ratios, and captions in the Video section to deliver a visually compelling and highly customizable experience.
Key components and functionality
Video settings
Video settings give you control over the source, appearance, and interactive features of your video. These options ensure that your video content aligns with your brand messaging and functions optimally across different devices.
The main options for video content include adding an embedded video link, uploading your own hosted file, setting how it displays, and configuring playback behavior.
Enter a video service URL from YouTube or Vimeo.
Only YouTube and Vimeo links are supported.
The default value is _https://www.youtube.com/watch?v=9VUPq3SxOc.
Make sure you use a complete and valid link for best display results.
Upload a hosted video file if you prefer to use your own media.
This gives you more control and is useful for exclusive or branded content.
Set a poster image, providing a visual preview before the video plays.
Poster images add visual appeal and serve as a fallback if the video cannot be played.
Choose an aspect ratio for desktop displays.
Options: default, landscape, portrait, square, ultrawide, widescreen.
The default value is default.
Choose a different aspect ratio for mobile devices to optimize display on smaller screens.
Options: default, landscape, portrait, square, ultrawide, widescreen.
The default value is default.
Set the maximum video width to fine-tune layout.
Range: 0 to 1600 px, in 16 px steps.
The default is 0, which means no restriction on width.
Enable autoplay to have the video start automatically on load.
Note that many browsers only allow autoplay if the video is muted.
Enable looping for continuous playback.
This is ideal for looping background videos or short attention-grabbing clips.
Set the video to mute by default to avoid unexpected sound playback.
The default is enabled.
Muted autoplay is supported by most browsers.
Choose whether to show video player controls.
The default is enabled.
Controls improve accessibility and give users more playback options.
Caption settings
Caption settings make it easy to add important information, calls to action, or highlights over or around your video. These features are essential for effective communication and accessibility.
Add, style, and position your caption text to maximize its impact and ensure it stands out against the video.
Enter caption text, which supports rich formatting such as bold, italic, and links.
Set the alignment of your caption text (left, center, or right) for best presentation.
Decide if the caption appears above or below the video.
Options are top or bottom.
Adjust the caption text size for emphasis or readability.
Options: small, medium, large, extra large.
The default is medium.
💡 Tip: Well-placed captions paired with overlays can significantly enhance your message clarity and viewer engagement.
Overlay settings
Overlay settings let you apply visual enhancements to your video, increasing contrast, reinforcing branding, or improving text legibility. By using overlays, you ensure your captions are always easy to read and your visual style remains consistent.
Overlays can be fine-tuned with both color and gradient effects, as well as adjustable transparency.
Set the overlay color for a consistent, branded look.
Add an overlay gradient for extra depth and style.
Adjust the overlay opacity to control visibility and contrast.
Range: 0% to 100%, in 4% steps.
The default value is 48%.
📝 Note: Carefully adjusting overlay color and opacity can dramatically improve readability and polish the appearance of your section.
Supported block types
Video does not support blocks. All customization and layout adjustments are available through the section’s settings and options.
Usage notes
Adjust desktop and mobile aspect ratios independently to guarantee excellent presentation across all devices.
Use a high-quality poster image for a polished look before or if the video loads.
Choose hosted video for total control, or embedded video for speed and reach.
Tune overlays and opacity until your caption text is clear without hiding your video content.
Make captions concise, ensuring both accessibility and engagement.
Keep video muted by default to avoid unexpected audio, as recommended for modern browsers, as well as maintaining user experience quality.
Always preview your section on different devices and browsers for best results.
💡 Tip: Overlay and caption settings give you the flexibility to ensure your Video section remains visually strong and accessible in any context.
🚧 Caution: Be mindful of video file sizes and overlay transparency. Striking the right balance ensures your site remains fast and enjoyable to browse.