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 your Code Editor:

https://myshopify.com/admin/themes/current

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):

https://gist.githubusercontent.com/whistlerbrad/255fc190328fbee075d45187242bb3ca/raw/adf4b11bf18121f23274f20f4952c455c3d96373/index-mp4-text

Save the file.

2

Add the section in the Theme Editor

Customize your theme:

https://myshopify.com/admin/themes/current/editor

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:

https://myshopify.com/admin/settings/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. 

Still need help? Contact Us Contact Us