Video
One video with a heading above it, inline in the page or as a banner with the text over it.
What it does
Shows one video with the theme’s section header above it. Inline places the video in the content column at the ratio you choose. Banner stretches it edge to edge and lays the heading over it. An uploaded video plays in the page with the browser’s own controls; a linked video shows a poster image and loads the YouTube or Vimeo player on click.
When to use it
For the one product film, a how to use clip, a founder message. Below the fold on the home page or on the product page after the buy box. For a moving image at the very top of the page, use a Slideshow slide with a video instead; it has the overlay and the text positions a hero needs.
Setting it up
- Upload the Video, or paste a Video link and upload a Poster image.
- Write the Video description.
- Choose Layout and Video ratio. 16:9 for a film, 4:5 or 1:1 for a clip shot on a phone.
- For an uploaded clip that should run on its own, turn on Play video automatically and Loop the video.
Settings
| Setting | Type | What it does |
|---|---|---|
| General | ||
| Color scheme | Color scheme | The surface of the section: background, text, buttons and accent as one contrast-checked set. Schemes are edited under Theme settings, Colors. |
| Width | Select | Fixed width keeps the section inside the page margin so it lines up with the sections around it. Full width runs it to the edge of the screen.Options: Fixed width, Full width · Default: Fixed width |
| Layout | Select | Inline shows the video in the content column with the header above it. Banner runs it edge to edge with the header laid over it.Options: Inline, Banner · Default: Inline |
| Header | ||
| Heading | Text | The heading of the section. Italicize a word to set it in the accent font.Default: See it in action |
| Size | Select | How large the heading renders, on the shared type scale from Theme settings, Typography.Options: Large, Medium, Small, Extra small · Default: Small |
| Heading level | Select | Page heading is the one heading that names what the whole page is about; use it once per page, usually on the first section. Everything else is a section heading.Options: Page heading, Section heading · Default: Section heading |
| Accent font | Select | Highlight words puts the italicized words on the accent font. Whole heading sets the entire line in it. Off keeps the heading font throughout.Options: Highlight words, Whole heading, Off · Default: Highlight words |
| Text | Rich text | A short paragraph under the heading. Keep it to one or two sentences. |
| Content alignment | Select | Whether heading, text and buttons sit left, centered or right inside the section.Options: Left, Center · Default: Left |
| Link label | Text | Text of the link at the end of the section header, such as View all. Leave empty for no link. |
| Link | Link | Where the header link leads. |
| Video | ||
| Video | Video | A video uploaded to your store. Plays here directly and is preferred over a video link. |
| Video link | Video URL | A YouTube or Vimeo link, used when no uploaded video is set. The player loads only when the visitor presses play. |
| Poster image | Image | The still shown before a YouTube or Vimeo video loads. |
| Video description | Text | What happens in the video, for people using a screen reader. |
| Video ratio | Select | The shape of the video frame. Adapt follows an uploaded video; a link is always 16:9.Options: 16:9, 4:5, 1:1, Adapt to video · Default: 16:9 |
| Play video automatically | Checkbox | Starts an uploaded video muted and looping as soon as it is on screen.Default: off |
| Loop the video | Checkbox | Starts an uploaded video again when it ends.Default: off |
| Section padding | ||
| Top padding | Range | Space between the top of the section and its content. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 60 |
| Bottom padding | Range | Space between the content and the bottom of the section. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 90 |
This section also accepts app blocks, so apps that provide one can add content here.
Tips
- Upload the video to Shopify (Content, Files) rather than linking YouTube when you can. It plays without a third party player, needs no cookie notice, and can autoplay.
- A YouTube or Vimeo player is loaded only when the visitor presses play. Until then the poster image is all that is on the page.
- Autoplay is muted and looping, and only for uploaded videos. Keep autoplay clips short, 10 to 20 seconds, and give them a poster for the moment before they start.
- Write the Video description. It is the only thing a visitor with a screen reader gets from a video.