Video with text

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on the rich text block
3. Company XYZ documentation on the video block
4. Company XYZ documentation on headers settings
5. Company XYZ documentation on section padding settings
6. Company XYZ documentation on section backgrounds settings
7. Company XYZ documentation on separators settings
8. Company XYZ documentation on visibility settings
9. 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 pair a video with supporting text in a clean two-part layout. It works especially well for product explainers, brand stories, tutorials, and campaign content where the video needs context, a headline, and a clear next step. For a broader overview of how theme content is organized, see Shopify documentation on sections and blocks

Core settings

These settings control the overall relationship between the video and text blocks. You can also change the order of the blocks to decide which side appears first.

1. Content alignment sets how the two sides line up vertically when shown side by side. Top alignment suits editorial content, middle feels more balanced, and bottom can help both sides end on a similar visual line.
2. Enable sticky content keeps the shorter side fixed near the top while visitors scroll through the taller side. This is most useful when one block is much longer than the other.
3. Stack on mobile switches the section to a single column on smaller screens. Use it when side-by-side content feels cramped or when the video needs more room.
4. Stack on desktop turns the layout into a vertical sequence on larger screens as well. This works best when the content reads more naturally one item after the other than in two columns.

Sticky content works on desktop only and does not apply when stacked layouts are active.

Color settings

These section-level color controls let you override the default text styling for this section. They are helpful when the section uses a custom background or when you need stronger contrast around the media.

Use these settings carefully if your video or section background is already visually busy. Small color changes can improve readability more effectively than adding extra styling.

Supported block types

1. Rich text
2. Video

Rich text block

The Rich text block provides the written side of the layout, including heading, body copy, icon, and an optional button. See Company XYZ documentation on the Rich text block.

1. Use it for the main explanation, supporting story, or call to action that gives the video context.
2. Keep the message focused if the video is doing most of the visual work.
3. This block also includes its own background, color, and visibility controls, which can help the text side feel more like a framed content panel.

Video block

The Video block displays hosted video or a Vimeo or YouTube link, with controls for aspect ratio, playback, width, captions, overlay styling, and alignment. See Company XYZ documentation on the Video block.

1. Use a poster image when needed so the section looks polished before playback starts.
2. Choose aspect ratios separately for larger and smaller screens if the default framing feels awkward.
3. Set a max width when the overall section is wide but the video should stay visually contained.

If the video overlay is set to Always show, video player controls are turned off even when controls are enabled elsewhere.

Standard section settings

Header settings

Use Header settings to add an optional intro above the side-by-side content. This area is useful for a section title, supporting copy, and a button when the video needs more setup or a stronger call to action.

Padding settings

Use Padding settings to control the space above and below the section. Reduce spacing when this section should feel tightly connected to nearby content, or add more spacing when the video needs more visual separation.

Section background settings

Use Section background settings to add a color, gradient, image, or video behind the full section. Backgrounds can strengthen the mood of the section, but they can also compete with the video and text if overused.

Caution

If the section already contains visually rich video, a strong background image or video can make the layout feel crowded and reduce text clarity.

Separator settings

Use Separator settings to add a line above or below the section. This can help distinguish the section from nearby content when the page uses similar layouts back to back.

Visibility settings

Use Visibility settings to show or hide the section by device size. This is useful when you want a different content flow on mobile than on desktop.

Width settings

Use Width settings to control both the section wrapper and the inner content width. Wider settings give the video more presence, while narrower content widths can make the text side easier to read.

Usage notes

1. Lead with one priority. Decide whether the video or the text is the main focus, then keep the other side supportive so the section does not feel overloaded.
2. Review both viewports. Desktop and mobile controls can change alignment, visibility, and media behavior, so check both sizes before publishing.
3. Use block content intentionally. Adding blocks can materially change the section, so make sure new video or text blocks still support the original message.
4. Keep defaults simple. Blank or transparent styling usually preserves the fallback look, while strong colors, gradients, or media overrides make the section feel more independent.
5. Check media framing. Separate desktop and mobile media can crop and read differently, so confirm that both versions stay clear and readable.
6. Test sticky layouts in context. Sticky content works best when one side is clearly shorter and the desktop layout remains unstacked.