Where to find it
In Online Store → Themes, open the unpublished theme editor, choose a compatible template, then Add section → Video. Availability follows the selected template and section group.
This section is not available in the Header group.
Set it up
- Choose Video source, then select the Shopify-hosted Video or a supported YouTube/Vimeo Video URL.
- Choose Click to play or Autoplay muted. Configure Loop video and Show controls for the intended viewing experience.
- For a Shopify-hosted video, optionally supply one or two WebVTT file URLs with their matching language codes and player display names. A track without both URL and language is omitted.
- Select Cover image when useful and choose Aspect ratio and Corner radius.
- Add Heading, Text or Button blocks and place the content Above video, Below video or Over video.
- For overlaid content, adjust position and overlay strength, then test playback and the separate buttons in preview. For Click to play, test the cover again after moving the section in the editor.
Main settings to review
| Setting | Choices or control |
|---|---|
| Video source | Shopify-hosted video · YouTube or Vimeo |
| Video | Choose a Shopify-hosted video |
| Video URL | YouTube / Vimeo URL |
| Playback | Click to play · Autoplay muted |
| Aspect ratio | Landscape (16:9) · Classic (4:3) · Square (1:1) · Portrait (4:5) |
| Content position | Above video · Below video · Over video |
| WebVTT file URL | Choose or enter a link |
| Caption language | Text |
| Caption name | Text |
| WebVTT file URL | Choose or enter a link |
Blocks and content
The following content blocks have their own setup and control reference. Nested blocks belong inside their parent, such as Slide, Tab, Tile or Story chapter.
App content requires a compatible installed app. Its setup and support come from that app; the theme does not supply the app service.
Content and media
- Use a video you are entitled to display and a cover with a matching composition. Keep the file appropriate for web playback instead of using an unnecessarily large master export.
- Autoplay is muted; actual playback can also depend on browser preferences and the external video's availability.
- Captions use separate .vtt files with direct HTTPS URLs. External hosts must allow cross-origin requests. Caption tracks always enable native player controls, including for muted autoplay, so visitors can choose a language or turn captions off.
Check the mobile layout
- Review the chosen ratio, cover, play control and overlaid content. Important copy should remain readable before playback starts.
- Test caption selection and readable cues on the browsers and real devices you support. A narrow desktop preview does not verify phone touch or fullscreen media controls.
Common questions and fixes
- The video is missing: check Video source and its matching field.
- An external video will not play: verify its URL and availability on the provider.
- Autoplay does not start: test the click-to-play alternative and the browser's media preferences.
- Captions are missing: check the direct WebVTT URL, language code, file contents and cross-origin access. YouTube and Vimeo use their own provider captions. These settings apply only to this Video module or a Video block, not product-gallery or Quick view videos.
Full control reference
Names, choices, ranges and defaults below are read from this version of the theme. Defaults are starting examples, not promises about your business. Some controls appear only for the matching layout. Block contents and preset starting values can differ from the base defaults.
All section controls (35)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Width / Section width | Page width · Full width · Custom width | Default: Page width. |
| Width / Custom width | 50–100 %; step 5 | Default: 80. Percentage of screen width. This control appears only when the relevant layout or related option is selected. |
| Video / Video source | Shopify-hosted video · YouTube or Vimeo | Default: Shopify-hosted video. |
| Video / Video | Choose a Shopify-hosted video | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Video / Video URL | YouTube / Vimeo URL | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Video / Cover image | Choose an image | Default: Not set. Optional. Used before click-to-play. Shopify-hosted videos use their preview image when this is blank. This control appears only when the relevant layout or related option is selected. |
| Video / Playback | Click to play · Autoplay muted | Default: Click to play. |
| Video / Loop video | On / Off | Default: Off. |
| Video / Show controls | On / Off | Default: Off. Caption tracks always enable player controls so visitors can select a language or turn captions off. This control appears only when the relevant layout or related option is selected. |
| Captions 1 / WebVTT file URL | Choose or enter a link | Default: Not set. Use a direct HTTPS link to a .vtt file. External hosts must allow cross-origin requests. Leave blank to omit this track. This control appears only when the relevant layout or related option is selected. |
| Captions 1 / Caption language | Text | Default: Not set. Enter the language code matching the file, for example en, es or zh-CN. Required when a file is set. This control appears only when the relevant layout or related option is selected. |
| Captions 1 / Caption name | Text | Default: Not set. Name shown in the player, for example English. Uses the language code when blank. This control appears only when the relevant layout or related option is selected. |
| Captions 2 / WebVTT file URL | Choose or enter a link | Default: Not set. Use a direct HTTPS link to a .vtt file. External hosts must allow cross-origin requests. Leave blank to omit this track. This control appears only when the relevant layout or related option is selected. |
| Captions 2 / Caption language | Text | Default: Not set. Enter the language code matching the file, for example en, es or zh-CN. Required when a file is set. This control appears only when the relevant layout or related option is selected. |
| Captions 2 / Caption name | Text | Default: Not set. Name shown in the player, for example English. Uses the language code when blank. This control appears only when the relevant layout or related option is selected. |
| Layout / Aspect ratio | Landscape (16:9) · Classic (4:3) · Square (1:1) · Portrait (4:5) | Default: Landscape (16:9). |
| Layout / Corner radius | 0–40 px; step 2 | Default: 0. |
| Content / Content position | Above video · Below video · Over video | Default: Below video. |
| Content / Content width | 30–100 %; step 5 | Default: 70. |
| Content / Gap | 0–64 px; step 4 | Default: 16. |
| Content / Horizontal position | Left · Center · Right | Default: Left. This control appears only when the relevant layout or related option is selected. |
| Content / Vertical position | Top · Center · Bottom | Default: Bottom. This control appears only when the relevant layout or related option is selected. |
| Content / Overlay opacity | 0–80 %; step 5 | Default: 30. This control appears only when the relevant layout or related option is selected. |
| Section / Color scheme | Choose a color scheme | Default: background. |
| Section / Top padding | 0–160 px; step 4 | Default: 64. |
| Section / Bottom padding | 0–160 px; step 4 | Default: 64. |
| Section / Mobile padding top | 0–96 px; step 4 | Default: 40. |
| Section / Mobile padding bottom | 0–96 px; step 4 | Default: 40. |
| Media / Section background image | Choose an image | Default: Not set. |
| Media / Section background position | Image focal point · Top · Center · Bottom | Default: Image focal point. This control appears only when the relevant layout or related option is selected. |
| Media / Section background behavior | Scroll with section · Fixed to viewport | Default: Scroll with section. This control appears only when the relevant layout or related option is selected. |
| Media / Section background overlay | 0–80 %; step 5 | Default: 0. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on desktop | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on mobile | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Section anchor | Text | Default: Not set. Optional. Use a unique name for links that jump to this section. |