BACK

how to insert youtube video into shopify blog

How To EMBED YouTube Video on the Shopify Product Page - 2022 FREE TUTORIAL bonjour shopify world my

Andrew from EcomExperts

Updated on Mar 16,2023

How To EMBED YouTube Video on the Shopify Product Page - 2022 FREE TUTORIAL

The above is a brief introduction to how to insert youtube video into shopify blog

Let's move on to the first section of how to insert youtube video into shopify blog

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 insert youtube video into shopify blog catalogs

How To EMBED YouTube Video on the Shopify Product Page - 2022 FREE TUTORIAL

bonjour shopify world my name is andrew,from ecom experts dot io and i hear this,like all the time,andrew your videos are so amazing how,can i embed them,in my shopify store,no one ever tells me that no one ever,tells me that,but that's beside the point you might,have a product with a fantastic video,and you want to embed,that video onto your shopify store and,that makes,total sense i hear that a lot so we're,going to show you in this video how to,do it and how to add it in the code it's,pretty,straight forward there is going to be a,link in the description below,if you click on that there's going to be,a document with a step-by-step,explanation,on how you can achieve this i'm going to,follow that,with you along uh because we're going to,copy paste some code etc,and at the end of this video you're,going to have a video,on your shopify store now there's two,little things that i want to,note here is that there's kind of two,ways,that you might want to try to achieve if,that makes sense,first is you might be in a situation,where you want to put,the same video on all of your products,of a specific template let's say that um,you want to put the video about your,story,as a business on all of your products,well we're going to,show you how to do that and the other,option is you,want for every product a specific video,we're going to show you how to do that,as well,so let's just jump straight into the,code right here,we are on the demo shop and if you click,on the online store actually let's see,what it looks like right now and you,will see,you can do it yourself there is,absolutely no video,um whatsoever nowhere on this website,and we're about to,change that so um actually i'm going to,go to youtube,that's not how you type youtube andrew,we're going to go to youtube,i'm going to take,one of my videos as an example here,um,stick with me no i'm so tired of hearing,my own votes,okay so i do a whole bunch of videos,let's say,here i explain how to stop expert,that i think is amazing is wrong in page,speed optimization anyway we're going to,take this video and we're going to,put it on all of our product pages so to,do that,we're going to go back into the online,store right here,and first things first is you want to,create a duplicate of your team,so again this first section is going to,be on,one video on all of the products um,not one video per product later in the,video it's one video per product,uh just check the timestamps below okay,so,one video for all of the products you're,going to go into your code but before,that you're going to have to duplicate,your code so you click on actions right,here,and you click on duplicate this is going,to create a backup version of your code,do this 100 million percent otherwise if,you mess,up stuff here you're done your smoke,smoked you baked what's that expression,let me know in the comments,anyway you're going to create a,duplicate,once your duplicate or backup is done,we're going to work on this,this is not the live version so clients,can't see this,you're going to click on actions and,you're going to click on edit,code this brings you into the code,editor,sometimes it looks a bit scary don't you,worry,there's a song about that we're gonna,jump straight into this,so before we continue we're going to,need the code of the youtube video,so we're going to click on share right,here um and there is an embed,factor right here so we're going to,click on embed you can say that it,starts at a specific time if you want to,you can show the player controls or not,a whole bunch of things if you use vimeo,it's exactly the same thing except that,you won't see all the shopify all the,youtube branding,which might be very interesting but,veneer was paid,so you know there's pros and cons here,but you're going to take this,iframe right here you're going to select,it entirely,and you're going to copy,once that is copied you're going to go,back to your store so if we look at the,editor right here we're going to paste,it in our product,template so we're going to go to,sections right here,this is all of our sections and we're,going to look for our product,section um something product,recommendation product,template there we go,and now we're basically going to cop,paste,that youtube code in here now it's kind,of going to depend on you,where you want your youtube video to,appear,inside of your template if we look,at how a product template looks for me,i probably want it here somewhere,above you you may also like so this is,going to depend on you you can kind of,do a trial and error because,this is on a backup version,let's say that,you definitely don't want to put it in,here so,as soon as you see this type of code,you're way too,down so you're going to kind of choose,here there is a button that's the add to,cart button,see see as soon as you see button submit,that means that's,where to add to car business so that's,here,so you probably wanted to put a little,lower end,form so there is a form on your product,page that's the form,right here um that gives you the,all the variant information but i don't,have variants the price etc and,add to cart so that's the form so,probably want to put it below the form,um,but where could i put this,visually hide the data load oh,here's the product description so that's,my product description right here,there is the if section settings the,share buttons,right here those are my share buttons oh,that's getting pretty close,um include social sharing and if,actually let's put it right,here so that's the share buttons,so you may also like is the next big,section so that's probably,the you may also like section so i'm,going to put my video,by the way you can hit enter as many,times it doesn't really matter,i'm going to put my video right here so,i,right click pasted my youtube,i do save perfect it is,saved um so now let's look,i'm going to go back to the online store,and if you look here,copy of the debut it was last saved just,now,so let's see how this looks before we,put it live for everyone to see,so we do actions preview,drum roll ladies and gentlemen uh we go,to,camera film for example but it should be,active on all our things oh and here it,is now it's,not centered really nicely so here,you're going to have to play with your,css,i could have maybe put it in a different,spot maybe right here above the sharing,that would have made more sense,so let's go back we click actions we do,edit,code and again this is really you,playing around,where you want it to be we go into the,sections,uh the project.template liquids yeah,that's already open sorry about that we,scrolled down,this was our iframe so we deleted from,we delete it and we're gonna paste it,again maybe,right under the sharing buttons so right,here we save it,and we refresh it here should appear,here,there you go that's a little bit better,um,and that works for me perfect,but now it's on all of my products as i,mentioned and,this might not be something that you're,interested in maybe you,just want it on some of your products,well,let's talk about how you can do that now,so,in order to do that actually before we,continue to that i just want to note,one little thing here is that in the,code it basically says,the width of the video the height of the,video,so,the width the height of the video and,then it goes along,explaining um,so the source where they get the video,from,the frame order um here auto play,is turned off if you want to you could,do,auto play is equal to true so it starts,automatically playing,but that might be blocked now by modern,browsers,allow full screen um basically what i'm,trying to get at right here is you see,these,semi columns so dot comma and then with,a little bit of information and,dot comma those are all orders that,you're passing through and how you want,this to um act and react so you want it,to auto play,so you would add dot comma auto play is,equal to,true true uh you want the sound to be,off you could add that you want it to,not be big screen you could add that so,these are all commands that you can add,in the code and if you want to know,specific types of commands that you can,add,you can just google that or you can,remove some or add some,um that's up to you so i just wanted to,demystify,what this code was about but um okay,let's say that now it's on all our um,all our products and we don't want that,we just want it to be on specific,products,well no worries because we worked on a,backup team and actually we don't need,this anymore so,because we changed our mind so we're,removing this it's going to the garbage,um and this doesn't exist anymore i,wonder if i,yep there we go it's gone um and there's,just this t,so let's say i just want to add it to,the camera film well in that case i go,to products,let's say i go to camera film,and right here i'm going to click here,show html,and then i decide where in the,description i'm going to paste,my code so i my video so i,suggest you put it at the very end so i,do a couple of enters,i do right click paste you have the,little iframe that's going to come back,with the commands and the description of,the,height and the width as i talked about i,just saved that right here,and now because i'm making the changes,in here and not in the actual,code of my theme it's immediately live,so let's close all of this,i click here,and normally there should be a video,right here,there you go but if i go to any other,product the video is not there so that's,another way of doing it,know that videos do slow down your site,um quite significantly actually,the better way to do it would be to add,a picture,so what would happen is on the page load,we're just loading the picture and once,you click on the picture,then the youtube video starts loading,and showing,that would be a more speed effective way,of doing it,it's always balancing the pros and the,cons,but that's basically it for how to add a,product,video or a video to your shopify store i,hope you enjoyed and i hope this,video worked for you let me know in the,comments down below if i can be of,any help to you and i'm making a whole,bunch of other different types of videos,all,shopify related so make sure to check,them out we pour,a lot of energy into it and you,subscribing would mean the world to us,for example we talk about page speed we,talk about how important data is we talk,about,how to define your audience we talk,about a whole bunch of things that are,really really important,while building a shopify store anyway my,name is andrew from ecom experts dot io,i hope you enjoyed this video and i will,see you in the next one yo,you

Congratulation! You bave finally finished reading how to insert youtube video into shopify blog and believe you bave enougb understending how to insert youtube video into shopify blog

Come on and read the rest of the article!

Browse More Content