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

What is up everybody? Welcome into this new video of Tech Press. My name is Steven and I'll be showing you guys how to actually add a video banner with a few toes here into Shopify. It's going to be really, really easy tutorial, but the very first thing they wanted to do in order to continue is to have a Shopify account. So here, I do have the administrator dashboard section into the home pod. So let's go and jump right into the actual tutorial. So the very first thing is to go directly into my online store

I click here and then what I wanted to do is to be focusing into themes

Here into themes are going to be showing you what kind of things we're going to be using to customize your actual store

In our case, we're going to be using something called the actual Don

But if you don't like it, you can always scroll a little bit down and go into popular three themes

So you can choose the one that fits for you the best and then later on you can just move down

In my case, we'll be using the one that says done because this is how it's going to be looking at my store

So once you find the best fits for you, you can always scroll all the way up and then I wanted to edit here

What I want to do is to go and screw all my way up, focused into customize

And here's going to be popping out the new Administrator section of the editor. So here, as you can see, we have the catalog, the contact, the heather, the image banner

We have a lot of tools here. We can just get started. As you can see by default, we're seeing an image banner into the header hot of our actual stuff

So if I want to add like a video here, I can always click into this image banner and then later on I can add my own stuff

But if you don't have a video here, let's say that I wanted to remove this section and we have the feature products here

So I'm going to go into add section to Heather I'm going to go here into add section

And here let's go in focus into custom liquid Actually I think that I'm going to be using these new block sections here into my Heather

I'm going to add like a block And then what I want to do actually is to go focus into my template

Here I wanted to focus now into my ad section So as you can see we have a lot of stuff that we can use I wanted to go with video and there we go So here into video I wanted to use this template to bring this into the very

first part of my website so I can use this as a background banner. I want to put this down here

but into the very first part of my store. So I click there. There we go. So I click now into this

video part and this video let's see that I delete this option

I just want to see the actual heading. So here into heading size, let's go for Lodge

There we go. Play video on loop, which is actually something really, really important if you want to be played out of plate

And here on Embimed BD from URL, you wanted to... In my case, what I wanted to do is to use a video that has been already, let's say, upload

So I'm going to go and go for YouTube.com, for example. and here let's go for new sneakers Nike

2003 so what I want to do is to look out for a product

I'm going to go all my way up and here into the URL

I'm going to delete this option paste my actual link and here it is

use a YouTube or email URL there we go and here into the color

image you wanted to leave like that I make this section the full word and the color

background is yield into accent number two actually actually we're delivered into the accent number one and there we go so I'm gonna hit now into save and then later

on there's a problem here but first let's see what is the actual trial let's go here

into view and as you can see there's nothing here if I have the plate button

so if I hit into the plate button my video is gonna be a

be able to be played here. But we are, let's say, we're depending into YouTube, which I think

is like not so good at all We needed to actually add a custom video if you wanted to don have this kind of troubles So what I wanted to do if you still wanted to add a video from YouTube what I want to do is to go into YouTube MP4 for example here

and then I copy the link of my video that I wanted to add. In my case, it's like the video of the actual product that I wanted to sell

So I download this product. So I download my video, and once again, I'm going to go back here

And instead of choosing a URL, I'm going to actually delete this URL

There we go. There is actually nothing. Now we're going to be focusing out into select the video, upload the video, and I am going

to be uploading the video that we have just downloaded. In our case, I think is this one

So we're going to go here into open, and we have the uploading remaining

So you have to make sure that you have an actual basic plan already been enabled, otherwise you're not going to be able to import a lot of videos, a lot of files here into your Shopify store

So just wait a few seconds here. Now, this is something really, really important

I am using an actual trial plan inside Shopify so I can show you how to actually do this inside

your editor section. But this is what I was telling you guys, you need to have an active plan in order to import

videos inside your Shopify. So if this actually doesn't work, I believe like the only way we can add this is by a URL

Otherwise, this actually won't work. So if you want to check it out how it's going to be looking, what I wanted to do

do is to actually try with an actual image so I can try to figure it out if this one

actually is not look so bad so the other solution that I can give you is to try adding an

image banner so what I did is to go here into my home page once again I focus into

add a section and here has the image banner so I click here and to explore for images

so I can show you how it's going to be looking with let's say something like this for example

so I choose my image here I go here into second image

and I wanted to go once again with adding a new one and there we go

So this house is going to be looking of course the image of layer opacity and what I did is to add an animation So this is how it going to be looking my actual image Oh here I think that I going to change the actual first image I going to go once again into sneakers like this and I going to

select my very first image, here into select, and there you go. Both of them have the actual same

animation, but we do have this actual banner section. We can start by, let's say, click here. Let's go for

20% of, and we have the button labels, of course. Let's go for Shop Now. And the other one should be

code, this cover, I go back, and now this one has been now saved. I can later on change my actual

banner image. So for example, let's go for accent number one, which I think is like black

and it's looking that bad. So mobile-centric, let's go for the left part, and then later on

I hit now into save. And now once again, I'm going to do exactly the same thing. And go into

three dots, hit into view, and boom. This is how it's going to be looking my actual website

So even though we're not using, we're not seeing an actual video, because of course this one does not actually work if I am using a trial version, but if you are not using a trial version, this one should be automatically popped it up

So in my case, this is how it's going to be looking, my actual section

So later on, I think that I just needed to type into my image battery and move this into the very upper side

So once again, I'm going to save this. It has been saved. I reload the page

and there we go. So as you can see it's not looking that bad. I think it's like a

rate alternative just in case that you have the same situation with me, you have a trial version and you still

want to have like a small animation and the very few is part of your video of your website

But if you once again have an extra plan, this one should be automatically added

and as you can see we have the full width and it's actually looking really, really great

So I think that we have now reached into the very end of the video, guys. We have now solved the issue

So don't forgets to like and subscribe to the channel guys if you wanted to see more amazing tools of this Shopify more tips and more uh unique stuff

that we can use here into Shopify thank you once again for watching the video guys though and without being said

i'll see you on the next video