how to create banner hyperlink on my shopify account

hey everybody welcome in this video i am,going to show you how you can make your,header banner clickable,in the new dawn,6.0.2 version,now this video is going to be relatively,quick,because i'm just going to function with,the image banner period that's it,if you don't know who i am i am d i'm,the design diva what i do is i create,pre-made uh professional graphic design,templates over on my etsy shop for,entrepreneurs and the entrepreneurs who,like the diy,um for their social media their shopifys,and things like that so i will put a,link in the description below so you can,go check out my work but i'm going to,give you um an example of,how you can make the image banner,clickable you're going to be messing,with some code in this and i'm pretty,sure there are some beginner developers,as well that are struggling with this,part of things especially with the new,version of the 6.02,version of the dawn theme,so if we,first things first back up your site so,if you have a site already up make sure,that you download your theme files and,things like that in case you make a,mistake you can easily upload it back,and revert or you can always keep a copy,which i always keep a copy of the,original down here and i always make a,copy of i duplicate it and then i always,work on the duplicated site i don't,never work on the real dawn in case i,need to replace it,but i digress so let's customize say,like this is your site let's customize,it,it's brand new shopify,and we want this banner clickable so,what i'm going to do let me,leave this because i was working on a,few other things but let me and i need,that up okay so because i'm going to,show you an example of where you,probably are looking online,so we're in shopify we're in the dawn,theme and this is the layout this is how,it's gonna look as soon as you open dawn,okay,so let's work on this image banner if we,were to preview,let me duplicate this real quick,and just take this out so that way we,can move a little faster,preview the site okay so if we go this,is what it looks like right now right,let me hide this banner,we want this to be clickable of course,they can click the button,but say we got a real jazzy image up,here and in our image it says shop now,and we want them to be able to click it,and do what it do i'm going to use an,example of one of my clients banners,that i created custom,as an example in this tutorial,but,you don't want the words here so let's,go ahead and let us,upload an image how about that,okay we're going to use the image that i,already uploaded and we're going to,press select,now there's several things going on we,selected our image you want to save,often,and we're going to refresh so we can,look at over here okay several things,going on right here first of all it's,dark okay we can see that it's darker we,don't want that we want the color to,shine through we also see this here we,don't want that button there because we,have a shop now button built into our,graphic we don't want,this button here,so what we're going to do is we're going,to come over here and we're going to,remove,first things first we're going to remove,all this stuff,all this extra text that we don't want,because we want our banner to shine,okay,so now we're gonna save,okay so now that part is gone so if we,refresh,we see that the word that the buttons,and the words are gone great now but,it's still dark and it's sitting kind of,funky it's not showing the whole graphic,for real,so,if you notice this is the first image,there's nowhere to make a link like we,can't make it click anywhere there's no,option anywhere in this for that,and i typically don't work with a second,image not unless it's a slider but again,this is only for like if you have an,image banner like this one banner that,you want to work with,now,dawn theme automatically has the overlay,on this image right because some people,upload very bright images and they want,their words to shine through in those,image blocks that we i mean in those,text blocks that we just deleted,but in our case we want it to shine so,we want to set the opacity to zero oh,that looks better,okay so now it's bright,and also another change we're going to,make we want to keep this large because,this banner is made for a large banner,but we want to adapt section height to,the first image,that looks better okay so now we're,going to save,now let's go and refresh and you're,going to see the difference,wonderful okay so now,somebody's come to our site and it's a,big shop now button right here and as,you can see when i move my mouse fast it,blows it up but they can't click,it's not doing anything,we want it to click,we want it to show all of our products,so but it's not doing that so how do we,make it do that okay the first thing a,normal person non-techie person or even,a beginning even me,what i did was i googled and i'm going,to take this off just because i'm going,to show you real life you're going to be,like,you're going to be like clickable hold,on you're going to be like,clickable banner image banner for dawn,theme shopify okay and most likely,you're going to look at this and you're,going to look at this now you're going,to probably go to this dawn theme code,because you can see us in the shopify,community so that's probably going to be,the first place you click but when you,click on that in the community you're,going to see all of this down here and,then you're going to be seeing codes and,stuff like that you're going to be,seeing codes it's going to tell you to,do this now i've tried this code this,code doesn't work,okay so i tried it myself so i know this,code doesn't work and i kept looking,which brought me back to this one all,right,now this easy f wife easy fly i don't,know,but i like it right,so it tells you what to do it tells you,to go to your themes copy the code and,edit the code into the,imagebanner.liquid file and here's the,code right here,so,what i did was i opened the code which,you probably do i copied all of it right,copy it all the way down to the bottom,all of it do not miss anything okay,um all of it so now we go back here,and then now it's like okay you can get,to edit your code here at edit code,or in my case i like to keep up two,windows okay because i like to go to the,code from here because i like to see,what's happening over here,so i design these for my clients so i,want to see what my clients is gonna see,on this side right so i want to make,sure that nothing messes up,so now i'm over here so now it said to,change the image banner,file right let me go back and try to,find where it said that at,for the instructor there you go,image banner liquid even though i,already know that but in case you don't,you can search and there it goes it's,actually in the sections area,now what it said was delete,all of it,and then paste their code in and press,save,okay,all right so now i'm gonna come over,here back in this area and i want to,refresh it right because we put the code,in now so now i want to refresh it,voila look what happened over here,in the in the back end we got a link now,we can put a link there and we also have,a little button that says open up tab in,uh in a new window oh that wasn't there,before okay,so we can put our link in okay we wanted,to go to we want this image to go to all,our products okay wonderful let's save,so now we're gonna come over here i'm,gonna save or refresh should i say,and now look we got a little cursor hand,and when we click anywhere on our image,it takes us to our products,wonderful,wonderful i thought it was wonderful too,until i noticed something else on the,back end so now okay it works so now,you're gonna go back on the back end and,you're gonna finish,laying out,you're back in but hold on wait a minute,what is this error code,what is this error code in the back end,telling me that something is not right,this is not this translation isn't right,in the code,and it's saying that the,language file the us language file,because i have my website in english,right the us language file doesn't have,this,this code in there it it doesn't have,this,i do not want my back end users my,clients to see this code right,especially if you're designing for,somebody else you don't want them to be,back there and they looking at this and,they're like what's this and they're,clicking on it and thinking it's an,option or something right but it's,really an error message,telling you there's an error inside the,code,even though it works,and the reason why it works is because,this code was built on a older dawn,theme okay remember we're working with,the dawn um,6.0 now you know i think this was made,for dawn too to be honest with you i,don't know exactly what version so don't,quote me but they made some pretty good,code and the reason why i say they made,some pretty good code at the ez fly is,because i was able to go through this,code,and fix it,all right so i'm gonna put a link below,with the fix code in there okay now with,some few things i did with my code that,you i'm giving it to you so you can use,i took out this option to open up the,image in a new tab because most of my,clients when someone clicks on their,shop now button they do not want it to,open up in another tab,okay so let me show you what that looks,like for example,i click to open in a new tab let's,refresh let me go back to home page,okay i'm gonna refresh this again even,though it did,okay so,i don't want it to do that i don't want,it to be on two different tabs right i,want it to upload in the same tab for my,it makes better usability the only time,you really put this to open up in a new,tab,is if you're sending them to somebody,else's website or if you're sending them,somewhere else outside of your site of,course you want them to still be able to,come back to your site real easy right,but most of the time when you're,building a shopify store for clients,they don't want people to go to another,site they want them to stay on theirs,and hopefully the same so i took this,out of my code,also i named this different okay because,you can make it say what you wanted to,say when you code okay so that says,something different,however,mines don't have this,file code in there because i fixed it,all right so,let's go back to our editor,i am going to go back to the image,banner code because now i'm about to put,in the fixed code which is mines okay so,i am going to,highlight that take that,out,okay now i'm gonna go highlight my code,the code i'm a link to the description,in the description below and i'm gonna,paste it in and i'm saved okay so now i,saved the code,i'm about to come over here i'm about to,refresh,and as you can see it says banner image,link you can link it to wherever you,want same thing,you can link it to wherever you want,it's only going to work on the first,image not the second okay as you can see,that uh opening a new tab is not there i,could have put it there but i didn't i,didn't want it there,okay,now if we scroll down that code that,error message is gone,right i fixed it okay so this is the,updated code for the,6.0.2 version of the dawn,okay so,that code is fixed,now i'm gonna go over here and refresh,so you can see that the code still works,it still takes you to the products page,okay so i'm gonna link everything in the,description below if you need banners or,if you're not a designer and you want,some pre-made templates that look fly,like this,you know nice and fly,then go ahead and click the link you can,check out my etsy shop below so i hope,this was helpful also to my fellow uh,web developers in the world i was,searching everywhere to get the code,fixed okay and then i just had to go,and,print it out and go line by line and,y'all know how that is in the design,world in the in the web developer world,um,it's tedious because you're talking,about over 400 lines of code right,and you can't get nothing messed up not,a,quotation not a comma not nothing so i,went through the code and i actually,fixed the code so this code is fixed for,the new dawn so hope that was helpful i,also want to throw in some extra bonus,for you if you were to put another image,banner somewhere else on your page and,let's just say,we're let's just turn them off right,okay so you can't see them if you were,to use a different image banner you,still can put a link on it okay let me,try to find another image real quick,that i can uh oh,i did not mean to do that,there we go let me drop another one in,there that i made for a client,okay so we down here on this image,banner,you can throw another image banner in,there oh,select right,and since this says tag us in your,selfies,i can link this to,i can type in,instagram.com,the design diva,enter,or click there to set it up in there and,then we can save right,so now it can go take them to my,instagram so,if we were to refresh,you see the banner uh oh,i forgot to adapt the size don't forget,to do that large this banner is large,so don't forget to adapt to size let me,refresh i could see that it was cut off,it would cut off like this if you don't,adapt it to size see,so,this is clickable too and that's going,to take them to instagram,okay this is my new instagram page not,my personal one,so,it's going to take them there,so,i'm just letting you know you can keep,using the image banner and keep linking,right so it's great and everything can,have his own link his own image banner,can have his own link however it will,not work on image two because i've tried,it i didn't code it for image two just,to be honest with you but if you're a,web developer you're not a code for more,than one link more more than one image,link then you can add that into the code,yourself but this code is basically for,the beginners who just want a banner and,want their banner clickable in the new,dawn all right love y'all into the next,video bye

Congratulation! You bave finally finished reading how to create banner hyperlink on my shopify account and believe you bave enougb understending how to create banner hyperlink on my shopify account

Come on and read the rest of the article!