how to read shopify code

whether you are new to shopify or you're,already a shopify store owner you've,probably encountered a code that looks,something like this,this is shopify liquid a template,language created by shopify that serves,as a framework for all shopify themes in,today's video we'll take a closer look,at shopify liquid we'll start by,understanding shopify liquid further and,then we'll learn about its features,are you ready,let's begin,to recap shopify liquid is a template,language used for creating or modifying,shopify themes if you are familiar with,ruby you probably have heard about this,template language because it's written,in ruby or it's known to be written in,ruby but in terms of syntax it's very,different compared to other programming,languages we'll get back to this in a,minute in addition shopify liquid is,very limited like there's a lot that you,cannot do with liquid for example you,cannot retrieve a data from a,third-party server just from shopify now,what is it used for in web development,there are two contents that you can,render static content and dynamic,content static content is a content of a,page that stays the same and is usually,hard coded in html whereas dynamic,content is the content of a page that,changes depending on specific parameter,for example we have the following,product page,it specifically rendered this product,for cats because in the url we specify,that we want to render the specific,product in shopify this is called a url,handle and by changing this to a,different handle of a product the,product page will render a different,product this is how dynamic content is,being rendered in addition shopify uses,its own architecture or template files,to display these pages for example this,page is using product.json it's a json,template that uses sections to complete,the page taking a closer look at the,section files you will see that there's,a liquid code mixed with html css and,javascript so to put it simply shopify,liquid is like the middleman between,shopify stores and the server of shopify,where all the data about your shopify,store is stored and then when a shopify,store asks for a data through liquid,shopify liquid will ask the server of,shopify if that data that is being,requested is available if it's available,then the server will give it back to,liquid,then liquid will give that to the,shopify store's theme,otherwise if it's not available then the,server of shopify will just return a 404,error response shopify liquid is,categorized by three features,objects,tags and filters objects also known as,variables are wrapped in double curly,braces and it's used to output pieces of,data from a shopify store for example,this is a shop object inside of this,object there are properties or,attributes that you can use by using dot,notation let's say we use the name,attribute so you're going to type it,like this so shop dot symbol and then,name this will render the name of your,shopify store there are plenty of,attributes that you can use from most of,the objects in shopify so if you wish to,learn more about these objects i suggest,going to the shopify references page and,get to know these attributes or objects,now let's proceed to tags tags in,shopify liquid are the programming logic,that tells templates what to do these,tags are wrapped in curly braces,followed by percentage symbols and it's,usually followed by a closing tag,tags are divided into four categories,control flow iteration theme and,variable tags control flow tags are the,tags that you can use to create,conditions this is the if the unless the,else or else if the case and when and,lastly the end or operators,to create a tag you need to start it,with a tag itself say for example the if,tag then you need to close it with a,closing tag and if however not all tags,are required to have a closing tag a,good example of this is dlc or elsif,these tags can only be used between if,and and if you cannot do it like this or,like this,now if you want to create multiple,conditions for a control flow tag you,can use the operator's end or or for,example we have the following condition,if you're using end two conditions must,be true in order to execute the block of,codes inside of the if if you're using,or either of the two conditions can be,true it will still execute the code,inside of the if tag now all of those,are part of the fundamentals of,programming and so if you're not,familiar with it i suggest go and learn,it because we are not going to go in,depth with this topic,next is the iteration tags iteration,tags are the text that you can use to,repeat blocks of code this is where you,can use the four tag to loop through an,array of values for example we have the,following four tag with a condition for,each product in the collection.products,we are going to render the name of the,product so for example in this,collection we have three products,product one product two and product,three this entire code will basically,output three heading title ones with a,text product one product two and product,3. you can also combine 4 tag with an,else tag this is very useful too,especially if you want to know whether,the four tag executed the codes inside,of it or not,next up is the theme tags theme tags are,the text that you can use to generate,template specific html codes dividing,arrays into multiple pages and telling,shopify themes to render or use a,specific layout or snippets,so this is where you will find the form,tag the section tag the pagination tag,and the layout tag don't worry we're,going to be using most of these tags in,the future lessons lastly is the,variable tags variable tags are the tags,that you can use to create liquid,variables if you're familiar with,javascript or other programming,languages you can create variables most,of the time you're using var keyword or,a data type in shopify liquid you can,use either assign or capture to create,variables so how can you create a,variable say for example we use the,assign tag to create a variable you can,create the assign tag followed by the,name of the variable then followed by an,equal sign symbol or equal sign to,create or assign a value for example we,can use the name of the shopify store,and pass it to this variable now if you,use this variable like how you use an,object this will output the name of the,shopify store so those are the tags now,let's continue to the last feature of,shopify liquid and that is the filters,filters are kind of hard to explain but,to put it simply they are methods that,modifies the value or the output of an,object they are placed within an object,tag and is denoted by a pipe symbol now,let's take a look at this example let's,say we have a product the title object,here we can use a filter by adding a,pipe symbol here and then specify what,filter that you want to use let's say we,use the up case filter this will then,change the output of the object and make,the string all upper case that's,basically how filters work they change,or modify the output of an object now,there are plenty of filters that you can,use for every situations there are,filters for strings for numbers for,arrays for urls for colors etc,but they all do the same thing they,modify the value or the output of an,object so that is shopify liquid a,template language used for rendering,pieces of data from a shopify store,if you have any question let me know in,the q and a section or in the comments,below otherwise feel free to subscribe,and like this video i would appreciate,it if you like this video because i took,so much time making this video it's been,a fun editing i've been working on this,for about a week and i learned so much,about making 8-bit animations or,characters and i also learned about,davinci resolve making animation using,davinci resolve that's really really,amazing to use so yeah anyway thank you,so much for watching hit like subscribe,bell,and yeah i'll see you next time,bye

Congratulation! You bave finally finished reading how to read shopify code and believe you bave enougb understending how to read shopify code

Come on and read the rest of the article!