shopify show tags on product page

hello store owners I hope you doing,great this week I have a question here,from one of the users on YouTube it's,really a specific question but what I,will do is I will take that question and,mix it a little bit around so we can,apply to a wider audience let's go ahead,with the question Joelle here asked me,if on the Add to Cart button on a page,on a product page if we can actually,change the link or add a link that will,come from the product tags so that is,really specific what I want to do,instead is show you how to take any tag,information from a product and show it,on the product page maybe it's a small,information you want to give on on,specific products maybe in Joelle case,you want to add a link or change the,link from for the Add to Cart button or,create a new button let's see how we can,do it okay so in this scenario let's,assume that I want to let customer know,that this specific product will only,ship in 14 days so I'll add two I would,like to add it maybe near the price or,near the Add to Cart button first step,going through your product going to your,admin panel the product you want and,let's add a new tag make sure the tag is,unique and let's use a specific,identification or variable just in front,I will use info two points in this case,this product will ship and 14,so let's add this tag I prefer to leave,no space after the two points it's just,easier you can put a space or no space,but my preference is leave no space,there so let's add the tag let's save it,now what we have to do is look in our,product template page where we have the,Add to Cart button so let's go back here,let's leave that open let's open a new,page here,Tam's click on the tweet dots and then,edit HTML CSS and look in templates for,product product that liquid let's go,back to our page and see the add to,cart' let's inspect the add to cart',here the add to cart',has an ID of add to cart' so that's easy,let's copy that and in our code here,let's do a search for add to cart and,this is my form ok,that's my form and I should have the,button button is right here ok as I said,in previous videos if if your add to,cart button or the information you're,looking for it's not on the product page,which is normal look for anything that,says include what include does it's it's,including another template most of the,time from the snippets category it will,include that into your product template,page so don't worry if you don't find it,here the add to cart the element that,you were looking for it may be on a,separate page so do a search for that,and,for what its weight included most of the,time it's included something like,product grade product price product form,everything like that but don't don't be,scared if you don't fight it right away,in my case I found it here and and this,is not part of the template this is part,of another video I did unless the tags,has a no-show in it don't don't don't,don't show it so this product doesn't,have that tag then go back to the,product doesn't have that tag we only,have the info what we want to do just,for a test just above the button let's,let's show the let's show the tags,so if I do this save go back here,refresh okay see this is the tag that I,have you can always leave it like this,but most of the time it doesn't make,sense to leave it just like that because,you may have multiple tags in here so,let's see here I have GoPro I have black,let's save it so if i refresh here I,will have all the tags which is not what,I want and on top of that I only want,this part to show so what we gonna do is,go back to the code here and we're gonna,do it differently we're gonna look for,the specific info that we added so we're,gonna do four tag in product tags,and let's close it right now and for so,what it does it's gonna look for all the,tags that I have in the product tags so,in this case it's gonna run it three,times because I have three tags so it's,gonna look for all of those three tags,and you can see that again just if I do,tag it should show me the tag I have,because I'm looking for each tag in,product tags and I'm asking him each,time to show me the tag so if i refresh,it does exactly the same thing which is,normal what we wanna do is we gonna we,want to add a condition so condition is,if tag contains and for two points,that's what we added in in the tag that,we're looking to have sorry,I forget if if tag contains two points,let's close it right away,if it contains that then only then I,want to to show the tag so now if we,save it so this works but we're not,there yet we still need to remove the,info and the quick way to remove the,info is inside your tag put a bar remove,two points and exactly the same tag as,you using please make sure that if you,put a space you're gonna put it again,the space because for Shopify the tags,are case-sensitive so if if it has a,capital if it has a space it's,completely different from if it didn't,so let's save this and voila so now we,have the specific tag that we want for,this product if I want to do again not a,tag for another product with info I can,do it and it's gonna show it for that,specific product only so that's does the,simplest way to do it let's just pause,for a minute and see how how we can,modify the link of the Add to Cart to,answer Joell question so for Joel,question let's create a new tag let's,call it link that we're gonna use to to,show to show a new button so let's go,back to our product add a new tag link,P let's point it to Google and that,should be fine okay,so let's go back into our code really,important also what I forgot to mention,is make sure you you use comments,especially if you do a lot of,modification like in in this case over,here so for you or for other people that,will play into your code it's gonna be,easier for them to understand so we can,use tag like this comment and say what,we what we doing so specific tag if,if it exists and then you have to end,the comment something like that so what,we want to do now is take the same thing,here we want to - look if let's copy we,want to to look again in product tags if,if my tag contains link if you have both,if you have multiple tags you can i'll,always add them in the same four but,let's just for the purpose of this video,just create a new one,so four tags and product tags I'm,looking for for all the tags in my,product tags and I want to to look for,lick and then I'll have this and link,what I want to do also is if the tag,contains link I want to assign a new,variable assign let's call it link yes,let's do like that I want to assign a,link equal tag,then we can remove this one here and,what I want to do is if if the link,exists I want to not show the button and,show my button that I want to have with,with the link so what we're going to do,is put it if so if link which we'll see,if it's true if it's if the link exists,it will do this if it doesn't exist it,will do something else which does,something else in this case we'll be,showing the regular Add to Cart button,so let's end this and if so if we have,the link if it exists let's let's create,a simple ref link,I will put target --blank in this case,because I'm assuming you want to open a,new page which will make sense so don't,forget to close this and let's go to,link okay so that should work let's just,save it but it doesn't let's go back,okay if link did we say huh I think we,didn't save it so let's save let's,refresh okay good so we have it here,small issue here let's just put it on,another Oh let's just leave it there Oh,anyways you can you can always pace it,out maybe just put put a paragraph,before just so we make sure we have a,new line so the go to link it's there,right now doesn't point to nowhere,because we didn't set it up but it's,there so that's that's great let's just,add the link so the link,don't forget the link it's contained in,the tag with liqu so as before we need,to remove link two points and just show,the rest so we're gonna do exactly the,same thing here in the graph where the,link points to what I want to do is,exactly what we had above but okay,because now the tag we made it it's a,sign to link so link it's exactly the,same thing as the tag so let's use link,if see here link if we just put link,it's gonna show us everything now if I,click on it it will try to go to link,two points which doesn't make any sense,let's go back and do the same thing as,with their above bar remove link two,points don't forget to close it and save,let's refresh and now we'll go to the,right link so that works let me just go,back let me create a new page here,okay let's go to another product okay,see in this case the Add to Cart it's,still there because it's another product,it's not exactly the same as this one,because on this one I have the link,because I have the link don't forget in,the code we put it that if we have the,link we show our specific link that we,have if we don't have the link then we,show the button so that's that I hope it,was clear enough I know it's not maybe,the easiest thing to to do and to follow,so specific link if it exists obviously,you will want to mix it to style it,maybe make it a little bit nicer you can,leave it like that you can try to maybe,take exactly the same class as the Add,to Cart let's see here class I can copy,that add it here,save it and let's see and voila,so this is really nice I hope you answer,your questions well for the others let,me know if you have any questions any,comments please use the comments below,the videos to ask me any question as,usual in the description of this video,you can find my my skype you can find my,email Instagram LinkedIn Twitter you can,always reach me out no problem I will,answer your questions with pleasure and,really really important please subscribe,I'm releasing this kind of videos each,week so like that you will not gonna,miss out on new content that comes out,thank you for listening and have a good,day

Congratulation! You bave finally finished reading shopify show tags on product page and believe you bave enougb understending shopify show tags on product page

Come on and read the rest of the article!