Video: Add an MP4 looping video to your homepage

This tutorial will allow you to display a full-width MP4 video on your homepage. 

How to:

1

Create a new section file

Open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

In the Sections folder, choose Add a new section:

Call the file:

index-mp4


Example:

Use the Create section button to complete.

Delete all the default code that's generated:

70541e37cc480d81d8560bfb6d005897.png

Replace with all the code from this file (click link to view code):

OPTION 1

Pipeline 5.0 and higher:
Click link to view code

OPTION 2

Earlier versions of Pipeline:
Click link to view code

Save the file.

2

Add the section in the Theme Editor

Open the Theme Editor. If you're using a live/published theme:

For a draft theme, use the Customize link for that theme:

Next, under the Sections:

Add the new section:

At the bottom, in the video group, add the MP4 Video section:

In the sections settings, a video URL:

The default video address is a sample video (ice time-lapse). You can add the full address of your own video here. The Video URL must be a complete address. Here is the full URL for the sample video:

https://cdn.shopify.com/s/files/1/2018/8867/files/ice.mp4

Save your section settings in the Theme Editor

3

Upload your MP4 video

Open your Shopify Files manager (under the main Settings in the main Shopify Admin):

Choose Files:

Upload an MP4 video that you already have downloaded or created:

The Video URL to use is located here, you'll need to copy the entire address (click inside and select the entire address):

You can now use that address in the section settings for Video URL. Save your theme settings after making any changes. 

To try some free videos, you can download sample videos here:

https://videos.pexels.com/

Notes

MP4 video files are very slow to load on your page. Videos from YouTube and Vimeo are streaming videos which will load much quicker than an MP4 video. You're homepage will show a blank section until the video is fully loaded. Therefore, try and keep your video files very small. I would recommend about 5MB or less (the ice.mp4 sample video is 2MB). Remember, this will slow down the load time of your site. If speed is important to you, this may not be a section to use on your site. Once the video is loaded and cached in your browser, it will load much quicker the next time you load your site. 

We've had limited testing with this section feature. If you find that it's not working on some devices or browsers, you can report that to us but we will not directly support this customization.