Video hero

A full-width hero that plays a silent, looping video behind your headline.

The video is atmosphere, not content — it fills the screen, a soft scrim keeps the words readable over it, and your heading, text and button sit on top. (If you want a video people watch, with sound and a play control, use the Video section instead.)

• Silent and automatic on a computer — no sound, no controls, no chrome. It simply loops behind the words.
• A still photograph on a phone — with a play button, so a visitor on mobile data chooses to start it.
• You build the words from blocks — a heading, a line of text and a button, arranged how you like.

Try it

Drag the three Minimum height sliders, edit the heading block, and use the screen-size and light/dark buttons in the preview header to see the phone fallback and dark mode.

←Video hero

Color scheme

Heading

Used as the accessible name and as the poster alt-text fallback when no explicit alt is set.

Layout

Minimum height on mobile

60%

Minimum height on tablet

75%

Minimum height on desktop

85%

←Heading block

Heading

Level

Heading 1Heading 2Heading 3Heading 4

Controls the HTML heading tag. Affects SEO, not visual size.

Size

DisplayLargeMediumSmall

Alignment

LeftCenterRight

Storefront preview

Timeless craft

Bring your story to life.

Shop now

A Shopify-hosted video cannot be uploaded from a docs page, so the preview shows the Poster image in the video's place — which is exactly what a phone visitor, and anyone who has asked for reduced motion, sees on a real store. Switch to the phone icon to get the real mobile fallback, play button and all. Everything else here is the shipped section.

How it works

Add the Video hero section, upload a Video and a Poster image, then compose the overlay from the theme's own blocks — heading, text and button. A fresh section starts with a heading ("Timeless craft"), a line of text and a "Shop now" button, so you are editing a hero rather than an empty band.

While the section has no blocks at all, the theme editor shows a prompt ("Add a heading, text, or button block to compose your hero overlay."). Your visitors never see it.

This section takes theme blocks only — it does not accept app blocks.

Composition

┌─────────────────────────────────────────────────┐
│                                                 │
│              video (or poster)                  │
│                                                 │
│          ░░░░ scrim, bottom-weighted ░░░░       │
│  Your heading                                   │  ← heading block
│  A line of text.                                │  ← text block
│  [ Shop now ]                                   │  ← button block
└─────────────────────────────────────────────────┘

The overlay is bottom-aligned and the scrim is a soft gradient that deepens towards the foot, so the words always land on the darkest part of the frame. The overlay text is painted white over that scrim rather than taking the colour scheme's ink — the scrim is a fixed dark wash, so the ink over it has to be fixed too, or a dark scheme would put black text on black.

What each visitor actually sees

Where	What plays
Computer, 750px and wider	The video, muted and looping. No play/pause control — it is background.
Phone, under 750px	The poster image with a round play button in the middle. Tap it and the video starts; the button then disappears.
Reduced motion	The poster. The theme does not start the video by itself. On a phone the play button still works if they want it.
A browser that blocks autoplay	The video element's own first frame — which is the poster image, since that is what the theme hands it.

The video element is on the page on a phone too; it loads quietly in the background. Showing the poster first is a presentation choice for a cleaner first paint on a small screen, not a bandwidth saving. Keep the video short and compressed.

Settings

Setting	What it does
Color scheme	Paints the section band behind the media and the button's colour. The overlay copy itself stays white over the scrim.
Video	A Shopify-hosted video. Muted, looping, autoplaying by default.
Poster image	The still shown on a phone and to anyone who has asked for reduced motion — and the frame a browser falls back to. Keep it close to the video's first frame.
Heading	Not the visible headline. This is the section's accessible name and the poster's alt-text fallback — what a screen reader announces on reaching the hero.
Minimum height on mobile	How much of the screen the hero fills on a phone — 40% to 100%, in steps of 5.
Minimum height on tablet	The same, from 750px up.
Minimum height on desktop	The same, from 990px up.

The three heights are a minimum, not a fixed size: a hero with a lot of overlay copy grows past it rather than clipping.

Composing the overlay

The blocks are the theme's standard ones, so everything you know about them applies here:

• Heading — the visible headline. Its Heading size controls how big it looks and its Heading level controls the HTML tag, independently, so you can have hero-scale type that is still correct for SEO.
• Text — a line or two under it.
• Button — the call to action; primary, secondary or ghost.

Add, remove and reorder them freely. A hero with only a heading is fine.

Presets

Available in every preset. The section has no per-preset styling of its own — the scrim and the white overlay ink are deliberately scheme-independent, so what changes between presets is the heading face and the button's colour.

Responsive & accessibility

• The hero is a labelled region. It carries role="region" and the Heading setting as its accessible name, so a screen-reader user hears what they have landed on. With Heading blank it falls back to a shipped default rather than announcing nothing.
• The video is decorative. It is muted and carries no controls on desktop, so it is never a media element a keyboard user has to escape from.
• The play button is a real button — 4rem across, keyboard-focusable, with a visible focus ring and a translated label.
• Reduced motion is honoured. The theme does not start playback for a visitor who has asked their device to reduce motion; they get the poster, and the hover scale on the play button is dropped.
• The poster carries real alt text — the image's own alt from Shopify admin, falling back to the Heading setting, then to a shipped default.
• The scrim is a fixed dark wash and the overlay ink is fixed white over it, which is what keeps the copy readable on every scheme in both light and dark mode.

Tips

• Always set a poster. It is the phone experience, the reduced-motion experience, and the fallback when a browser refuses to autoplay. In the theme editor an unset poster shows a placeholder; on your storefront the slot is simply empty.
• Choose a video where nothing important happens — slow water, drifting cloud, a hand working. Anything with a cut or a face pulls attention off the words.
• Keep it short and quiet: ten seconds that loop invisibly beats a minute that people notice restarting.
• Put nothing readable in the video itself. Text baked into a frame cannot be translated, cannot be read out, and gets cropped on a phone.
• Set the mobile height lower than the desktop one. 60% of a phone screen is already a large hero.

Related sections

• Video — for a video people watch, rather than a video behind words.
• Hero and slideshow — for a still image, or several.