Video

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on videos settings
3. Company XYZ documentation on headers settings
4. Company XYZ documentation on section padding settings
5. Company XYZ documentation on section backgrounds settings
6. Company XYZ documentation on separators settings
7. Company XYZ documentation on visibility settings
8. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this section to feature a single video with flexible playback, sizing, and supporting text. It works especially well for product demonstrations, tutorials, campaign storytelling, and other moments where video should lead the page. For a broader overview of how sections are structured in the theme editor, see Shopify documentation on sections and blocks

Video settings

This group controls your video source and how the media frame behaves on the page. You can use a hosted video or a Vimeo or YouTube link, depending on how you prefer to manage quality and delivery. For broader guidance, see the video settings reference.

A poster image is especially useful with hosted video because it gives visitors a polished preview before playback starts. It can also create a stronger first impression than relying on a random opening frame.

Aspect ratio settings help you decide whether the video should keep its natural proportions or fit a more controlled layout shape. Use a fixed ratio when you want consistent spacing across the page, and use the default ratio when the original framing matters most. Mobile can follow the desktop ratio or use its own setting if the video needs a different crop feel on smaller screens.

Max video width is helpful when the section should feel more editorial and less edge-to-edge. A full-width video creates more impact, while a narrower frame can feel more refined when paired with captions or header content.

Autoplay starts the video as it scrolls into view and pauses it after visitors move past it. Looping works best for short, repeatable clips, while player controls are more useful for longer or more informational videos.

If you enable autoplay, keep the video muted and make sure the section still makes sense without sound.

Caption settings

Use the caption area to place a short note above or below the video. This is a good fit for credits, product context, a brief takeaway, or a small supporting detail that should stay close to the media.

Keep captions concise so the section still feels video-first. Alignment, position, and size settings help the caption feel integrated with the rest of the layout rather than competing with the video.

Overlay settings

Overlay settings add a color or gradient on top of the video. They are useful when you want a stronger mood, better contrast, or a more consistent visual treatment across different footage.

Use opacity carefully. A light overlay can improve readability and polish, while a heavy overlay can hide detail and make the video feel flat.

Overlay style controls when the overlay appears. Showing it only when paused keeps playback more open, while always showing it gives the section a more stylized look.

Caution

Choosing Always show turns off video player controls in this section, even if controls are enabled elsewhere.

Alignment settings

These settings control how the section’s content aligns on desktop and mobile. They matter most when you are using a heading, caption, or button along with the video.

Matching alignment across screen sizes usually creates the cleanest presentation. If your mobile layout feels cramped, adjusting mobile alignment separately can make the section easier to scan.

Color settings

These color controls override the default colors for this section’s text, icons, and borders. Use them when the video, overlay, or background makes your usual colors too low-contrast.

Apply overrides selectively so the section still feels consistent with the rest of the site. In most cases, the most important goal is keeping text readable against the media.

Standard section settings

Header settings

Use the shared Header settings to add introductory content above the video. A heading, short supporting text, and optional button can help explain why the video matters and guide visitors to a next step.

Keep header content brief so it supports the video instead of overwhelming it. If you add a button, use one clear action.

Padding settings

Use the shared Padding settings to control the space above and below the section. More padding helps the video feel like a distinct feature, while tighter spacing connects it more closely to nearby content.

Check spacing on mobile as well as desktop. A video section that feels balanced on a large screen can feel oversized on smaller devices.

Section background settings

Use the shared Section background settings to add a color, gradient, image, or background video behind the section. This is most useful when you want the surrounding area to feel more immersive or branded.

Be careful when combining a strong background with a video overlay and custom text colors. Too many layered effects can reduce clarity and make the section feel heavy.

Separator settings

Use the shared Separator settings to place a line above or below the section. Separators can help define the video as its own content block without needing large spacing changes.

A subtle separator works well in long, editorial-style pages. If the section already has strong visual contrast, no separator often feels cleaner.

Visibility settings

Use the shared Visibility settings to show or hide this section by device size. This is useful when the same video treatment does not work equally well on desktop and mobile.

If you hide the section on one breakpoint, make sure the page still communicates the same message clearly there.

Width settings

Use the shared Width settings to control the overall section width and the content width inside it. This helps you decide whether the video should feel tightly framed, comfortably contained, or more expansive.

Content width is usually the main setting to adjust first. Because preview framing can affect how width changes appear, it is worth checking the result on the live page before finalizing it.

Usage notes

1. Choose the right source. Use hosted video when you want direct control over the file, and use a video URL when external hosting better fits your workflow.
2. Match layout to the footage. Pick an aspect ratio and width that support the video’s framing instead of forcing it into an awkward presentation.
3. Keep playback expectations clear. Reserve autoplay and looping for short clips that still communicate well without sound.
4. Review mobile separately. Check desktop and mobile settings together, because alignment, visibility, and media choices can change the section’s crop, spacing, and readability.
5. Use overrides with intent. Blank or default-style colors usually preserve the surrounding look, while explicit colors, gradients, or media choices make the video area feel more self-contained.
6. Add blocks thoughtfully. If you build out the section with blocks, recheck the whole composition, since block-driven content can replace or expand simpler section-level content.