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
Screenshots pending
Captures for Layered video and text at desktop and mobile widths are generated from a live store by
npm run shots. They appear here automatically once that has run.
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.
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 Background media type is set to Image.
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 Feature media type is set to Image.
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. Mobile sizing and overlap are controlled by the Mobile layout settings below.
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. If no desktop asset is selected, the mobile asset is used at every size.
Select a mobile-optimized video. Leave blank to use the desktop feature video. This asset is used at every size when no desktop video is selected.
Select a mobile-optimized image. Leave blank to use the desktop feature image. This asset is used at every size when no desktop image is selected.
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.