How To Add Video In Shopify Product Page (Step by Step)

How to add a video in your Shopify product page

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 in great detail and depth about how we're going to

be adding videos in our Shopify product pages in the easiest, most simplest way possible

Now, you can obviously do this through different ways. You can do this through code, you can do this through the Shopify media that you've been provided

but obviously you are going to need the upper plans for this. Without having the upper plans

we will not be able to do this. Okay. So let's say if you have the free plan

then this video is not for you. But if you plan on buying the upper plan

then you can, I'm sure, watch this video till the end. So let's start off

So to start things off, as I said, there's two ways. First of all, there's code

And then there's the media way. So when it comes to the media way

what we're going to want to do, is we're going to come over to content

Okay, so here's our Shopify store. We're going to go over to content. And once you go over to content

you're going to go over to files. Now, once you go over to content and files

here it says upload and manage your files. Files can be images, videos, documents, and more, et cetera, et cetera

So we're going to click on upload files, and this is where you can upload different kinds of media

that you have. You know, you can upload images, you can upload audios, you can upload videos

whatever you want. Okay, this is the place, where you upload it

So just find any video that you, you know, possibly would want to upload

Now, obviously, again, in my case, it will not upload a video because I don't have the

upper plans. But if you do have the upper plans, it will upload the video

And then I'll show you how you are going to add that video into your store

So I'm going to show you by the reference of an image. So let's say I'm going to add this image

Okay. This image I created for like a design for the Star United

So once you upload things as you can see in the bottom right it gives you uploading and it going to take a few seconds to upload And once it done it going to tell you that everything is good to go

And what you can do from your store then is obviously go through your media and everything's going to be pretty easy to handle from there

So even here, it's a file uploaded and it shows it over here. And you can even copy the link of this file

And this is of great significance. And I'll tell you why later on because you use it in code

and I'm going to tell you how you're going to use it in code. But yeah, once your video is uploaded

you are going to go over ahead to your online store. And as we go into your online store, again

you will come to the editor. So just click on customize. And once you click on customize, it brings you over here

Now, obviously, we want to go to our product page. So I'm just going to go ahead

And here are our products. So you can either add a video over here

or you can add a video into your, you know, actual proper product page. So here is your product page. Obviously, if you want to add a video

instead of an image, so in that case, you will not add an image in your product. Because if you

add an image and a video that looks a bit strange, I'd either just add an image or just add a video

because both would not make sense in my opinion. Yeah, once we have decided to add this

And there, what you're going to want to do is you're going to come down here where it says ad section

And once you do that, you're going to come down where it says video. So we're going to choose video

And once you choose video, we're just going to wait for it to load up. And you're going to shift this right under the text section

Okay, so you can add it into the product info section. And the product info section, you can search if they give you the video prompt

If they don't, obviously there's the code option, which I'm going to show you how you're going to do this

But you can add video over here. Okay. And here you can write product

Okay, just write product. So people can know that this is a video of the product that they seeing up there Let you do that keep a large heading so people can see Make sure to play the video on loop This is the most common mistake most people make

When they make an online store, they don't keep their videos on loop

And it's pretty, yeah, it's not the most professional thing to do

Because the videos run for like, what, 10 seconds, and then they stop

And then the user is just out there one. like why was this even here you know so make sure the video is on loop now over here

it's a select video so you're going to click on select video now if you've uploaded any

video into your content section as I showed you when you know we went to content we

went to files now if you uploaded anything over there it's obviously going to appear here

okay so as I said make sure to upload the things over there and all those things

should appear over here pretty easily. And then once they appear over here, just click on them

And it will start uploading them into your store, okay, or into your editorial design

And yeah, that's the first step on how you can add a video into your Shopify product page

Now, the other way, okay, which is the coding way, where you can add a video into your

Shopify product page is you can go ahead. Let me just save this real quick

Okay, we're going to go back. And what you're going to do from here is you're going to go over here, and we're going to click on Edit Code

Now, once you click on Edit Code, what's going to happen from here is you're obviously going to search for a file that has the product JSON on it

Not JSON, but find the liquid, product liquid sections. So for that, we're gonna go into sections

And here you should find a section called product. Wait, let me just..

It should say product banner. You can even search it up there Like we gonna come up here You can just search files that say product Okay And yeah here we go

So basically here are the feature products, main collection products, the main product liquid, the related products

So we're going to go over some main product liquid. And over here, you can see all these things with the media and the padding and all

So what you're going to do is you're going to add a certain code

Okay, and to add that code, what you can do is you can go to any, you know, GitHub or any Shopify help site where they're going to give you an embedded code snippet, basically

Okay. So let me show you how to get that embedded code snippet

Basically, what you're going to do is you can go to, let's say, you can write GitHub, Shopify, Vignton

video liquid code. Okay based. And you can add any code of your choice

So as you can see, you can add a Shopify video with background text, a theme section displaying

a video, automated slider video, you know, go with whatever is best for you

And let me just download this. Yeah. So here we go. Here's the whole div code

So you're going to copy this whole thing. There we go. And once you've copied the whole thing, come here

Okay, and here we're just going to scroll down. Okay, you're going to find where the division ends

No, yeah, somewhere around here, which should be line 625. You're going to add the whole code that we just copied

And once you add the code, make sure to delete the how to add thing over here

And there you go. That code has just been applied. And you have the whole code for yourself now

So basically, what you're going to do from here is you're going to click on save

and then whatever video you have, obviously that is going to be added to your product page

So yeah, that's pretty much about it. Thank you for watching, and I'll see all of you next time

Goodbye