How To Add Video On Shopify Homepage With Autoplay - 2024

Welcome to WebSensePro, welcome to another tutorial video as usual another Shopify video and the reason why I'm creating a lot of Shopify tutorial is that you guys are loving the videos which I'm creating and I've been receiving a lot of comments regarding different different sort of tutorials which you guys want to see in this YouTube channel and trust me I'm working really hard with my team in order to provide you guys the best possible solutions related to Shopify and this video is related to

adding a video which has autoplay feature and loop feature so currently in Shopify built-in video section you don't have option to add the video with autoplay feature so when you add the Shopify video section which is already in the dawn theme 13.0.0 which is the latest version if you add that you will see a play button above that and you don't have option to make it autoplay so when someone lands on your website it won't be autoplaying that video you'll have to manually click on that as you ca

n see that on my development store I have added this video on the placement of the image banner or you can say a slideshow where there's a video running and it's continuously looping and it's on autoplay so if I refresh my window you can see that it automatically plays you don't have to click the play button and it looks pretty cool and recently one of our client wanted to have that feature on their store and we created a section for them and I'm gonna show you guys how you can create that secti

on and I'm also gonna tell you guys how you can do that without creating a new section so if you want to learn stick to the video don't forget to subscribe the channel comment in the video below and if you want to run a Shopify store with a discounted price for just $1 per month there's a link in the description below if you sign up through that link you will be able to start your store with just $1 per month okay so without further ado let's get into the screen okay guys so let's go to the back

end of my development store and that's the tutorial which we will be implementing I'm going to add the link of this blog post in the video description so you guys can easily copy and paste so first thing which we will try is add the video with the autoplay feature with the custom liquid code so if you want to add this by adding the custom liquid code you can do that and for the second option we will add a section and I'm gonna show you guys both of the options okay now let's first go to the deve

lopment store backend and click on online store okay now you can see I have this dawn 13.0.0 activated which is the latest version as of today but I've already added video section to this theme so I'm going to stall a fresh dawn theme and by the way I already created a selected variant image tutorial for dawn 13.0.0 you will also find the link for that video in the description below okay now let's add in the fresh dawn theme by clicking on add button here by the way you can implement this tutori

al on any of the free Shopify theme so if you're using any 13.0.0 theme or even older than that you can implement that on any of the free Shopify themes I'm not sure about the paid version because I haven't tested these codes on the paid version but you can install these codes on the free version really easily okay our fresh version has been installed now I'm going to hit publish and then click on publish again okay now let's preview that one click on three small dots and then click on preview I

'm going to close this old tab here okay so here's how the default Shopify dawn theme 13.0.0 looks like and we will be adding a section with video auto play and loop feature so a video which will automatically be played when someone lands on the home page of your store or any of the page and it will be continuously playing with the loop feature okay so let's go to customize first and here I'm going to simply click on add section and then click on custom liquid so here's our custom liquid section

and now I'll copy these codes here so just click on copy code button and then paste the code in our custom liquid so here is the custom liquid I'm going to paste this code and nothing is going to work because you will have to update this urls here in order to make this work okay in order to update the urls here what we will do we will upload our video files and paste the url from Shopify content so let's go to the dashboard and here we have content and then click on files so here you can upload

the video and simply copy the link from here I've already uploaded these videos so I can show you guys just by copying the link from this button here so just copy this link here and replace within src and now you can see our video is showing up completely fine with the full width and if I move this section to the first section so let's move this to the top and hide our image banner so we can use this video section as our main section of the Shopify store cool right now let's move on to the seco

nd option which we have and in that we will create a new section so scroll down and that's the code where first we will create a new section and use this as a section so we don't have to manually add the url in the liquid code and how we can do that so let's go back to our theme customization click on these three small dots and then click on edit code before editing the code make sure to have a backup of your theme it won't affect any of the functionality because we are creating a new section bu

t still you should have a backup in case anything goes wrong you won't be blaming me about the code issues okay now click on this arrow and click on this add a new section button and here we will create video autoplay section you can name it whatever you want I am naming it video dash autoplay click on done and here we have the code so simply click on this copy code button and paste the code here before pasting the code on this liquid file make sure to remove all of the existing code and then pa

ste the code and then click on save and now if we go to our customize and hit refresh and now if we click on art section and search for video we have this new section showing up by the name of video websense pro so just click on that and here we have all of the options so simply click on select video upload video if you don't have one I'm gonna use the same one which we already have select that click on done and now you can see that we have gap on the right hand side left hand side and the top a

nd bottom and to make it full width just simply check market and it will be full width and if you want to autoplay this video you can simply check mark this autoplay video option and if you want to enable controls you can check mark this which will show the controls here I don't want the controls now so I'm going to disable it by simply unchecking the box and now let's remove this heading here because I don't need that so you can also add heading on the top and now I'm going to move it on the to

p and click on save and now let's go to our development store hit refresh and here we go you can see our video is looking good with autoplay and loop feature so in Shopify built-in video section we do have the loop feature but we don't have the autoplay feature you'll have to manually click before playing that video so that's how our section looks like in mobile version cool and we can also add additional feature if you want to add a youtube video with autoplay what you can do is add the additio

nal schema which I have added here so as you can see if you add this additional schema to the section which we created you'll be able to add vimeo and youtube video as well okay let me show you how it's gonna work so let's go back to our code editor and that's the section which we created and before this line hit enter add a line break so line number 127 and copy this code here click on copy code button and paste the code and click on save and now if you go to customize and hit refresh you now h

ave the option to add in youtube video you guys can see it's automatically updated with a youtube video so if we go to this section and scroll down to the bottom we have this youtube video we can simply replace it to whatever video we want and if you want the self-hosted one you can simply remove this url and it will be replaced with the self-hosted video click on save and we are done and we are done with this tutorial and that's it for the video guys let me know if you want to learn more about

anything related to Shopify wordpress webflow or anything other than that i would like to love to create more tutorial for you guys in this channel until next video have a great day