How to set a background video for a Section?

Author: Anna Nguyen 79 views

In this document, I will guide you through how you can use a video as a section background with a few steps like so:

  1. After you right click on a Section there should be a dropdown list show up.
  2. Click on Edit -> Video Background option should show up.
  3. You can select the video here, there is also other options for you to choose.

We have a couples of video source to choose from:

  • Upload video: This accept videos uploaded from shopify.
  • Custom video url: This need to be an URL with .mp4 at the end.
  • Youtube: Accept Youtube videos, cannot autoplay on mobile devices and will only show thumbnail.
  • Vimeo: Accept Vimeo videos.

I’ll explain the options of the video background below:

  • Loop: This loop the video when it ends.
  • Autoplay: This makes the video play instantly by itself. Be sure to also tick the “Turn off audio” option so this can work properly.
  • Turn off audio: It will turn off the sound of your video.
  • Auto play/pause when in view: This will make it so that unless you scroll to the video, it will not play or pause. Note that this feature won’t work on Safari

Some notes for videos option

  • On Safari browser, many customers turn on the Low Power Mode on their phones, this is the reason the videos do not automatically play on mobile devices.
  • You can add a background overlay so the text on the foreground is easier to look at, this affects positively on customer experience.

Videos don’t play on the live page when Autoplay is turned on.

When you turn on Autoplay and the video doesn’t play on Live page, this might happen because the Turn off audio is not selected. Please note that the Autoplay function may only works when you mute the video.

Leave a Comment

On this page
Start a free trial and enjoy 3 months of Shopify for $1/month on select plans.