Video

Easily add and customize videos with flexible source, autoplay, captions, overlays, and responsive alignment to enhance product highlights, storytelling, and engagement across your site's key sections.

Last updated 3 months ago

Helpful links

  1. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks

  2. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks#metafields-and-dynamic-sources

Overview

The Video block gives you the power to visually engage your audience by embedding videos directly within your site’s key sections. Flexible source, appearance, and playback settings help you maintain design consistency and optimize user experience. Use this block to highlight products, deliver stories, or provide informational content with clarity and visual impact.

⚠️ Important: The Video block allows you to easily add, style, and control video playback — helping you boost engagement and communicate complex ideas with visual media.

Video settings

Video settings determine where your video comes from, how it appears on the page, and how users interact with it. These options ensure you have complete control over content style and playback.

You can select an external video source or upload your own video for complete control:

  1. Video service URL

    1. Embed a video using a YouTube or Vimeo link.

    2. Default: https://www.youtube.com/watch?v=9VUPq3SxOc

    3. Only public or unlisted links can be used; private videos will not display.

  2. Shopify-hosted video

    1. Upload a video file to be hosted directly.

    2. Most standard video formats are supported. If both this and a service URL are set, the uploaded video takes priority.

  3. Poster image

    1. Display an image preview before playback starts.

    2. Using a poster image keeps your page visually attractive and maintains design consistency.

Aspect ratio settings let you make sure your video fits your layout perfectly, no matter the device:

  1. Aspect ratio (desktop)

    1. Controls the video shape on desktop.

    2. Choices include Default, Landscape, Portrait, Square, Ultrawide, and Widescreen.

    3. Default: Default

  2. Aspect ratio (mobile)

    1. Lets you set the best video shape for mobile visitors.

    2. Same set of options as above.

    3. Default: Default

Max video width restricts the maximum size of the video in pixels.
Default: 0 (video fills its section unless you specify a width up to 1600 px, in steps of 16px).

Playback controls define how viewers interact with your video:

  1. Autoplay video

    1. Starts playing your video as soon as it loads.

    2. Works best with mute enabled, as browsers often block autoplay with sound.

  2. Loop video

    1. Restarts automatically when it finishes.

  3. Mute video

    1. Ensures playback starts silently.

    2. Default: Enabled

  4. Show video player controls

    1. Lets visitors play, pause, and control volume.

    2. Default: Enabled

Caption settings

Caption settings help you provide extra information, accessibility, or highlight key points in your video.

Adding a caption provides clarity for visitors and creates a visually harmonious layout:

  1. Caption text

    1. Use a formatted text field for descriptive context, credits, or accessibility.

  2. Caption alignment

    1. Align the caption left, center, or right for visual balance.

  3. Caption position

    1. Place your caption above or below the video.

  4. Caption text size

    1. Set the text to Small, Medium, Large, or Extra large.

    2. Default: Medium

Overlay settings

Overlay settings help you increase visual separation between your video and text or branding elements, ensuring everything remains readable and cohesive.

Overlay options provide flexibility to fine-tune the style and legibility of captions and overlays:

  1. Overlay color

    1. Apply a solid color to the video for improved readability.

  2. Overlay gradient

    1. Use a gradient effect to add depth.

  3. Overlay opacity

    1. Control overlay transparency (0–100% in 4% increments).

    2. Default: 48%

Alignment settings

Alignment settings enable you to position your video and associated text just right for both desktop and mobile users.

These controls make sure your block remains visually aligned no matter where it appears:

  1. Desktop alignment

    1. Align the block to the left, center, or right.

  2. Mobile alignment

    1. Adjust alignment for mobile screens for the best experience.

Visibility settings

Visibility settings determine where the block appears based on device type, so you can deliver a tailored experience for desktop and mobile visitors.

  1. Visibility

    1. Show the block everywhere, only on mobile, or only on desktop.

    2. Default: Do not hide

Available in sections

Add the Video block to a wide variety of sections to create engaging layouts:

  1. Collage

  2. Video with text

  3. Slideshow

  4. Multicolumn

  5. Product information

  6. Featured product

  7. Hero

  8. Sidebar

  9. Blog post

  10. Page content

  11. Product information

  12. Featured product

  13. Blog post

  14. Page content

Usage notes

Test your Video block in different sections and on multiple devices to ensure a smooth appearance and reliable playback. Use high-quality poster images to provide a professional first impression and avoid layout jumps. Fine-tune overlay color and opacity for caption readability, especially against bright or complex video backgrounds. Always use mute alongside autoplay to respect visitor preferences. Review your caption placement and size for visibility over all video and overlay settings.

💡 Tip: Overlays and captions keep your message clear. Adjust aspect ratios, alignments, and overlays to maintain branding and accessibility on every device.