what is product handle in shopify

today we're gonna have a quick look at,product handles and how we can use those,for CSS purposes and also to render,different templates depending on the,type of product that were actually,viewing okay,so voice start let's just go to the,admin a handle is very similar to a slug,WordPress and it's great to form,automatic on you great products but this,is copy page scroll down to the bottom,we could change that,four uses for this demonstration if you,have to commute and,now okay so we actually used the product,handles in a couple of places within our,themes what I tend to do when designing,shopping Lundin is add a number of,useful potential classes to the layout,now the layout file is the outer skin of,our theme it's the the Father includes,all of the sort of furniture that's,going to appear on the majority of the,pages as well as IH mail declaration and,that kind of stuff I just really want to,show you down here the body element here,okay so we're doing a couple of things,the first since we're having the name of,the template - the ID now the name of,the template will return,that's useful for hooking into more,perhaps some JavaScript or that kind of,things and but actually what I tend to,do is add in a lot of the different,things relating to the particular,product or the particular collection to,the class attribute here so let's just,bring that down a bit,now highlighted a little bit clearer for,you okay so I'm doing here I'm asking a,couple of questions using I'm saying if,the template,now remember template will just return,the name of the template - adult liquid,extensions equals product so if it is,the product template then it will return,the word product so I'm just doing a,very very simple check there,comparison and I'm saying if template,equals product then I want to output,class name off product and then leave a,space and then products - and then the,handle associated with bounty - the,product so in the case of our coffee,grinder we run the product template it,will output products leave a space and,then product - or feed - grinder and,then I close off my end if statement now,what this will result in is every time,we view a product template the handle of,that particular product that we're,viewing will be injected here with the,prefix of product - now this is really,useful if you want to hang custom CSS,stars or maybe some JavaScript off that,particular product,and I'll show you how easy it is to hold,them to those in a minute and I also do,the same thing for collections here I,say if template please collection that,adding collection - I'm in the handle of,there that that particular collection so,all the ideas that we'll discuss here,can also be applied through the,collection template as well so they send,me move that back just so I don't,switcher my layout file under state and,so let's have a quick look if I go to,this particular page in store,and I use the inspector you'll see that,I've got the name of the template as an,ID you may or may not want to use that I,really do show just for demonstration,purposes what you might use the ID for,there and then in the class attributes,here I've got class of product and,product - coffee grinder so if we wanted,to hook into that particular page all we,need to do in our CSS will be something,like this dot product,- product coffee grinder I could do,something like background yellow say,about,refresh and suddenly just for that,particular product our background is now,yellow so just to prove that works I'll,go to the edible coffee coverage that's,still white obviously that's a really,really simple way of using the CSS hook,there but you could extend that further,you could look into products as well so,it could be product and we could,override the age to say something like,outside putting that in the wrong place,and we could say the color of that was,green so again we're just hooking in to,that particular template with some very,very simple hooks and then overriding,those a little bit deeper with,background and so forth but we can use,handles in other ways as well we can't,reuse them as logic controllers in many,many ways,so let me show you how to do that let's,say that for the coffee grinder I wanted,to include a completely different,template a completely different markup,for that particular product more likely,to do is now when I create sniff this I,tend to prefix and name them as,appropriate as possible so this is a,replacement product templates are our,prefixes product and it's just for the,coffee grinders so again keep things,simple and just use the format we've,already got which is the handle grinder,I actually wanted to be very very,similar so I'm just kind of copying this,code we have but what I actually want to,do is now nothing's going to change at,the moment it's just going to stay,exactly the same but what I can do in my,product of liquid template is I can ask,a question beginning using some liquid,lodgings now you remember how I asked,the question in the layout file if,template equals product well I can also,ask the question in here something like,this if product handle equals coffee we,can change this handle ourselves if we,want to,or we can use when we currently product,it will just get created for us,if that's true what I want to do is,include now this will add in the snippet,for us from our snippets folder product,I think I need to put that in quotes,coffee,I don't need $1 quid extension because,sir shall work that out for us but if,it's not what I want to do this is the,else statement to say output normal,because that we used every other product,to do end if yes,okay so all I'm doing here is checking,the handle when the page loads and if it,equals coffee grinder we're going to,include the product - coffee - grinder,snippet include that allows us to,include things from our snippets folder,and oddly there's a few of used in,previous screencasts such as an advert,and and the header as well which we use,in the layout farm but if that's not,true then I'll just go right ahead and,use the code that we've already got now,only visible difference shouldn't really,be the word brand-new before the title,right so let me save that,and that's uploaded so fingers crossed,if i refresh this now yep,the color of background has stayed the,same and CSS has stayed the same but,what I've actually done is included the,the snippet instead and we can tell this,from background,some title now let's just double-check,about logic as well to go to a different,one it's getting the edible coffee cup,as you can see we don't have the prefix,brand new there so that's just gone,ahead and used the code effectively the,default code now you might want to take,this further and actually make your life,a little bit simpler like racing another,snippet called product,- default save this so Allah doing is,creating a new snippet called product -,default and I'm just gonna copy in all,the information we have after our alt,statement and then go back to our,template and actually say if it's not a,product - coffee - grinder,and include the default template product,- default,this will have the exact same end result,but it's just a little bit neater,maybe when you're dealing with your code,when you sort of use these particular,templates more as logic controllers but,you do it like this it's a little bit,easier to read if you're working in a,team or hanging the code over to someone,else so let's see hopefully this will,work,coffee grinder I get the template now,you could go further in instead of doing,a direct comparison you could use he,contains integrator now what we could do,is we could do contains,and just look for fawful so this would,then include,the specific template that we asked for,notice that we have included that slip,it because the handle has the word,coffee with in it but if I go back to,the moustache mug then that hasn't we do,have a number of products with coffee in,the title so let's just double check,that I've got a homemade coffee tamper,you can see that we have actually used,that to disappear because it hasn't,applied the yellow background or because,simply the the handle on the the class,on the body so there's a couple of ideas,for you a couple of ways that you can,use the product handle or the collection,handle to control which templates are,rendered and also a really simple demo,of how to hook into the body class with,those handles so that you can use,antek for JavaScript of course now what,this means is that you can really open,up the possibilities with your theme you,don't have to be limited to one template,for your product within the store,you can actually use this particular,template more as a logic controller and,then you can have a number of snippets,and there's a couple of ways you can,call those in you can either do a direct,comparison on the front handle or you,can use the contains operator here let's,check for a single word this means that,if you have t-shirts in all of your,hopefully you found that useful it's a,really simple way of having product,specific templates or collection,specific templates there are other ways,you could achieve this obviously you,could go further by using the else--if,statement as well and provide details of,those logic flow controllers in themes,shop lines and you can just have a look,for things like operators,there's contains that's the one that we,used to include a substring if used on a,string or element abuse on Andrade,they're put simply this our handle,contain the word that we were looking,for there's not a bunch of other things,you can do as well using things like,different logic operators here like case,and various other ones so there's a few,ways that you can approach that so this,one works really well maybe one or two,1:03 polit handles okay feel free to get,in touch you've got any questions,another my email address as always is,Kier that's Kei our shop or you can find,me on Twitter when they use names here,it's got a slot

Congratulation! You bave finally finished reading what is product handle in shopify and believe you bave enougb understending what is product handle in shopify

Come on and read the rest of the article!