shopify how to link to asset image

hi everyone in this tutorial we're gonna,make anything in our shopify website,clickable,so i have this multi-column here and i'm,gonna teach you how to make this image,clickable,and we're gonna use the chrome div,stools inspect and also mozilla firefox,have inspect tool so we're gonna go,right click this image,and click inspec,and it should open this html code and,when you hover on the html code it tells,you what it is so right here it tells,you this is the image and this is the,container,and for now we're gonna edit this image,so we'll just make this one bigger,click this three dots on the sides,and then,click edit as html,and it should open up course or right,here,and we're going to be able to type,something so to make something clickable,we have to put a href or a tag inside,our,element,and we have to put the link so for now,i'm going to type a,href,is equal to quotation mark,and for now i'm going to put it on a,home page so i'm going to put slash in,here,and i'm just gonna add the closing tag,and,in here on the last part of our,container or image i'm just gonna add,this um closing tag,so i'm gonna have slash and a,and uh closing tab,and,for this one this is just a trial and,error we have to figure out where we're,gonna place our href code so after we,write those we're gonna click somewhere,else so click in here,and it should apply whatever we have but,as you can see here the image is gone so,this is just an overlay that we're,seeing right now it's how the dawn team,is written,so what we're going to do is instead of,putting it directly to the image we're,going to put it to the parent of the,image,so the container of the image is the,class media media transparent media,adapt,so we're gonna put our code or href code,above our media container the parent,container of the image so let's edit,this one we're gonna go in here and then,click edit as html we're gonna delete,what we've written,actually just ctrl x,and delete this closing tag in here,and now the image is back,and what we're going to do is to go,on this media,media transparent so we're going to,click this three dots and edit as html,and i'm just gonna ctrl v to paste my,href here,and see this closing tag in here we're,gonna add our closing a tag,so that's it and then click somewhere,else,now when we hover on our image,our cursor changed to pointer see that,so it means it works,but it's going to apply to all of the,image so what we're going to do is we're,going to edit our shopify code,to have a dynamic link so we're going to,go to our admin page and in your online,store click teams and for me i'm gonna,edit my dom team so i'm gonna click,actions and then edit code,and i'm just gonna expand this screen,and what we're gonna do is since we're,trying to edit a multi-column maybe use,that keyword to type it in here in our,search files so the search files only,works if their name matches the name of,the file it doesn't go inside the file,and find that word it's just the file,name so we're just gonna do multi column,so we have two in here,in the dot css doesn't contain the html,it usually goes to that liquid,so we're gonna open that that liquid so,we can edit the html,okay and then if we go back to our page,and right click this image again and,click inspect,we want to edit this transparent media,transparent media adapt right so what,i'm going to do is i'm just going to,search one of this keyword inside the,files highlight it and ctrl c,and i'm going to ctrl f right here and,ctrl v to paste,so i could easily,find the code that i want so right here,we only have one media,transparent so that's great but if you,have two you have to do a trial and,error and see when we do the search in,here,it highlights the code,so now we're going to add our href here,so we know that this one works right so,href,and i'm gonna add a slash in here,and i need to find the closing div,um tag for the media so to do that you,have to click the div and it will show,you the closing tag in here so we're,just going to add our a tag,and,that's it but this one is going to apply,to all of our image in our multi-column,so if we go to our website,any image we're just going to go to the,home page,so what we're going to do is to,have a dynamic link for this a tag,so to do that we have to call and add an,schema uh block,so what we're gonna do is since we,already inside the four blocks right,here so if you see the four black in,section blocks and there's an n4 right,here we're inside that so we're gonna,make use of that block,so what we're gonna do here is to go,back to our href and we're gonna have,two opening curly brackets,and then type block,and then settings and this you can name,it whatever you want but i'm just gonna,name mine as image link,and i'm just gonna do a closing bracket,here too,now we have to remember that this is,what we name our uh href route so we can,call it in our schema so i'm just gonna,highlight this one and ctrl c so i will,not forget and then we're gonna go down,to our schema,and we're gonna look for blocks since we,want to have it on the blocks right,so let's go scroll down so it's right,here,but in the blocks we have to add it,after the settings so this is the way,multi-column is written so we have to do,it under the settings and what we're,going to do is we're going to click,enter so we have a new line and add an,opening bracket and closing bracket and,i'm just going to add a comma in here as,well,and here we're going to do a type,and we're going to use the type url,we're going to use the shopify type url,but you can make your own type just like,us what they did here in the column,then i'm gonna add the id so that we can,call this url and i'm gonna paste my,image link,and then also i'm gonna add a label as,well,since i wanna know what i'm trying to,put in here so i'm just gonna put image,link,and no comma so i'm just gonna put it up,and then click save and then what we're,going to do is to add our link so we're,going to right click on customize theme,and then click a new tab,and in here,if we go to our multi column we're going,to go to inside this,block,then we have this image link right here,we can put collections in here so we do,that i mean on the second column we can,put a website,for you.com,and then click this one so it will be,placed on the,text box,now click save,and if we go to our website and then we,hit refresh,we should have the link so this one goes,to the collection,this one goes to my website,and if we go back,this also works with a text you just,have to follow the same,instructions so when you go,right click and inspect,instead of image we're going to edit the,h3 so follow what we did and it should,apply to any of your elements,and that's it guys if you have any,questions let me know and don't forget,to subscribe thank you so much for,watching

Congratulation! You bave finally finished reading shopify how to link to asset image and believe you bave enougb understending shopify how to link to asset image

Come on and read the rest of the article!