Video plays one video with its controls and sound: a campaign film, a runway clip, a look behind the scenes. It takes a video uploaded to Shopify, or a YouTube or Vimeo link.
Nothing plays until the customer presses play. A YouTube or Vimeo video is not even requested until then, so the section does not slow your page.
Where to find it
In the theme editor, click Add section and choose Video. You can add it to the home page or any other page that takes sections, as many times as you like.
Which video is used
If you set both a Shopify-hosted video and a YouTube or Vimeo link, the Shopify-hosted video is used. To switch to the link, remove the uploaded video.
For background videos
This section is for videos customers choose to watch. For a silent, looping video behind text, use the video setting on Image banner, Slideshow or Cover hero instead.
Layout options
Width keeps the video within the page width or runs it edge to edge. The heading sits above the video, and the Video description is shown as a caption below it.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Eyebrow | Text. | A short label above the heading, such as "New in". With Number sections on in theme settings, the section's number is shown before it. |
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Heading size | Small, Medium, Large or Extra large. Default: Medium. | How large the heading is set. |
| Shopify-hosted video | Video. | A video uploaded to Shopify. Takes priority over the link below. |
| YouTube or Vimeo link | Video link. | A YouTube or Vimeo link, used when no Shopify-hosted video is chosen. |
| Cover image | Image. | The image shown until the customer presses play. Without one, a Shopify-hosted video shows its own preview image. |
| Video description | Text. | Describes the video for customers using screen readers, and is shown as a caption below it. |
| Width | Page width or Full width. Default: Page width. | Within the page width, or edge to edge. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Background image | ||
| Image | Image. | An optional image behind the whole section, cropped around its focal point. Text keeps the color scheme's text color, so darken or lighten the image with the overlay until everything reads clearly. |
| Overlay color | Color. Default: #000000. | The color laid over the background image. |
| Overlay opacity | 0% to 90%. Default: 40%. | How strong the overlay is. 0% shows the image untouched. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Cover image | 2000 x 1125 px (16:9) | Cropped to the video frame around its focal point. Choose a frame that makes people want to press play. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Always fill in Video description. It tells screen reader users what the video is before they play it.
- If your video has speech, add captions: on the video file for Shopify-hosted videos, or in YouTube or Vimeo.