How To Add Video Background Banner To Shopify Homepage (2024)

How to add video background banner to Shopify homepage with autoplay

Hello everyone, welcome back to another video. I hope you all are doing great and are having

an amazing and absolutely incredible day. In this video we're going to be talking about Shopify and

how you can use this incredible story builder to add a video background banner to your homepage

with an autoplay feature. Okay, and trust me, this autoplay feature is going to help you tons

and tons. Okay, and it's a step-by-step tutorial which will save you a lot of time and it will

help you a lot as well. So in order to continue, obviously you're going to want to make sure that you have a fully set up Shopify account. Okay, and once you are into the dashboard, you're going to

make sure to jump into the actual working of the store. So you're going to first of all go over to

your sales channel over here. You're going to go into your online store. So in your online store

obviously you can come over into your themes and in your themes you're going to get the different

options for templates, different options for themes, and a whole lot more. So you can obviously

add different templates which they call themes obviously and there's different templates like

dawn which is obviously the default template that you have. Then there's templates like refresh

spotlight, sense, craft, ride, and a whole lot more. So these are pretty good and fun free

templates. Obviously there's a lot of paid ones as well but you know why go into a paid template

where you can create one yourself. So let me show you what the general idea of the store looks like

So if we go on customize, it takes us into the store editor where we can actually edit different

things like the image banners, the featured collections, and a whole lot more. So for me to

get into the technicality of this stuff, I'm just going to go ahead and wait for it to load in real

quick. So once the actual good stuff loads in, I'm just going to wait here and here in your

header section you can click on add section and we're just going to click on custom liquid

Now what custom liquid is, it's a line of code that you can add for yourself and this line of

code is really essential for when it comes to actually adding an autoplay feature for yourself

because without line of code your autoplay will not work. You know it's not physically possible

to add an autoplay. And then moving on we're also going to come to the template section

and we're going to go down here and we're going to add a video. Now once you add video, you're not

going to keep video down here because it doesn't belong here. We're going to take it up here

And you can either keep it with your header or you can keep it right above your image banner like

this. So this basically you know gives it an overall section and brings it into the front

So obviously first of all you're going to make the size of it large so it covers most of your

screen. You know because it's a proper video background banner right? So we want to make it

cover most of our screen. Now once you have made it covering most of your screen, you can also

click on play video on loop which will start looping the video. And obviously users will have

to click on it to play the video you know and that is something we don't want. We want it to

play on autoplay right? So let's say we have this random template of a video that Shopify has given

us. So I'm just going to keep this here or you can just add any video that you want by yourself

That depends on you and the style of work you want to go with. But yeah once you've added this

what you're going to do is you're going to mess around with the styling. You know whatever type of

editorial scheme you want for the video. Like let's say I want to go with this. Make sure that

the view is large so it selects everything off of it. Now once all of this is done and once

everything is as you want it to be, you can view the website you know just to get an idea of how

it looks. So let's say I'm going to click on view. So if you click on view, obviously do make sure

that you save everything. Yeah so once you save everything, we're just going to wait for it to

fully load up and fully optimize your store. And once everything is optimized again just click on

view and you get an idea of what your store will have in common. So as you can see this video needs

to be played for it to be played. But I don't want that. I want it to play on auto. I don't want

users to actually come over and click to play it you know because that just doesn't make sense does

it. So once all of these necessary things are done, what you're going to do is remember I made

you add the custom liquid thing. So in the custom liquid thing you're going to add a line of code

okay. And you're probably wondering what do I mean by line of code. So in terms of line of code

basically you're going to scroll down here where it says theme settings and it says custom CSS

So you can either add it in your custom styles over here or you can add it into your custom

liquid over here. So this is your liquid code. So you can paste any type of liquid code that you

have. Like let's say I have this liquid code over here right. And I'm just going to go ahead

and keep it over here and look at that. So that is your liquid code that you can add

And you can add any video for that liquid code for that corresponding liquid code for example

And this video as you can see if I save these changes and I go and go my on view my new store

this video will potentially play on auto. So I'm just going to reload the store and if a user comes

down here obviously right now the video is loading incorrectly but once it gets loaded

if you add this line of code over here this video will be on auto play and it will loop. Okay so

currently obviously it's loading into the store but once it fully loads and trust me it works

like a charm. It works absolutely amazing. So yeah that's what the code we're going to add in

custom liquid and obviously you're going to copy the URL that you have off of this video

Like you know let's say this video has a certain URL. So I'm just going to go ahead and copy all

of it. So there's this code. Okay I'm just going to go ahead copy. There we go. And once you go

and copy you're going to come to custom liquid and you see this HTTPS mark over here. You're

just going to go ahead and paste the video URL over there. Once you paste the video URL you're

going to click on save and you're going to see that they're going to add the video URL that

you've added over here or for a better measure you can just upload this video to Shopify's very own

content section and that would be much better. So yeah you get the general idea of how your

liquid code and you know actual coding helps you a lot when it comes to autoplay. So I hope this

tutorial was extremely helpful to you and if you need any more videos like this please do tell me

I am always available and I will give you the easiest step-to-step guides for any type of videos

that you demand and if you have any queries regarding this video you can let me know down

in the comments and yeah I guess I'll see you next time. Before signing off please like and

subscribe to the channel and leave down a nice comment if you watched the video and please don't

forget to share this video with any of your friends in need or your family and I hope you all have a

great day. So until next time I'll see you later and goodbye