Want to add a video to your Shopify product page but not sure how?
Then you have come to the right place as we have created a quick tutorial showing you step-by-step the different ways you can do this.
1. Add Video To Media Gallery
The first way you can add a video to your Shopify product page is to add it to your media gallery, which is the same place where you upload your product images.
To do this, go into the product you want to add the video to and scroll down to the media section (just under the title and description box and you will see two options:
- Add File – this is where you upload the video directly to your Shopify store, just be aware that there are some restrictions on videos you can upload to Shopify, which are:
- Up to 10 minutes in length
- Max file size 1GB
- Video resolution up to 4k
- Must be a .mp4 or .mov file
- Add from URL – this is if the video is hosted outside of Shopify, such as on YouTube or Vimeo, simply copy the URL of the video and paste it into the box
If you are uploading a video to Shopify, it will take some time to upload and render before it will play and the larger the video, the longer this takes.
It is as simple as that to add a video to your Shopify media but what if you want these videos to autoplay?
We tried all the solutions that people have recommended but none of them worked on our demo store, some premium themes do come with autoplay as an option but it isn’t a guarantee that they will play as it depends on the users:
- Device
- Browser
- Browser settings
2. Add Video to Product Description
The second method to add a video to your product page is to add it to your description and as with adding it to your media gallery, you can do this with videos uploaded directly to Shopify or hosted externally (such as on YouTube or Vimeo).
They are slightly different, so we will cover them both below:
Uploading A Video To Shopify
Step 1: Upload Your Video
The first step is to upload your video to Shopify and this is done by:
- Going into your Shopify dashboard
- Clicking content from the sidebar, then clicking Files
- Then click the Upload Files button in the top right-hand corner
- Select your video file from your device
- Wait for the video to upload and render
Once the video has been uploaded, you want to copy the link for the file, which is the button that looks like a paper clip in the column furthest to the right.
Step 2: Go To Your Edit Product Page
Once you have uploaded the video to your Shopify store, you then want to go to your edit product page and find the description box (should be one of the first sections on the page).
You then want to open up the HTML editor for the description box, which is the </> symbol in the top right-hand corner.
The first thing you want to do once you are in the HTML editor is to paste the code for the video that you copied earlier (doing it this way saves going backward and forward).
Next, you want to copy and paste the code below into the HTML editor below where you just put the video URL, once this has been pasted, you then want to cut and paste the video URL into the <source src=”enter-video-URL-here”> so that the video URL replaces the enter-video-URL-here text.
<video playsinline="" controls="" width="100%">
<source src="enter-video-URL-here">
</video>Then when you come out of the HTML editor (by clicking the </> button) you will then see your video displayed in the description box and if you preview the page, you will see the video appears as part of your description.
For some reason, the visual editor can make it difficult to add text below the video, fortunately, this can easily be fixed by going back into the HTML editor and adding <p>new text</p> on the line below the closing video tag (</video>).
Autoplay
Doing this will add the video to your description but your visitors will need to click on the play button in order to watch it but with some additions to the code above, you can add autoplay commands.
We thought we would be nice and add the commands to the code so you can either copy the whole code or just the additional commands:
<video playsinline="" autoplay="" muted="" controls="" width="100%">
<source src="enter-video-URL-here">
</video>This will autoplay the video (depending on the browser, device and settings) and the video will be muted for your visitor, which is something that all browsers require in order to autoplay videos.
If you want the video to play on loop, then you can add the following attribute after controls:
- loop=””
You can check whether the autoplay and loop are working either in the visual editor (clicking the </> button to take you out of the HTML editor) or by previewing the product.
Once you are happy with how the video is performing, simply save your product and the page will be updated with the video now part of the product description.
Embedding A YouTube Video
The second option is to embed a video that is hosted elsewhere and we’ll be using YouTube as an example (as we have a YouTube channel).
Step 1: Get The Video Embed Code
This is done by going to the video that you want to embed (has to be done on YouTube, not through YouTube studio) and click on the Share button under the video.
When you click on the share button, a pop-up will appear with all the options for sharing the video.
You then want to click the Embed option and it will show you a screen with the code that you want to copy.
There are a couple of options you can select for the video, including:
- Start at – this lets you start the video from a chosen time
- Show player controls – show whether the video controls show
- Enhanced Privacy Mode – YouTube won’t collect any data unless the video is played
This is down to you which options you want but once you have got it set up the way you want, click copy and it will copy the code to your computer’s clipboard.
Step 2: Add The Code To Your Product Page
This step is a little bit easier than if you upload a video as you simply go to your edit product page and go to the description box but this time, instead of going into the HTML editor, you want to click on the insert video option.
When you click on this button, a pop-up window will appear where you can paste the code that you copied from YouTube.
Once you have pasted the code, simply click Insert video and it will be added to your product description.
Autoplay
As with the videos you upload to Shopify, you can easily set YouTube videos to autoplay but it does require adding some parameters to the embed code.
You can do this before you insert the video by adding it to the code in the insert video pop-up or you can do it afterward by editing the code, which is done by switching to the HTML editor (click the </> button in the top right-hand corner of the description).
There are three parameters that you need to add to the code in order to autoplay the video and they are:
- enablejsapi=1 (this allows the player to be controlled via the iframe API)
- autoplay=1
- mute=1
And you want to add these after the URL of the video, using the video URL that we got the iframe code for above, this is what it would look like:
Original YouTube URL:
src="https://www.youtube.com/embed/n55-wJQN70c?si=pTVGdwYpBRzPWDf-"
URL with Autoplay parameters:
src="https://www.youtube.com/embed/n55-wJQN70c?si=pTVGdwYpBRzPWDf-?enablejsap=1&;autoplay=1&;mute=1"This then tells the video that it should autoplay and as it has the mute parameter, it should play on most browsers.
If you want the video to loop, then you can add the loop parameter, which is:
- loop=1
You can see whether or not the autoplay is working in the edit product page or you can preview the product and once you are happy with the way it is working, simply click save and the embedded video is now part of your product description.
Conclusion
Adding a video to your Shopify product pages is really easy to do and if the copying and pasting code seems a little scary, create a demo product so that you can try it before doing it on one of your live product pages.
This way, you can learn how to do it and if you make a mistake, it doesn’t matter (we all have to learn) but you will then do it the right way on your actual product pages.
Hi, I'm Paul, the Owner and Founder of EcommerceGold.
I ran my own Ecommerce Business for over 7 years and now help others start their own online retail empires!