How to add a video on a product page in shopify?
Adding a video to your Shopify product page is sometimes necessary. You may want to add animation to your product page.
In this tutorial I will teach you different ways to add a video to Shopify.
The first one will teach you how to insert a video directly hosted on your website’s server and the second one will teach you how to upload a video from Youtube or other third party services like Vimeo.
Insert a video hosted on your Shopify product page.
If you don’t have a Youtube channel or if you want your resources to be centralized on your Shopify site you can opt for this solution to add a video on a product page in shopify.
Go to your Shopify dashboard. Click at the bottom left on the “settings” wheel and then click on “files”.
Press the blue “upload files” button and select your video in MP4 format that you will upload to Shopify.
Once your video is uploaded you will have the possibility to copy its URL in a box to its right.
Copy and paste this URL into a notepad or somewhere else, you’ll need it for later.
Copy this code
<video width="100%" height="100%" controls="controls" src="YOU-LINK"></video>
Go to the product page where you want to embed your video. Once on it, switch to the HTML editor.
Locate the place in your product page where you would like to integrate your video.
Paste the HTML code that I provided you just above in this place. Replace the “YOUR-LINK” part of the HTML code with the link of the video you had previously pasted in your notepad.
Your code should look like this:
<video width="100%" height="100%" controls="controls"
src="https://cdn.shopify.com/s/files/1/0287/7138/5422/files/name_of_the_video.mp4?v=1586565658">
</video>All you have to do is save and go to your product page to see that your product video has been integrated.
This code allows responsive display, the dimensions of the video will adapt to the screen size of the visitors of your product page.
If you want to integrate a Youtube or Vimeo video, I invite you to stay for the rest of the tutorial.
Put a video on Shopify hosted on a third party service (Youtube, Vimeo, etc.)
To insert a Youtube video on your product page it’s very simple. First, you just have to click on the “Share” button under the Youtube video of your choice and then select “embed”.
Then, a code starting with “<iframe” will be provided to you by Youtube. Copy this code and then go to your Shopify product page.
Now click on the place in your description where you want to display your video and then click on the small icon in the shape of a camera.
Paste the HTML code provided to you by Youtube and save the changes.
Then check on your product page that your video has been integrated.
The approach is exactly the same for players such as Vimeo. Just click on share and look for the embed code.
Conclusion
Adding a video to your product page can make a real difference to your conversion rate. I advise you not to deprive yourself of it.
I hope you found this tutorial useful. Feel free to leave a comment if you have any questions.
If you want to go further in customizing the functions of your player you can click on this link. I used this article to create this tutorial.