Layered video and text
A full-bleed background film with an opaque content panel and a second portrait film layered across both. Copy lives in section settings; buttons are blocks.
- Merchant-addable
- Yes
- Settings
- 36
- Block types
- 1
- Max blocks
- 2
- File
sections/video-with-text.liquid
Used by default on: Home
When to use it
Demonstrations, founder statements, and anywhere motion explains faster than text.
Setting it up
- Add the section and set the background and feature media.
- Fill in Heading, Subheading, and Body text in the section settings.
- Add up to two Button blocks. A button without a link appears disabled instead of disappearing.
- Set the layout, mobile layout, and color schemes.
- Videos play automatically by default. The background video control stays hidden until visitors hover over, tap, or tab into the section; turn on Always show background video controls to keep it visible.
Where the content comes from
Section settings own the media and all copy; blocks own the buttons.
Notes and cautions
- Leave a button link empty to show a disabled placeholder until the destination page exists.
- Each video loads only when it scrolls into view and plays. Until then its preview image shows, sized for the screen.
Configure layered video and text
Section settings own background and feature media and copy; button blocks own links. Upload videos or choose Image for a still. An unconfigured feature video offers Shopify’s example video, loaded after activation with a native fallback without JavaScript. Your uploads replace it. The ambient background remains decorative and does not add a second interactive player beneath the copy.
The decorative full-width background uses a lifestyle placeholder when empty. The foreground video offers Shopify’s example video until you select campaign media.
Section settings
Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.
Media and content
Use section settings for media, copy, and layout. Use blocks for up to two buttons.
Use a silent looping video. If it includes meaningful spoken content, provide captions, accessible audio controls, or an equivalent alternative. 16:9 aspect ratio recommended.
An image fills the section when you choose Image for Background media type.
Use a silent feature video. If it includes meaningful spoken content, provide captions, accessible audio controls, or an equivalent alternative. 4:5 aspect ratio recommended.
Briefly describe meaningful visual action for screen-reader users.
An image overlaps the content panel when you choose Image for Feature media type.
Videos stay muted and pause off screen. Reduced-motion preferences disable automatic playback.
When off, the play and pause control appears when visitors hover over, tap, or tab into the section.
Layout
Shows more of the background video through the content surface.
Desktop feature media
These controls apply to screens 750 px and wider. The Mobile layout settings below control mobile sizing and overlap.
Controls the base feature width on desktop. Square and landscape frames receive additional width for visual balance.
Applies to desktop feature media at 750 px and wider. Use Mobile feature media aspect ratio for narrow screens.
Controls how far the feature media crosses the panel edge on desktop without changing the panel width or covering its content.
Mobile layout
Changes the mobile composition without affecting the desktop layout.
Reverses the content and feature media order in the Stacked mobile layout.
Controls the feature media crop on mobile without changing the desktop proportion.
Uses a mobile-specific feature asset below 750 px. The mobile asset appears at every size when you leave the desktop asset empty.
Select a mobile-optimized video. Leave blank to use the desktop feature video. This asset appears at every size when you leave the desktop video empty.
Select a mobile-optimized image. Leave blank to use the desktop feature image. This asset appears at every size when you leave the desktop image empty.
Appearance
Uses the global motion style and respects reduced-motion preferences.
Blocks
Blocks are added, reordered, duplicated, and removed inside the section. Each type has its own settings.
Button cta_button_block
A button without a link appears disabled.