how to add banner code in shopify

hello hey it's angela shell and i am,back here with another video,in today's video i'm going to be showing,you how you upload your banners,um to your shopify store now i am,starting out inside of canva,because that's where i know a lot of,people are building their banners,they're building them inside of,canva if you are interested in this,particular banner,that you see here this banner set it is,available,on my shop you can just click the link,in the bio,if you want to gain access to it it's,very easy to edit,and you can really make your,site look cute or updated or whatnot,using this template,anyway so let's say we've gone ahead,we've modified our template,and we're going to use it on our store,so what you would do is just go to,download,let's just say i just want to do,i'm just going to go ahead and download,both but let's say you only wanted to do,one you can come in here you can uncheck,this and just select the page,you want to uh download and click done,in this instance i'm going to go ahead,and download both so i'll hit download,okay so then it's going to go ahead and,save it,um save,and as you can see here it has saved it,to my downloads as a zip,file so being that it saved as a zip i'm,using a mac i'm going to,double click and then it's going to,unzip the file,and now those pictures are inside of,this folder,okay so that's what will happen with,canva,if you download more than one picture at,a time,it will automatically put those pictures,into a zip file okay,so you'll need to be able to unzip the,file before you can,use them okay next you need to come into,shopify so when you first come into,shopify,this is your home page you'll click on,online store,and it's going to bring you into the,themes page,so whatever theme you're editing i don't,want to,change this particular theme but i'm,going to come in here and i'm going to,customize this venture theme that i've,added to the store,so just click on customize whatever,theme you have loaded and you want to,customize just click on customize,so i want to add this banner to this,slideshow,so i'm going to click on slideshow i'm,going to click on the first slide,and i'm going to select the image and,i've already had one of them already,uploaded here but what you would do is,just click on upload,double click and then i'm going to,upload both of them so i'm going to do,select,all to select both of these images and,then,upload so now i'm uploading both,of these banners to,the store now i want to select this one,first i want this to be the first,banner that shows so i'm going to select,that,and i don't need the text here where it,says slide right i really don't want any,or much additional text on here so i'm,going to just delete the heading you,don't have to use the text that's there,and you see that disappears right okay,so we have that and then what i want,the um button to say is just,shop now and then i'm going to,link the banner to wherever i want it to,go,now you can choose not to link your,banner to anything,and just leave it like this to where,they're moving back and forth,and they're not clickable but if you,want people to go let's say to,a collection and i want people to let's,say go to,all of my collections right that's where,i'm going to point it to so now you have,that shop,now button that has popped up okay and,people can now,this banner has become clickable now,let me come back in here now you can,choose,to just have once this one banner,okay if you want just this one banner,you would come to the second slide,and click remove block okay,and then it would just get rid of it you,see what i'm saying,and now you just have this one banner,sitting at the top you can choose to do,that,or if you want to add another slide to,your slideshow,come in here select the image we're,going to do let's say this image,okay selected this one do the same thing,i'm going to remove the slide,header here i don't need that and in,this,instance i don't really need this banner,to go anywhere because i'm just telling,people,to follow me on social right so,i don't need this to be clickable so i'm,not going to add a button here,so there we go we're done so we have our,two slides here,now one of the things that is happening,is that part of this slide,is being cut off because if you look,here,like some of this design is being cut,off and the main thing to look for is,the slide height,so right now it's at the small what you,want to change it to is adapt,to first image every theme is slightly,different,as far as like what the options are but,the main thing to look for,is the slide height and make sure it is,set,to adapt to first image and that way,all of my image is visible now,okay and that is the case for the second,image on,the slideshow as well you get what i'm,saying now,so there we go and then on this,particular theme it gives me the option,to auto rotate my slides out,and i can choose how frequently these,slides change i can go down,to like three seconds and so it's,rotating every three seconds,or i can increase it to seven seconds,or you can leave it at the default of,five that's up to you,okay and so once i have that done,i can save it i also always encourage,people,to look at what their banners look like,on mobile,because how your banners look on mobile,is more important than anything,because most people are going to come,on your website and they're going to be,looking at it from their phone,so especially let's say you're,advertising on facebook or instagram or,tick tock or whatever platform twitter,well guess what you're they're on their,app most people are not,on instagram or facebook from their,computer they're on,those apps from their phone so it's,important that you know what your site,is going to look like,from mobile okay so hopefully,that makes sense so that is how you,upload,your banners from,canva or wherever to shopify,one more thing to note because i have,this set to adapt to first image,it's important that all of your banners,are the same dimensions,right so you don't want to have one,banner one size and another banner,another size because let me show you,what will happen,let's say instead of this second banner,i choose to change it to something else,so let's change,image and let's say i chose this picture,this is a square photo okay,so if i select that do you see what,happens here,it makes that square photo fit to the,first image because what did we tell it,to do,we told it to adapt to first image,and let's say we change the order of the,banners watch this,the first banner is now a square,okay and if we go to the second image,now it has cut the second image off,to fit whatever this first image,is so understand that so in order to,make sure,that all of your banners are visible,they need to be the same dimensions,okay and then to make sure that your,banners are not being cut off you need,to adapt the first,image so just make sure that you're,using banners that have the same exact,dimensions,so you don't have this problem you get,what i'm saying so however you want your,dimensions to be,now if you're looking here like this,mobile view,square banners might be a better option,for you,than the wide length banners now but,here's the thing look at how it looks on,desktop,square banners don't necessarily look,great,on desktop so you have to kind of,come up with a happy medium that looks,good on both,and from what i have found personally i,like,the 2000 by 1000 pixel,height um for,banners because they look good on mobile,and they look good on desktop so they're,big enough for mobile to where the,banners are not super thin and you can't,see them,right but they also look really good,on the desktop view i feel like this,size looks good for both,okay so that is pretty much how you do,it this is the process to do it,every single theme that you use will,function slightly,differently but this is the process to,upload,those banners onto your store and the,reason why i'm saying,everything functions slightly,differently for example this is the,venture theme that i'm using which is a,free,a free theme but venture works slightly,different,than the debut theme or the boundless,theme they all,work slightly different and so certain,things like for example,on the debut theme and on the boundless,theme,the buttons for example,on the um,boundless theme are sitting right here,in the middle of the picture,same thing with uh the debut thing that,shop button is going to be sitting here,right in the center,that's why for me personally i like to,use the venture theme,for people who are using free themes,because,the button doesn't sit in the middle,of your photo so anyway i hope,that makes sense i hope you have found,this video helpful if you are interested,once again in this particular banner set,you can click the link,in the description below and i will have,a link to this set,these sets are very versatile easily,editable,you can easily come in here in canva and,you can,swap out these pictures so quickly,for your own store so like let's say,i had a plus size store and i wanted to,use,these slots for my models here you just,come in here,and then boom like it you see how,quickly,i'm dragging and dropping,these pictures into these slots like,you can update your store,so fast with this let's say,you didn't want to use pink maybe you,wanted to use like,a neon green right you can click,the color and guess what it'll change,all of them,that fast to a neon green and you come,in here and you can just change this,block,to that same color and then boom you,have,literally updated and changed this,banner,to fit whatever you want to have going,on,they are very very easy to edit the text,you can come in here and be like i don't,want it to be 30,i'm just doing 10 off um you can say,off of all let's say off of all,all dresses right because that's what i,just used,off of all um,all dresses you can just come in here,and do whatever you want,and then use the code,dressy 21 whatever you want to do right,you can change,any of this all of this is editable,you can move stuff around you don't have,to have it placed there,like it's up to you this is transparency,so you can even change the transparency,let's say you want it to be a little bit,more visible,you can lighten it up you understand,what i'm saying like you can,you can change the transparency so that,the pictures are a bit more visible,you see what i'm saying so this is,totally up to you the level of,customization,is crazy so you can do whatever you like,but you saw how fast i just swapped that,out like that was so,easy so you can do that,infinitely with it doesn't matter how,many colors whatever,your color scheme is for your store boom,that just happen that fast you feel what,i'm saying so,this is easily easily,changeable and editable okay,so yeah i just wanted to show you guys,how quick that was,um and again hopefully you found this,video helpful,and i will catch you in the next one bye,you

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

Come on and read the rest of the article!