How to Add Video to a Shopify Homepage

When it comes to making online sales, one of the drawbacks of physical shopping is that customers can’t see the product in the same way. An image may not do the product justice or allow you to see it in action. Video is an effective tool that solves these issues and allows customers to get a feel for a brand and its values, which has been shown to improve conversions and sales. By the end of this tutorial, you will know how to add video to your Shopify homepage to boost views and sales.

How to add video to your Shopify homepage

Here is a brief look at the steps to add video to your Shopify homepage.

1. Log into your Shopify account.

2. From the admin panel go to Settings > Files.

3. Click Upload files, select a video, and click Open.

4. Add the video's URL to the URL column on the Files page.

5. Go to Sales channels > Online store > Themes.

6. Find your theme, and click Actions > Edit code.

7. Click Sections > Add new > and name it.

8. Paste the code into the text box and Save.

9. Click Sales channels > Online store > Themes > Customize.

10. Click Add section > Homepage video.

11. Save changes.

Let’s take a look at each step in more detail.

1. Log in to your Shopify account. 

Log into your Shopify account like you usually do to view your shop or make edits.

2. Find the "File" section.

Find your admin panel, click on Settings, find the File tab, and select it.

3. Upload your video.

From the Files tab, click Upload file, which will create a popup. Select a video from the files on your computer and click Open. Shopify has an upload limit of 1 GB and a length of 10 minutes. You can upload .mp4 or .mov video types.

4. Copy the URL.

Copy the uploaded video’s URL from the URL column on the Files page. Paste the URL in a document or note that you can access later.

5. Find your theme.

Go to the Sales Channel tab and find your Online store. From here, go to the Themes tab.

6. Edit the theme.

On the Themes tab, scroll through to find your theme, click Actions, and then Edit theme.

7. Name your video.

Go to the Sections drop-down menu and click Add a new section. Give it a descriptive name, such as “homepagevideo.”

8. Add custom code.

When you create and name your video, a popup box appears. Remove the default code from the box, paste it into your custom HTML code, replace https://video.link.goes.here with your video link, and press Save.

Top Tip

You can use the following code if you don’t know how to create custom HTML code:

<div class="section-homepage-video">

<video autoplay muted loop playsinline class="video-homepage">

<source src="https://video.link.goes.here" type="video/mp4">

</video>

</div>

{% schema %}

{

"name": "Homepage Video",

"class": "index-section index-section--flush",

"settings": [],

"presets": [{

"name": "Homepage Videos",

"category": "Text"

}]

}

{% endschema %}

{% stylesheet %}

.section-homepage-video{

width:100%;

}

.video-homepage{

width: 100%;

height: auto;

}

{% endstylesheet %}

{% javascript %}

{% endjavascript %}

9. Customize themes.

Click the Sales Channel tab, then click Online store and Themes and Customize. 

10. Select your video.

From here, click Add section to show where you want the video to go, and select the video that you named earlier from the list. 

11. Save changes

Save your changes, and that’s it! Your video should autoplay on your homepage. 

Using a plugin

If you'd like to add video to your Shopify store more easily, you can use a plugin. However, the majority are not free, so consider whether the cost justifies the gains to your store.

360-degree images

An alternative to adding video to your Shopify homepage is using 360-degree images. Shopify supports this function through its Magic 360 app, which allows you to upload multiple product images. Customers can zoom in and out and view a product from any angle. 

Learn more with Coursera

To learn more about enhancing your e-commerce and digital business, you can pursue various short courses and Professional Certificates on Coursera. A great starting point is the Google Digital Marketing and E-commerce Professional Certificate, which provides the fundamentals of working in e-commerce and digital marketing and aims to provide you with the skills to be job-ready within six months or less.