where is the product rendered in shopify snippets

hi this is Kim from Shopify this,screencast gonna have a quick look at,snippets in many ways snippets are the,opposite of the layout file we're in the,layout file had all of our declarations,are HTML our doctype our headers are,links to CSS files in javascript maybe,the sidebar footers all that kind of,thing a snippets working the same way in,fact they are a file that allows you to,have code that can be reused across the,site but they tend to be much smaller,smaller chunks of reusable code so a,good example might be something like a,pagination block or maybe a email,newsletter signup form that you don't,want to cross the whole site but you,just want to have that one piece of code,you can inject into one or two templates,so they work in the same way in as much,as if you change it here they will,change across the site but as I say they,are much smaller or tend to be much,smaller pieces of code if you want to,create a snippet in your theme you can,do that online using the online editor,just click add new snippet and you can,give it a name so let's just call this,new and it will be created and it will,be available to start adding in your,code you'll see that they have the dot,liquid extension just like all our,templates up here in the templates,folder and as I said earlier they do,live in these snippets folder if you're,working locally you can simply create,that folder if you haven't already and,then just create those files as you,would but just ensure that they do have,the dot liquid extension so how do they,work well very very simple all you need,to do is open up some liquid code I'm,going to do the curly bracket percentage,type the word include open up some,quotes and then put the name of the,snippet without the dot liquid extension,so I have one I made earlier called,headline it's simply got a an h1 heading,in there with some text in the middle so,I'm just going to type headline yes I,was right there we go and I'm going to,do ctrl s to say which you can do in the,editor if you weren't aware of that and,we're going to click across to my store,make sure I'm on the home page I am and,give it a refresh and you'll see that,that heading has been injected now if,that was included on a bunch of,different templates and I changed it,over here,and I went back and refresh the page,rather I changed it in the snippet all,of those pages will be updated so as I,said earlier they're kind of like,layouts in the sense that it allows you,to change something globally but they,tend to be much smaller pieces of code,so that's a very very very simple,example what if we wanted to go a little,bit more complex well you can you can do,a lot with snippets and what they really,come into their own when you can pass,data into them now,what I've got set up here is a snippet,or collection listing liquid and what,that allows us to do is output a,collection in a list in an unordered,list and it will reference the the URL,of the product that we're looping over,within that collection and the product,title so let's say we wanted to output,all of the products in our store we,could use,collections - all dot products and then,we could pass that into our snippet and,it would output all of our products in,the store so I'm actually just going to,delete some of this and we'll come back,to it later but what I'm going to do is,save that out so all I've done here is,use the assign tag and I've given it the,value of C just C for collection just,for simplicity and I've assigned it the,value of collections all dot products,now I can actually pass that into the,snippet and how I do that is using the,width argument here,so I'm basically saying include,collection - listing with C now that,will make collections to all dot,products which is referenced by this,letter here C available to us in our,snippet now just let me go back to the,snippet now this is confusing at first,and I'll be honest I did find it a,little bit too hard to get my head into,as to why the syntax works this way but,once you get it it's really really,simple what you'll notice here is,instead of looping over collection all,dot products I'm actually looping over,something called collection da - listing,which also happens to be the name of our,snippet and that's exactly how it works,if you would like to reference a,variable or at least the first one that,we declare,within your snippet it will take the,name of the snippet so this effectively,references collections or dot products,which is what we passed in giving it the,name see now I've also got something,else they're called limit which I'm,going to take out just to show you how,this works right so I've set up a page,on our site called,snippets demo so I'm just going to go,over there and what you'll notice here,is that I've got three products now this,happens to be the entirety of my store,just the three products and I can show,you that just by going to the catalog,again very badly styled or no styling I,should say but if we go back to our,snippets demo you'll see that I have,these three different products are,listed so what I'm using there is the,snippet to generate a listing of,products from the variable that I passed,in in this case it was collections or,products now what you notice there was I,added in a limit clause which I took out,so maybe we only wanted to show two,products and the way that you can do,that is by passing in different,variables now you just simply add a,comma after the first width and then,whatever we call the variable whatever,precedes the the colon rather is what we,can reference out variable width in the,snippet so I'm going to call it limit,I'm going to give it a value of two and,I've also got one called heading now,this would allow me to pass in maybe if,this is a list item sorry rather a list,for the sidebar or the photo you might,want the ability just to change that,heading and not have it in the template,we just have it in the snippet so if you,go back to here you'll see that I'm,referencing that between the two h1 tags,there so again comma heading colon,listing I'm just going to put Kier's,much we put great food that's more,relevant so what we've done is we've,added in a parameter called limit and,giving it the value of two one called,heading and given that the value,of great food so I'm just going to click,Save now what I would expect to happen,and hopefully it will is that will only,output two of the products the first two,in the list and we'll also have that,heading appear called great food so,let's give that a test and there it is,great food appears but we've actually,got three now that isn't right so what,have I done wrong let me go and check ah,okay what I haven't done is reference,that limit clause within my for loop,here so all I need to do now is,reinstate that I don't need any commas,here it's just a clause on that that,loop if you look up the documentation,for the for loop you'll see that limit,is one of the options so again limit,that's the the argument there and this,the one after the colon is what we,passed in and that's the value of two so,let me just save that out go back,refresh and there we have it just the,two have appeared so that's a really,quick demo of how you can get quite,creative with snippets simply put you,can use it to include the same code that,doesn't have any logic around it as I,said earlier things like email signup,forms fantastic user snippets or you can,get a little bit more complicated like,this where you want to output different,collections in a list form and pass in,different headings and maybe show the,first two or the first three the,possibilities are endless and you will,find that you come across snippets a lot,especially in themes from the theme,store the one thing that did get me as I,said was this notion of using the name,of the snippet for the the first,variable that you're passing in but once,you get your head into that it kind of,becomes second nature and you can really,start to play around and see how,flexible these can be okay that's it for,this week thanks for watching

Congratulation! You bave finally finished reading where is the product rendered in shopify snippets and believe you bave enougb understending where is the product rendered in shopify snippets

Come on and read the rest of the article!