What is the background video section?
The background video section displays prominent text with a video playing in the background. It plays without audio on an automatic loop and enables sharing promotional messages, whilst adding energy and movement to the page.
A good background video can improve the overall customer experience by showcasing products or services in action. Videos also tend to be more engaging than static images, which could encourage visitors to stay on your site longer and potentially increase conversions.
How to create a background video section
Steps
- Open the Theme Editor.
- On the left hand side, click Add section and add a Background video section.
- There are two different methods to choose a video.
Video upload: Select a video file (e.g. an MP4) hosted on your Shopify store.
External video: This is a video from an external link and supports YouTube or Vimeo videos.
It is also recommended to add a Custom placeholder image that will display in the place of the video while the video is loading, or if it cannot autoplay. This could be due to reasons such as a user’s poor internet connection, limited browser support or slow page load times.
FAQs
Why is my video not playing on mobile?
Whether a background video plays on mobile is controlled by the device/browser rather than the theme. Background videos can slow down page loading, use a lot of mobile data, and consume the device's battery.
Your device/browser may decide not to play the video if:
- Your phone is low on battery or is in 'Battery saver mode'.
- Your data signal is weak.
- The video has sound.
- The video is too large.
- The current page contains multiple videos or is slow to load.
- The video has been encoded in the incorrect format (see the next FAQ for more).
- Or any combination of the above.
Read Google's Autoplay policy in Chrome article for more.
The most reliable (although not guaranteed) way to get a background video to autoplay is to upload the video file in an MP4 format to Shopify in the Content > Files area of the Shopify admin.
If the video still does not play, see the FAQ below.
Why is my MP4 video still not playing/showing as just black?
Temporarily change the video URL to this:
If this plays, then your video has not been encoded correctly and will need to be encoded in the h.264 formats. If you search for 'h.264 mp4 encoders' online, you should find sites that provide a facility to do this.
Why does my video have no sound?
Background videos don’t play sound. They are auto-playing videos that are designed to sit in the background to add a visual design. If you want to have videos that play sound, you can use the default video section.
Browsers don’t like auto-playing videos with sound when you land on a page, most will block the video, causing issues. Also, it can be a negative experience for a customer to land on a site and be greeted with a sound that they didn’t accept to play.
Read Google's Autoplay policy in Chrome article for more.
How big should my video file be?
Keep it under 3mb if possible, although there are no limits imposed. Remember, the video can loop, so if it's possible to make the loop seamless, it can appear longer than it actually is.
How do I use metafields to show a different video for each product?
After version 7.0.0, both video uploads and external videos are compatible with metafields on the product page. If you are using a version before 7.0.0, then metafield support may vary.
The video upload requires a product metafield of type File, while the external video requires a product metafield of type Text.
Video upload: A video, usually an MP4, hosted on your Shopify store.
Steps
- To use a metafield to link to a Video uploaded in Shopify, open the Shopify admin and go to Settings > Custom data.
- Click on Products to create a new product metafield for your video. The metafield should be a Product metafield of type File.
- In the Shopify admin, go to Products, edit a product and scroll down to find the newly created file metafield. Select a file that contains your video and Save.
- Open the Theme editor, and select Products and the desired product template from the dropdown at the top.
- View the product page and scroll to your video section.
- Next to Video upload select the Connect dynamic source icon to link to the File product metafield containing the video.
External video: This is a video from an external link and supports YouTube or Vimeo videos.
Steps
- To use a metafield to link to an external video, open the Shopify admin and go to Settings > Custom data
- Click on Products to create a new product metafield for your video. The metafield should be a Product metafield of type single line text.
- In the Shopify admin, go to Products, edit a product and scroll down to find the newly created product metafield of type text. Paste in a link to the Youtube or Vimeo video for that product and Save.
- Open the Theme editor, and select Products and the desired product template from the dropdown at the top.
- View the product page and scroll to your video section.
- Next to External video select the Connect dynamic source icon to link to the Text product metafield containing the link to the external video.
Note - Metafields of the appropriate type held in metaobjects can also be used.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us