shopify how to create anchor links

what's up guys and welcome to the video,my name is mitch i'm part of the content,creation team here,clean canvas and in today's video i'm,going to hopefully walk you through,how to create some anchor links on your,pages uh you can use,um pretty much a product page blog page,uh normal pages this will cover all of,those,now i want you to keep in mind that this,isn't a straightforward process and even,took me a little while to get my header,wrapped around it because,it does involve trying to put some code,into the html of the page you're on now,i'm going to try and walk you through,as simple as possible with including the,information you need,so hopefully you can get your head,wrapped around this a bit quicker than,it took me to do,but by the end of it you will be able to,have links on your page that when they,are clicked it will drag you down to,a certain section of that page i will,also show you that you can copy that,exact link,shared with someone and when they click,on that link,outside of wherever they are it's going,to bring them not only to that page but,it's going to also bring them to that,part of the page which i think is really,great and i'm,kind of shocked that shopify haven't,gotten around to doing like a much,easier i've seen websites with this,built,in and it's uh really a great function,it will hopefully be added and then this,video will actually be useless,unfortunately but hopefully i'll be able,to help you guys,a little bit along the way so like i,said guys it's going,it took me a while to get my head around,it i'm going to do my very best to get,like you guys through it so i'm going to,set it up as,best as possible and let's just get into,it,all right guys so i'm just on an example,page i created just to show you,working first and then i'll go into how,everything else works or how to set it,up so,here i have added a text and then i've,added a link that when i click on it,it's going to pull me down the page,let's pull me down to here and notice as,well,the url here changes and this is going,to be important as well,so i click here it changes to go,down down because i've added an anchor,link here,and the anchor link is go down down,now don't get confused about the reason,why i'm using go down down as an example,you can put any text you want and i'll,show you what i mean,but i've also added a link here and when,i click on it,it's brought me back up to the top of,the page it doesn't look like it but if,i scroll you'll see,i just want to kind of give you an,indication that it does jump wherever,you want it to be,so let's get into how all of this magic,works,so let's say uh i am,here on one of my blog pages and i,wanted that when i click on this,this text at the top it's going to be a,link that's going to drag me down,to where this text is so in order to do,that i need to go into html,and add an anchor and it's just a small,bit of code,um so if i click on show html,now actually one thing i'll i'll,definitely advise this,if you're going editing pages a really,long text page okay,what i suggest do is on this view first,if you know what text you wanted to jump,to,copy it because when you do,click show html this looks kind of scary,to me this nearly put me off doing this,video because i thought maybe it's,actually a lot more difficult and it is,pretty,it's not an easy step for a,straightforward process but no one has,any videos on it so i said i do my best,to explain it so,when i go to this view if i click,control f and i type in,or just paste in what i'm looking for,it's bringing me exactly,to where it is in this html which is,great because you just need to be here,on this,line so what do i need to add here so,where it is in h2 um,i want to put that anchor link code i'm,going to go over here to this page to,grab the link i need,exactly so just bear me for a moment,don't mind that here we go so,h2 i'm going to put a space i'm going to,paste in my,bit of code so the code is id equals,and then um comma,and then it's going to be the text,whatever text i want,so i have go down as an example but i am,going to put in for now,test dash,test and you have to if you're going to,put in two words,and not have them together put in a dash,it has to be a dash,so id equals um test,dash test and then that's it,the bracket is still there basically all,i did was i'm just going to copy this,and delete it,this is how it was i put in a space and,i paste in my code like that,and that's how it's going to be so now,if i uncheck that,if i go back to normal view so exit,html so nothing has changed yet,but the only other thing that we need to,do is we need to put in our link here,and it's very simple this is an easy,part go down here,and copy this link down here this is,going to be the web page that this page,is going to be part of,so if i highlight all of this,and click insert link in here i'm going,to insert the link,and this part is crucial put a hashtag,test dash test what's that telling me,now,or what's that telling the website the,website is saying when this link is,clicked,this web page needs to look for,test test in the html and drag,the user to it so let's see what happens,i click insert link i click save up here,and now unfortunately shopify doesn't,have a preview,option for blogs and i will say guys,this really should be a feature inside,shopify you should need to go to this,extent to insert anchor links i've seen,other websites have it,it's unfortunate it's not there at the,moment hopefully this video will become,obsolete and i will add it,it'll be really crappy if they post it,in the day after i post this but,anyhow so here if i hover over the text,it is a link because i can see the blue,line and my cursor is changing so if i,click on it,boom it's bringing me down to where does,it come from,so that is how you create an,anchor link um if you wanted to do it,the opposite way around,like say go to the top you just follow,the same method the only thing that,might be a bit tricky guys is,you might wanna like you're gonna like,maybe go into html mode and,this kind of was a bit off-putting for,me at first because i thought maybe just,putting in,like id by itself but it really needs to,be in like,kind of something it needs to be,attached to something so,it needs to be attached to for me here,like h2,or for like normal text like you'll see,this p,and you'll need to put the id inside the,p,just like this so if i did the same,thing here,if i copy the id um and actually if i,copy and delete it from here,sorry now i'm messing up a little bit,bear with me so if i delete,and just put that back to normal like h2,and then go in here and put a space,and paste in that id and i'll like,i will uh leave this id in the,in in the description below so you can,just copy it as well,but yeah here so i put a p just make,sure to put the space,because it needs to if it's together it,won't work so i just done the same thing,so equals test dash test and then,whatever else is fine so that's just,gonna do,the same thing it's just going to pull,me down to,the text part so it's just going to pull,me down to contrary,at least it should so if i refresh and i,click lorem ipsum,see can pull me down to contrary you can,even use this,as a way some people like don't like how,it just,pulls you exactly to the word so what,you could do,is um like i kind of did over here on,this example,um well i'll show you what i mean,um so if i uncheck here,uh i can put my anchor link,above here so if i click this,see uh it's put in the pp here this is,because it's a space,you could just go here and put the,anchor link here so it'll go a bit above,the text when it's clicked so,let me just see can i do this quickly,yeah yeah so if i just,copy this,remove it from there and instead put it,in here,make sure there's a space yes mitch,so you'll see uh like normally when it's,clicked,uh here so if i click this link it's,like,barely brings me to the top but now if i,since i've saved if i refresh,and i go all the way down to the bottom,and now if i click this link,see it's got the space there so you,could use that as a trick,to get around that um by using,uh instead of pulling exactly to the,title,like the h2 which is the heading it,could pull,to the the p the paragraph um and that,can just give you that little extra,space so,hey guys one thing i just need to,re-record before posting that i,mentioned,i would share with you um the really,cool thing about these links when you,have them working,you can share them and what they'll do,is they will,if i send this to someone and they click,on that link,it's not just going to bring them to the,web page it's going to bring them,directly,to where you want them to go and this is,really good and i'll give you a great,example of this for me when i'm working,in support,let's say i have an article i want to,share with someone but there's really,only one part of the article that i,really want them to focus on,if there's an anchor link to that,i can right click on the article link,and then when i share that with someone,that's going to be what they see,so that's going to bring them directly,to the web page,to there i want them to see so say i,would mention that,but i'll get back to the end of the,video,guys it's not an easy and,straightforward one i hope i did,the best i was able to kind of explain,it,it's going to take maybe a little bit to,get your head around it did for me,like i said i wasn't even sure about,doing this video because i didn't feel,like it was i was going to be able to,justify making it but,for people out there that really want,anchor links hopefully this helps,and answers your questions and gets it,working the way you want hopefully,shopify,adds it in so we don't have to go like,basically i've seen,websites where you can just click on,link and,it'll just give you that option like,it'll allow you to link to a,heading like what i'm what do i mean by,heading like just,say formatting heading one two or three,allows you to link to a direct heading,just by clicking on that so hopefully,shopify had that,but guys i hope i was able to help you,and thanks very much for watching uh,consider subscribing,we'll be putting out more content and,then uh hopefully next week we're very,busy over black friday so we did fall,off with the content on the weekly,download,but we're going to be a lot more time,our hands now,i'm going to be focusing more on,creating content each week so hopefully,this will be,a like i said guys probably the,trickiest video i had to do,um but i've i feel better about doing it,because this is something that i wanted,in my website so hopefully you can get,now on your website thanks guys for,watching,really appreciate like subscribe check,out the next one,you

Congratulation! You bave finally finished reading shopify how to create anchor links and believe you bave enougb understending shopify how to create anchor links

Come on and read the rest of the article!