BACK

how to add background video in shopify

How To Add Background Video To Shopify | Simple In (2022) how to add background videos to your,shopi

The Social Guide

Updated on Mar 23,2023

How To Add Background Video To Shopify | Simple In (2022)

The above is a brief introduction to how to add background video in shopify

Let's move on to the first section of how to add background video in shopify

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

how to add background video in shopify catalogs

How To Add Background Video To Shopify | Simple In (2022)

how to add background videos to your,shopify store hey guys welcome back to,the youtube channel in this video i'm,going to be showing you how you can add,background videos onto your shopify,store so let's get into it now the first,thing that you're going to do is you're,going to head on over to your shopify,store and you're going to click on,online store over here and this is one,way to edit your website now you can,obviously create a duplicate of your,website code and then you can edit it,that is totally up to you now you can,copy that if you want so you can just,click on duplicate over here and once,you click on duplicate you have a copy,if done now that's totally up to you if,you have your store up and running you,can go with the copy section and then,edit the copied code but i just like to,directly go into my actions and i like,to click on edit code because i didn't,feel less like that i just like to click,on edit code and what you're going to do,is this is going to open up now don't,worry don't get confused what you're,going to do is you're going to scroll,down and once you scroll down you're,going to click on sections and in your,sections you're going to click on add a,new section and then you're just going,to name it video we're going to turn off,our caps video,background and you're going to click on,create section now once you create this,new section that is going to open up,over here uh you're going to delete all,of the preset text now once you delete,all of the preset text you're going to,paste this text over here so this is the,text from ecom experts and it is a,pretty long text as you can see over,here so what you're going to do is,you're just going to click on this from,the start and you want to make sure to,copy the entire thing to the bottom like,it's over 400 lines i suppose,uh i have estimated that so after you,click on end like the ending line is end,schema,and then you're just going to paste it,from the first line and don't leave any,gap so just paste it from the first line,on to the last so you can see over here,this is what the code is going to look,like now you can see this is what the,code is like now after you have added,all of these little,sections,let's say if there are any errors like,this so if you have any errors you can,just recopy this from here so just make,sure to copy and paste everything else,really does not matter just copy and,paste the entire code from this page so,you have to copy this section,entirely like this entire section over,here and if there are any gaps what,you're going to do is you can just zoom,out your window and then copy it like so,if you feel like you left any gaps by,accident that is also one option now if,you feel like your bracketing is,incorrect you can just do this,to re-enable your bracketing like that,so if you have any errors in bracketing,you can do that as well so you're just,going to paste this little code over,here onto the new section so all of this,entire code it's pretty long it's not a,little code but you're just going to,copy the entire thing and paste it now,for some people it's going to be a bit,of an error after like halfway through,the code uh this is going to double up,in size because some of these brackets,are not properly aligned but don't worry,about it you can just do backspace over,here and then backspace over here and,then you have your brackets realigned if,you want to do that you can,that's totally up to you it's not,necessary you don't have to do it but if,you want to you can that is like your,choice like this so you can realign it,like this but if you leave it as is i,think for most people it is not going to,present with any errors so once you add,all of this code you're just going to,click on save over here and once you,save this your new section will be,created now what you're going to do is,you're going to click back on your,online store and once you have saved,that little code into your,website code you're just going to go,into online store and then you're going,to click on customize so you can begin,adding the actual store now until that,loads you're going to go into your,settings and you're going to open up,your settings of your online store and,then you're going to scroll down and,then you're going to click on files and,then you're going to click on upload,files and then you're going to upload,the video that you want to use so,i'm going to take a look at the,video that i wanted to use so i'm going,to use this video and i'm going to click,on upload so because my file size is a,bit too large i am going to,use another file instead so i'm hoping,this has uploaded,uh this is downloaded,and i'm going to just upload it over,here now until then what you're going to,do is you're going to go back into your,online store and you're going to go into,your theme section and then you're going,to begin editing so,i'm just going to refresh my page so my,online chore is loaded i'm just waiting,for this to load up and usually does not,take this much time i don't know why,shopify is a bit slow right now,but we're just going to let it upload,now once you've added your code and,you've uploaded your video there's only,one step left so all you have to do is,you have to click on customize over here,and from here if you don't have jquery,then there is a chance that it might not,show up but what you're going to do is,you're going to scroll down and you're,going to click on add section so once,you do that you're going to find video,background so whatever you named your,little new code that you added you're,just going to click on that i named it,video background so i have video,background over here and then you're,just going to add your video background,and then you're going to upload the,video over here so you're going to add,video slide you're going to select image,and then you can upload the images that,you have or you know add the actual,video i was not able to upload the video,because the video file was a bit too,heavy but you just have to upload the,video that you want uh and then you can,add as many video backgrounds as you,want so that is how easy and simple it,is to add background videos onto your,actual shopify store other than like,adding basic videos because basic videos,um occupy like a larger section and this,is like a background video slide so you,can enter like information and all of,that stuff on top of it you can enter,buy now buttons you can add,shop now buttons you can actually add,featured products on the playing video,and this just plays in the background so,once you do that you're just going to,click on save and then you have your,background video added to your shopify,store so it's simple easy and even if,you have no coding experience you can,easily add this simple little code and,where you're going to find this code is,going to be on ecom experts now there,are several different codes similar to,this that you can find on a binhub or a,quite a few other code copy-pasting,websites you can find them over there,but the one that i have used over here,in this video is from here,depending on what kind of code you want,you can easily find it on the internet,for basic shopify editing so i don't,think even if you're not that tech savvy,that you will run into any issues in,creating any kind of custom fields in or,custom sections in your shopify store,and you're now able to create your own,background videos in your shopify store,we are about to end this video and to,end it on a good note i would like to,request you guys that if you found this,video helpful or if you found this,method exactly what you wanted or what,you were looking for consider,subscribing to our youtube channel and,sharing it with your friends and family,who might learn a thing or two from this,video or learn a thing or two from the,hundreds of videos that we have on our,channel and of course if you have any,questions any queries about anything in,this video or with related to our entire,channel or any of our videos make sure,to leave a comment down below and ask us,what you want from our videos i tried to,cover everything i could in this video,but if you want to see more details of,the methods or the ways in this video,just let me know in the comments down,below and i'll be sure to make more,videos on your suggestions at the end of,the day it's all about providing you,guys with valuable content that could,help instill a positive change in your,life and hopefully your friend and,family's life as well and at the end i,would like to request you to make sure,to hit that like button and subscribe to,our youtube channel as it helps out our,videos a lot and again thank you so much,for watching till next time goodbye

Congratulation! You bave finally finished reading how to add background video in shopify and believe you bave enougb understending how to add background video in shopify

Come on and read the rest of the article!

Browse More Content