Video

To add a video section, click “Add section” in the main sidebar on the left. Then customize the layout using its setting sidebar. The section’s setting sidebar may be located on the right side of your screen if you're using a large display. You can delete the section by clicking “Remove section” at the bottom. 

The video and general look and feel of your section is customizable from the section settings sidebar. The content overlaid on the foreground (text and buttons) is created by adding blocks in the main sidebar on the left. Each of those blocks can be customized using their own setting sidebar, which may be located on the right side of your screen if you're using a large display. Remember that blocks can be reordered using drag and drop in the sidebar, and deleted by clicking “Remove block” at the bottom of each block’s setting sidebar.

Why is this section useful

This section is useful to display background videos that auto-play, as an aesthetic element of your store. You can also make the video player accessible by adding the button block and adding the video link. Users will then hear the sound from your video if applicable, and will be free to use the Youtube or Vimeo player controls.

You can also leave the “Background video link” blank and only have a background image by default. Adding a button block with a video link will display a “play” button that opens the video in a popup.

Why is there no sound on my video by default?

The majority of browsers support autoplaying video, but most of them have disabled starting videos if they have sound. This is a limitation of browsers to maintain good user experience which we cannot bypass, nor suggest attempting to bypass. Autoplaying background videos must be used mostly as an aesthetic element of your design.

Styling pro tips

This can make a good hero section (first section at the top of the Home page) when set to full-width.

Video URL issue

Some merchants are experiencing issues when using a video URL from Youtube in Shopify, and get an error message from the Theme Editor:

Video URL Fix

When this happens, there's a simple fix that may work for you. We suggest that you try to change this the URL as follow: change the shorts/ part for this watch?v=

For example: