The Video Section allows you to display engaging video content on your store’s homepage or other templates. It’s perfect for showcasing your brand story, product highlights, or campaign visuals using YouTube or Vimeo links.
This section includes flexible layout options, overlay controls, autoplay settings, and responsive aspect ratios for a polished video presentation across all devices.
Color scheme #
Choose the color scheme that matches your site design. This affects text and button colors over the video.
Section width #
Choose how wide the section appears on the page:
- Page—keeps the video within the page content width.
- Full—expands the video to full browser width.
Source #
Select the video source type. Options:
- External URL—add YouTube or Vimeo video links.
- Shopify-hosted video—for uploaded media.
- Image—for uploaded image.
YouTube or Vimeo video URL #
Paste your video URL (supports YouTube and Vimeo). The video will automatically embed with proper scaling and responsive behavior.
Autoplay #
Enable this to start the video automatically when the section loads. (Note: Browser restrictions may mute autoplayed videos.)
Loop video #
When enabled, the video will restart automatically once it finishes playing.
Muted #
Mutes the video’s sound by default. Recommended when autoplay is enabled for a better user experience.
Overlay opacity (%) #
Adjust the darkness of the overlay layer placed above the video. Useful for improving text contrast. Range: 0-100%.
Desktop aspect ratio #
Select the video aspect ratio for desktop view. Common options: 1:1, 3:2, 16:9, 4:3.
Mobile aspect ratio #
Select the aspect ratio for mobile screens. Keeps videos well-proportioned on smaller displays.
Direction #
Controls the layout of text and buttons relative to the video:
- Vertical – stacks content vertically.
- Horizontal – places content side by side.
Desktop content position #
Defines where content appears over the video. Options: Top left, top center, top right, middle left, middle center, middle right, bottom left, bottom center, and bottom right.
Top padding #
Adds spacing above the section to adjust layout spacing.
Bottom padding #
Adds spacing below the section for layout balance.
