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 uploaded videos, YouTube, or Vimeo links.

This section supports nested blocks (like Headings, Text, and Buttons), meaning you can overlay custom text and calls-to-action directly on top of the playing video!

Section settings

• • Color scheme: Choose the color scheme that affects the section’s background (visible if the video doesn’t span full width or if padding is applied).
  • Section width: Constrain the video to Page width or expand it to Full width (edge-to-edge).
  • Desktop settings:
    • Source: Select the primary video source type for desktop screens. Options: Uploaded (Shopify-hosted video), Url (YouTube/Vimeo), or Image (a static image fallback).
    • Video: Upload an MP4 video file directly to Shopify (if ‘Uploaded’ is selected).
    • Youtube or Vimeo video URL: Paste your video link (if ‘Url’ is selected).
    • Fallback image: Upload a static image to show instead of a video (if ‘Image’ is selected).
  • Mobile settings:
    • Avelara lets you specify a completely different video specifically for mobile devices! If left blank, it will just use the desktop settings.
    • Mobile video / Mobile Youtube URL / Mobile fallback image: Works exactly like the desktop settings, but optimized strictly for mobile viewing.
  • Video settings:
    • Autoplay: Enable this to start the video automatically when the section loads. (Note: Modern browsers generally require videos to be muted to autoplay).
    • Loop: When enabled, the video will restart automatically once it finishes playing.
    • Muted: Mutes the video’s sound by default. Highly recommended (and often required) if Autoplay is enabled.
    • Overlay color scheme: Controls the color scheme of text and buttons overlaid on the video.
    • Overlay opacity: Adjust the darkness of the tinted overlay layer placed above the video to improve text contrast (Range: 0-80%).
    • Desktop ratio / Mobile ratio: Select the video aspect ratio for desktop and mobile views (e.g., 16/9, 1/1, 3/2) to ensure perfect framing.
    • Direction: Controls the layout of your overlaid text and button blocks (Vertical stacks them, Horizontal places them side-by-side).
    • Desktop content position: Defines exactly where your text blocks appear over the video (e.g., Top left, Middle center, Bottom right).
  • Top padding / Bottom padding: Add vertical spacing (in pixels) above and below the section.