how to create a shopify theme from scratch

alarm welcome to this crash course on,Shopify liquid the templating language,of Shopify themes first of all I want to,thank you for bearing with me over the,last three months it's been a busy three,months with the release of my latest,Skillshare class Shopify theme,programming which by the way the link is,in the description,but in today's video we're going to,cover an overview of Shopify liquid a,very practical run-through of what you,can do with Shopify liquid which you can,think of as the kind of back-end,programming language of Shopify themes,so this crash course is gonna be split,up into four four parts the first part,we're gonna cover the absolute basics,we're not even gonna touch the store,data just get you up to speed with some,of the syntax the second part we're,going to actually bring in some store,data and use liquid objects and in the,third section we are gonna incorporate,theme data so theme data allows us to,take user input from the admins of the,store they can customize their theme,using the customizer and then we can use,that data inside our themes very cool,feature of Shopify and the fourth and,final part I'll be talking about some of,the limitations of the templating,language what you can do and what you,can't do with Shopify liquid and also,covering an important topic within,Shopify liquid which is the topic of,scope we've got a lot to get through so,I'm gonna jump straight into the video,let's jump right into the computer and,get into it all right so we're now,inside my computer and we're looking at,the Shopify admin of my testing shop,Chris testing shop now if you haven't,done so already you can create your own,development store through your Shopify,partners account if you don't have a,partner account it's free to join you,just go to partners Shopify comm and,join now okay and the great thing about,a partner account is it allows you to,create what's called development stores,that are basically free store,that you can use as a development,environment to practice your programming,okay so that's the first thing you'll,need you'll need in an actual store and,the second thing you'll need if you want,to follow along is the theme I'm using,so you can use any theme to follow along,with in fact maybe it's the theme you're,working on right now but if we look at a,fully developed theme like debut for,instance there is a lot of code and,files here so I don't recommend if,you're trying to just learn Shopify,liquid that you work with a theme that's,already been built out because there's a,lot of HTML in here there's a lot of,different files and lines of code so my,recommendation is to start with a blank,theme and the theme that I use is the,one that you can generate through theme,kit using the theme new command what,I've done for this tutorial is I've,already generated that theme and I've,put it on my github page so if you just,want to download the theme it's at,github comm slash christopher dodd slash,Skillshare okay this is my resources for,my classes on Skillshare comm and also,on youtube now so here you can see theme,kit template theme and if I download,that zip file I'll just download it to,my desktop it's a very small file should,download really quickly then I can go,back to my store and simply upload that,theme,all right so now if you have a store and,you have this theme then we're starting,from the same starting point and if I,click into actions edit code which is,where we'll be diving into in today's,lesson I'm going to expand this out,you'll see that we have much less code,in here we don't have any sections or,snippets and our index file is only ten,lines long okay so this is ideal for,practice purposes we don't want to,overwhelm ourselves with too much HTML,and definitely liquid and Shopify themes,in general can get quite messy and hard,to understand when you have so much code,and stuff going on so I definitely,recommend you start from a starting,point like this,all right so how this tutorial is going,to work is I'm going to basically follow,what I wrote here so this is a guide,that I have on my website you can find,it at Krista freelancer.com slash,Shopify liquid guide and it's a,comprehensive article basically a text,course on how to do Shopify liquid,programming I talked about different,styles of objects I discuss all the,objects available where you can find,them objects scope it's a mammoth,article that I don't expect you to read,in one go but if you get lost at any,point throughout this tutorial you can,come here and read up on a section that,you didn't quite understand or maybe,something that you want to use later on,maybe it's a filter or an object or a,tag that you didn't see before and you,can come back here you know use control,F to find that filter and see what it,does okay so what we're gonna do is,we're gonna start with pure Shopify,liquid without touching any of the store,data or theme data and then we're going,to introduce store data and theme data,to show you how you can use Shopify,liquid,to actually present the store data on,the page,Shopify liquid of course is the,templating language for Shopify themes,and it allows you to represent what,you've got stored in your store into,your website all right so without,incorporating store data it's pretty,useless but what we're gonna do just so,you get the concepts is start without,any store data and then introduce it all,right so I've done a lot of talking so,far let's actually jump in and write,some code okay so what I'm gonna do it,doesn't matter what template that you do,this in I'm just gonna do the index dot,liquid template I'm gonna get rid of all,of this code and I'm gonna start with,the first basic example which is,assigning a variable all right if you've,done any programming in the past this is,a very basic function so I'm going to,create a variable and assign it the,value of hello okay so this is obviously,going to be a string variable so what,you can see here is we've got a opening,curly brace a percentage sign we've got,our code in here so we've we're running,the assigned tag and we're just doing,our variable assignment there then when,we're done we close with the percentage,sign and the curly brackets so pretty,much all the time you're doing Shopify,liquid this is what a tag looks like,except when you're outputting stuff on,the screen in which case you use the,double curly braces and that's what,we'll do right now we are just going to,assign this variable and then output the,variable to the screen I'm going to hit,save on that one extra thing I'm going,to do so that we only have what we wrote,here on our page is get rid of some of,the layout code so in my themes art,liquid file inside the layout folder I'm,gonna get rid of everything except this,main tag here with the content for,layout so although this header content,I'm just gonna delete,all right so now we can view what we've,made here by hitting this link here to,preview our theme and I'm gonna open up,in a new tab so it stays in the same,window now when I open up the theme you,can see it says hello so as you saw we,assigned a string to a variable and then,we output it on the screen this is very,basic shopify liquid actually I think we,should have them side by side so what,I'm gonna do is take this out of full,screen create a new window with a,preview and then we can place them side,by side on Mac like this there we go all,right cool,so here we have our code and we have our,output so we've created our own string,variable this could easily be a number,as well so let's just say the variable,is 5 refresh the page you can see it's 5,okay we can perform math on that,variable so what we can do inside our,output tag here is run a filter so in,Shopify liquid we have three types of,syntax we have tags which you can see,here we have objects which you'll see,when we introduce store data and we have,filters filters are a piece of syntax,that is pretty unique to Shopify liquid,so it might take you a little bit of,time to get your head around it but once,you do you'll find that they're very,simple to use so in this example we,could filter this value by many,different things so seaming it's a,number what we could do is add to it so,in Shopify liquid as I mentioned it's,not a programming language so we can't,actually do something like this what,we'd have to do is use a filter and a,filter always starts with a pipe symbol,so we put in the pipe and then we use,the filter name which is plus and then,if the filter takes a parameter we put,in a colon and then we put that,parameter after it so now if I hit save,and I refresh over here you'll see we,have the number 10 so 5,five gets assigned to the variable and,the variable gets outputted we can also,put the filter directly on the output,tag like such and now when we refresh,the page we get the exact same result,cool so I've now seen tags and filters,we'll do a few more filters later in,this tutorial but the next thing to,cover will be arrays now arrays are,interesting and shopify liquid you can't,actually create an array without,creating a string at first,so how array creation works in shopify,liquid is you create a string with all,the values you want for those different,items in your array and you separate,them by some delimiting value anyway,that's probably not going to make any,sense unless I actually show you so,let's jump right into it now so I'm,gonna rename the variable to array and,what I'm gonna do is I'm going to put in,the string and I'm going to put in the,list with a delimiting value so one two,three four five six so the delimiting,value in or delimiting character in this,case is this comma here okay so,obviously if I hit save and i refresh,the page over here you'll see we just,get the explicit screen explicit string,which is just one two three four five,six with commas separating it but what I,can do here is put in an extra assigned,statement to change this to an array and,the way we do that is by the split,filter so what I'm gonna do is rename,this to array string and to get that,array string to be converted into an,array I'm going to take that array,string and use the split filter and so,the split filter is just the word split,with the parameter of the delimiting,character or delimiting set of,characters,okay so we're gonna split by comma and,then if we output the array it just,actually loops through and outputs all,the values but of course that doesn't,make a lot of sense for our purposes so,let's use a may more practical example,and let's show you how to actually use,that array in a loop okay so I'm gonna,put an array of names instead Bob Denise,Clinton Michael all right so just,whatever names came to me first all,right so now what I'm gonna do is,introduce what's called a for loop,alright so how do we do a for loop for,loops exists in pretty much every,programming language we're just going to,loop through a bunch of values in an,array and output them to the screen okay,so how we do that in Shopify liquid is,for and then we specify what the,individual item should be called we can,specify whatever so I'm gonna say name,in array and that's gonna take every,name from the array I like to end my,loop straight away so I don't forget,using end four and then inside here,let's create a list so I'm going to,introduce some HTML now I'm gonna create,an unordered list here and then inside,the for loop block I'm going to put in a,list item and simply output the name I'm,gonna hit save and now we should see an,unordered list of our names when we,refresh the page over here and there you,go now we've created an array of strings,and we're looping through them now again,not a very practical example but I want,to show you how we would incorporate an,if statement so in Shopify liquid you're,going to be using for loops quite a lot,so usually you would use them to loop,through certain objects like maybe it's,blog posts or products in your store in,this instance we just created our own,array and looped through it which is,fine to do but most of the time you're,going to be,using your store data in the form of,objects to loop through the other thing,you might want to do when you're looping,through these objects is check for,certain things before you output them to,the screen or have different content,show up based on certain values and for,that we would use an if statement so in,this particular example it's not going,to be a very practical example but I'm,going to show you anyway we're gonna,open up an if statement here by using,the if tag and I'm going to say if name,dot size which is an attribute that,comes in Shopify liquid for determining,the size of an array or a string when,used on a string it'll tell us the size,in number of characters and what I'm,gonna do is filter when size is less,than four then we're gonna show the name,okay a bit of indenting here now when I,hit save we will only get Bob showing up,so what's happening here is we're,looping through the names in our array,of names that we created up here then,once we're inside a iteration of that,loop we're gonna check if the length of,that string is less than four and if so,we're gonna output the name inside our,list if not there is no else statement,so it just doesn't get shown now at this,point we've pretty much hit the,limitation of programming you can do in,Shopify liquid without actually using,any store data so now it's time to,actually bring in the third part of,syntax within Shopify liquid which is,objects,so instead of cycling through a list of,names that we created what if instead we,loop through products within our store,so just a caveat before we do this you,actually need some store data and what I,mean by that is you actually need to,insert some products inside your store,for you to actually access them but as,long as you have products within your,store we can go ahead and actually,display them on the screen using Shopify,liquid okay so what I'm gonna do is I'm,going to use a sign again to create a,variable which is going to reference an,object and the object I'm gonna,reference in this instance is a,collection so I'm going to call it,collection and what I can do is I can,access a particular collection through,the global collections object okay so,this is our first object that we're,looking at collections and then inside,that collection I can specify the what's,called handle of a particular collection,and then now I will have access to that,collection as long as I've named that,correctly I'm pretty sure I have a,featured collection all right so let's,just quickly move over to the article,lookup collection or collections and,have a little bit of a read okay so,right here my article I have a list of,all the global objects and as it says,here the following objects are available,from wherever inside your theme okay so,this is how you would access products,pages blog posts blogs and collections,from with anywhere in your theme okay so,if you're inside anywhere in your theme,and you know the name or the handle of a,particular collection you can actually,use the collections global again the,reference is all here Shopify liquid,guide if you need to follow along all,right going back to our example,I'm just going to show you what happens,when we try to output an object so let's,try and output the collection here and,you'll see the words come up collection,drop now in Shopify liquid an object if,you just try and output it to the screen,it'll have the type of object and then,the word drop after it interesting,choice of word I don't know why they,call it drop but if for instance we,instead of targeting a particular,collection use the all products global,and targeted a specific product within,our store hit save on that refresh the,page you'll see we get product drop okay,so drop basically just means a object in,Shopify liquid so refreshing the page,there we can see our collection drop,again and it's not particularly useful,to output a collection to the screen but,when you're debugging and you want to,make sure that what you're outputting is,a collection then you can use these,output tags to directly try to output,the object that you're trying to access,in Shopify liquid and if it comes up,with the type of object and then drop,after it then you know you're at least,accessing an object within Shopify,liquid so to actually get something,meaningful from our collection onto our,output over here we can start to grab an,attribute of this object so we've got,our collection object here maybe we want,the name of the collection so we can use,the title attribute refresh over here,and we can see the name of the,collection so I'm going to leave that up,here and what I'm gonna do is open up a,full loop so this is a perfect example,probably the most common example of a,for loop in Shopify liquid is looping,through a collection of products and,outputting products to the screen so,what I'm gonna do is name each,individual item a product because that's,what it is and I'm going to access the,products attribute on the collect,an object then I'm going to end the loop,and inside the loop block let's just,output actually let's do what we did,before create an unordered list using,some HTML tags here and then inside I'm,going to have access to product objects,so within this object it's got an,attribute which holds a collection of,other objects which are products and now,if I try to let's actually just out try,and output the product to the screen see,what happens you'll see as we saw before,all of these are product objects so if,we try to just output the product to the,screen we'll just get product drop which,is not very useful so we have to access,and attribute on the object as well and,I think it's I have a name or title,let's try title there we go,so we've got our collection title and,then we've got our title of each of our,individual products and we can expand on,this using other data so let's say we,want to access the price so you can the,product dot price and here you can see,we've got numbers coming up after the,dash unfortunately or fortunately in,Shopify liquid we have the numbers,without any formatting and they actually,come through in cents value so we're,gonna have to use a filter here and,there's an easy one called,the keep writing filter the money filter,if I hit save on that you'll see all of,these numbers now transform into,something a lot more human readable all,right then what we can do to kind of,complete this is wrap this all in a link,so what we can do is break this up into,a link and inside the href attribute we,can actually put a link to the product,so product dot URL if I hit save,that refresh over here now if I click on,any of these products I will go to the,product page for that particular product,so now that we're actually using real,objects and not arrays that we created,ourselves it starts to make a lot more,sense to use if statements for instance,in this example we may not want to show,out of stock products so first of all,I'm gonna check if a product is in stock,by putting in another - see what,products here we have in stock by using,the available attribute in the product,object refresh the page you'll see we,got true for all of these so I might,need to change the collection point if I,can use The Awl collection here yes ok,so I'm now accessing the all collection,instead of the featured collection and,the all collection is default by Shopify,so it's gonna hold all the items in your,Shopify store all the products within,your Shopify store unless you go in and,create your own or collection which will,override this one ok but we've hit any,store you'll always have an all,collection so this is outputting all the,products in my store and as you can see,I've made this test product here product,with no image and no stock and this one,is the only one with a false value ok so,that's perfect for an if statement,because an if statement looks for true,or false so I'm gonna remove that and,actually instead of not showing the,product at all if it's out of stock I'm,still going to show it but I'm just,going to indicate to the user that it's,out of stock so I'm gonna put the if,statement in here and I'm going to put,if products dot available is not true,then we're going to right sold out and I,want to put some brackets there cool so,I'm gonna hit save on that refresh over,here and you can see the one without any,stock has sold out over here,okay now this is an example of where you,might want to use the alternative if,statement inside Shopify liquid which is,unless okay so if you are from Ruby,programming you should be familiar with,this,Shopify liquid was actually based off of,Ruby the programming language and I,think the entire code base is written in,Ruby so here's another one that we can,use called unless which makes sense in,this instance because it does the,opposite of if so instead of checking if,product available is not true we can,just get rid of that comparison there,and say unless product is available show,sold out so if product is available,nothing will happen but if it isn't then,we'll have salt sold out shown on the,screen,so refresh the page over here and you,see we get the same result so unless you,write less code here but it might,actually make more sense for you to have,it written like this which i think is,easier to understand all right so now,we've learned the basic syntax of,Shopify liquid and we've now combined,that with bringing in some store data,through the use of objects so of course,store data is the data that you insert,in your Shopify admin so when you add a,new product or you add a new page that,then becomes available to access through,your theme by accessing these objects,but what we can also do is add data to,our theme through the use of Jason,schemas,so there are two places where we store,Jason schemers inside themes there is,the schema for the overall theme which,is here in the config folder settings,underscore schema Jason and then when we,create a new section we can define a,schema at the bottom of that section and,then we can kind of section eyes,our theme data into different sections,of our theme okay so the stored data of,course is stored in the backend of,Shopify it's in you know databases where,we don't have direct access to but we,can access through liquid and api's but,the theme data structures are a lot,simpler it's basically just a JSON file,as you can see here and we can see all,of the code for these schemas right now,theme so that being said if the theme,changes the theme data changes as well,so this is data that you're gonna use,specifically within your theme so I'm,just going to move this over a little,bit because we don't need it so big and,it'd be nice to have more space over,here and what I'm gonna do is add,another object to this JSON file so this,is our overall schema for the overall,theme now before we go in and change it,I just want to show you where these,schemas show up so for the end user or,for the person who's actually you know,admitting the store where they're going,to see this schema data is right here so,we don't actually have any sections at,the moment so we just have this one side,bar over here and we just have checkout,settings so this comes default within,Shopify themes there's always going to,be a checkout section here but what we,can do is define our own section so what,I'm gonna do here is open up a new,object and I'm going to name this colors,let's use the American spelling to be,consistent and I'm going to add in some,settings so,think I'm just gonna do one for now and,for each of our input settings what I'm,going to give it a type color picker ID,of color actually let's make it more,specific and go with link color and then,the label which will be what's shown in,the customizer will be link color so,this is the one where you want to use,capitals and spaces and we can also,define a default value here let's just,do a default of black okay so if I've,written this correctly when I hit save,it should work,unfortunately there's an error and I,believe it's because color picker is the,wrong type yep so if I just change it to,color then it'll work so two things here,if you don't understand the syntax of,Jason that is probably for another video,I definitely look into Jason once you,understand how Jason structures work,it's pretty easy we're inside an array,here and then each of these curly,brackets is an object so we've got a,secondary object here and then a key,value pair then a key value and the,value in this instance is another array,with a list of objects inside that okay,so we're not going to cover jason,specifically in this lesson the other,thing that might not be familiar to you,if you're new to Shopify theme,programming is the different things you,need to define here so this is all in,the Shopify documentation I believe the,page is called configuring theme,settings and if I just search for color,you can see an example of what we've,just written so if we scroll down we can,check all the different input types and,look at examples so we could even just,let's put in a random text one just to,show you how easy this is,you can throw in another setting right,here this is going to be completely,random just text actually for the ID I'm,going to change it to text as,all right so where this is actually,going to show up is if we go to,customize theme now you'll see that we,now have a section for colors inside we,have the link color setting that we,specified and we have this random text,field with the default value of value,and this info text of text okay so info,is there placeholder default so the,placeholder will come up if we remove,the value and you can see there we've,got the placeholder text so everything,we specified within this setting right,here will show up in the customizer and,then people who are customizing the,theme using the UI can actually change,this data and then it gets stored right,here in settings underscore data Jason,all right so first of all actually I,need to bring back that customizer and,actually set a color so right now it's,just doing the default let's change it,to red and hit save on that now what,should happen if i refresh my code,editor here fortunately I need to go,back to full screen there we go now if I,go into settings under score data Jason,you can see that the link color has now,been stored and that means it is,available for us to use within Shopify,liquid okay so this was a little bit of,a tangent but it's important to cover,because we're actually going to be using,this data in Shopify liquid just a side,note if you want to learn more about,schemas and all the other aspects of,Shopify theme programming definitely,check out my latest Skillshare class the,link will be in the description of this,video,cool so let's move away from these,schemas now and let's show you how to,actually access that data from within,your theme so here I'm going to put a,style tag and I can access,that color that we just set through the,global settings object okay settings and,I believe we called it link color this,is the ID so yeah how you reference it,if we go back to that schema just,briefly the ID is the attribute all,right,so now when we oh I forgot to actually,specify color here now when we save the,page and refresh it over here,unfortunately we've got that issue that,sometimes happens in Shopify where it,switches to the live theme so I'm just,going to click on preview again drag,this over and you can see now that all,of our links are red that is the color,that we specified in the customizer and,that we can clearly see here so if I,actually go in and inspect this using my,dev tools so I'm going to put the doc,down the bottom here you can see that is,the exact color here that is stored in,this JSON data structure okay so just to,finish off on theme data I want to show,you how we would access it in a,particular section so maybe we want to,put this all in a section and then we,can use section data instead of having,it in the overall theme settings so what,I'm gonna do is grab all of this create,a new section oh by the way when I say,grab I mean cut so it's in my clipboard,now but removed from index I'm going to,replace it with a call to a section to,get a section on the screen or bring in,a section into particular template or,layout file we just write the section,tag and I'm just going to call this,random collection again we're not,creating a production-ready theme here,we're just learning liquids so these,random names don't really need to make,much sense all right random collection,and now you can see if we're using the,online editor it actually creates the,schema for us okay I'll get rid of these,tags and I will paste in my code all,right so if I hit save on that we should,get the exact same result over here,which we do but instead of well in,addition to taking the theme color what,I want to do is have a nother option,within the actual section data so what,I'm gonna do here open up that array and,I'm going to have a checkbox here for a,true or false value and what I'm gonna,do for this example is have an option to,hide it sold out products so the type,it's gonna be check box ID will be,something descriptive like shows sold,out and then the label which is what,gets shown to the user is show sold out,products do we want a default value,let's do defaults false so you can see,it working straight away all right so I,hit save on that if I haven't made any,errors in my schema it should be fine,which it is and I'm going to add this,conditional in so if the product is,unavailable show sold out but what I'm,gonna do is above here do an if,statement close that if straight away so,I don't forget it and from here I can,access the data within the section,schema by using the section object and,then going into the settings attribute,within that and then I put another dot,to access the attribute within the,section settings all right so it's,called sure sold-out so we've got if,section dot settings show sold out this,doesn't make sense just yet because we,have to combine it with the conditional,for product available so I think in this,census,it's gonna make more sense to use unless,because most of the time it's going to,be false,so unless section settings show sold out,is false and so this is how we actually,string together conditional statements,or comparison statements in Shopify,liquid we use and or or pretty easy and,so we won't unless section settings,showed out is false so we don't want to,show sold out products and the product,available is not true so it is sold out,then we'll show the product so just to,summarize this let's break it up into,two lines so if they've got show sold,out as true then we're just going to,show every product but if show sold out,is false and the products is not,available then we don't want to show it,so that's why we have this unless here,if I hit save refresh the page then,nothing has changed yet and that's,because we need to actually go in here,refresh our customizer,and switch that setting so now you can,see we've got tabs in our customizer so,we've got our theme settings which we,had before over here but we also have,section settings because we move this,code into a section and of course every,section has a schema so now we can go in,here and we click show sold out products,so obviously I've made a mistake here,and this is actually hiding sold out,products so I'm just gonna change the,wording of that instead of show I'm,gonna put hide sold out products hit,save on that refresh the customizer to,show that the label has changed and now,if we click the check box for hide sold,out products you'll see that that,product with no image and no stock,product that is indeed sold out will,hide and if we hit save on that go over,to our preview over here you'll see that,change has taken effect,all right so now we've seen the basic,syntax of Shopify liquid we've,incorporated store data and we've,combined that with theme data this is,basically the full range of what you can,do in Shopify liquid now of course,there's so many other filters and tags,and objects that we could use and we,can't get into all of that in this video,but essentially if you take what you've,learned here and you use the,documentation read this blog post you'll,be able to apply the concepts that,you've learned here to manipulating any,objects or using any different kind of,filter what I want to finish on for this,tutorial is I want to talk about two,things actually scope and the,limitations of this Shopify language all,right so what do I mean by scope okay so,right now we just went on the index,template right and I was able to grab a,collection by referencing that specific,collection but what we have in Shopify,and is essential for Shopify themes,templates so when you view a certain,collection in a Shopify store it's gonna,show the same layout but just with,different products based on what's in,that collection if you go to a certain,blog post page in a Shopify store you,will see the same layout as every other,blog post page in that Shopify store but,with the content of that specific blog,post all right and so that's why you,have these templates so for instance if,we click on awesome sneakers here and,again it is going back to the live theme,so I'll just preview again and bring it,in so if I click on the first product,here you'll see we have the title the,images the description the variant,information if we click on another,product you'll see it's all laid out the,same way but the difference is the,actual product the product information,changes but the layout and the,presentation stays the same,and that is because it's all using the,same template now the reason why I,mention this is because as we did here,we targeted a specific collection but,most of the time you're going to want to,edit the collection template and have,the URL or what the user clicks on,determine what collection is in use so,if we go to the actual collection,template here we can see an example,it's just grabbing this collection,object which we didn't specify ourselves,but is specified by what the user clicks,on and ultimately by the URL so for,instance with product this is the same,code that gets run every time you look,at a product right so if we just go to a,product page now you'll see that we've,got a h1 with the product title right,there we've got the form which is right,there and we've sorry which is right,here below the title and then we've got,the product description in a div alright,and that doesn't change for any other,product what changes is the store data,that it's bringing in so the actual,product object in this instance is,whatever object whatever product you're,looking at all right so you can actually,determine that and unfortunately I can't,see in that example there but here's the,full URL its products or some sneakers,so if we look at the URL structure we,can see that we're loading in the,products template and then we're using,the handle of that product and that's,going to be the actual object that is,product in this product template all,right so if we go to another product as,I showed you before and we grab that URL,everything stays the same except the,part on the end and then so now the,product object becomes the black leather,bag rather than the awesome sneakers,alright so I hope that concept makes,sense it's imperative that you,understand that if you're going to do,Shopify theme,should be pretty easy to understand once,you you know get familiar with Shopify,the final thing that I want to talk,about and this is something I discussed,in the advance liquid patterns lesson of,my Shopify theme programming course is,the limitations of the language so I'm,going to get rid of this window here,because we don't need it and I'm gonna,paste in the paragraph that I wrote in,that particular lesson okay so here are,some limitations of Shopify liquid let,me just increase the screen size okay so,as I mentioned at the start liquid can,be thought of as a programming language,but it's just a templating language so,what that means is you can't do certain,things that you would do in a,programming language in liquid for,instance you can't create objects in,liquid you can only use the objects that,liquid makes available to you and you,can't loop through certain objects that,you would expect to be able to loop,through even that makes sense like for,instance you can't loop through all the,articles in your Shopify website you,would have to go into a particular blog,first and then loop through its articles,all right you can't create your own,functions the filters available are the,filters available you can't actually,make your own filters and certain other,things like boolean so you can't assign,an actual comparison so like I said this,is all covered in the advanced liquid,lesson within my Skillshare class but,the reason why I wanted to include this,particular information is to bring home,the idea that really Shopify liquid is,basically what we've learned here today,the main things are going to be using,time and time again loops conditionals,assignment there really isn't a whole,lot to the language and we can't create,objects we can't create our own,functions so whenever you're lost in,Shopify liquid all you need to do is,look up the documentation i've got the,link to the documentation within the,blog post right here and you can see,that three types of syntax objects tags,filters,you can learn about the basics here and,really everything that the programming,language or I should say the templating,language can do is right here alright,guys that's it for the tutorial here on,Shopify liquid if you liked the video,let me know hit that like button and,tell me what you liked or didn't like in,the comment section below remember if,you want to learn more about this sort,of stuff I have a class out on,Skillshare com called Shopify theme,programming which goes into a lot more,detail into Shopify liquid as well as,JSON schemas even a bit of JavaScript,and the Ajax API allowing you to do some,more interactive kind of live updating,stuff in your Shopify store very cool,I've also got the Shopify theme,development series that was previous on,this YouTube channel so definitely check,that one out I will link it up somewhere,in the description and on your screen in,terms of a Shopify liquid this video,this tutorial should be a pretty good,basis you should be able to use what,you've learned here use the,documentation use the blog post and be,able to figure out almost anything,within Shopify liquid so I hope you guys,enjoyed that one if you do like these,videos make sure to subscribe to the,channel and let me know what you want to,see in future videos put your comments,in the comments box below it's really,gonna help me to determine what to make,next so anything you want to learn more,about let me know again hope you liked,the video and I'll see you in the next,one

Congratulation! You bave finally finished reading how to create a shopify theme from scratch and believe you bave enougb understending how to create a shopify theme from scratch

Come on and read the rest of the article!