An Overview of Liquid: Shopify's Templating Language

hi this is clear from Shopify in this presentation we're going to focus on liquid if you're new to the Shopify platform you might be wondering what exactly liquid is well in actual fact it's the template language that is used to create Shopify themes it has a lot of similarities to traditional web centric programming languages such as PHP and Ruby and in this presentation we will have a look at the main features of it and how they relate to the Shopify platform let's begin by actually asking what is liquid well in its simplest form it's a template language used in Shopify themes I like to call it a language other people might call it a syntax or an engine there's various terms but to me I think language is probably the most applicable in as much as it has common constructs that you'll be familiar with if you have done any sort of programming things such as if-then-else statements or logic or filters and loops and things like that so if you've done PHP or Ruby as I said earlier then you will probably familiar with a lot of the concepts and find the syntax very very easy to pick up what liquid actually does for us it creates a bridge between our template files and a datastore now in our case the datastore is actually a Shopify store and it allows us to have constructs within our files that will then when compiled on the Shopify platform will be replaced with data from a particular store and the search this allows our themes to be agnostic and reusable whether that's the whole theme or a chunk of code as the templates themselves and liquid in effect doesn't have any concept of the actual data that it's pulling in for example it doesn't need to know the name of your store it doesn't need to know what products are in your store all it needs to know is that if a product has been requested it will go off and grab that data relevant to the store that that particular theme has been applied to this also means that when you come up with a really functional piece of liquid code you can use that over and over again in all future projects so let's have a quick look at how liquid at works let's say that someone is requesting the URL of your Shopify store Shopify platform then needs to work out which store is being requested from that URL and once it's done that it will go off and hunt out the actual theme now it will hunt out the active theme directory obviously if you have a Shopify store you can have multiple themes within that store but you can only have one active one so it will go and grab the particular theme directory and then also work out which template file is being requested so for example is it a collection page is it the home page is it a product page once it's done that it will work through the template it will find out if there are any liquid placeholders in there with a baby output and logic both of which we'll look at shortly and they will go off and grab the data that's being requested for the particular store from the Shopify platform now what happens then is the liquid placeholders will be replaced with HTML so for example if it's the templates requesting that we input the name of the the shop itself then the placeholder will get stripped out and the actual name of the store will get input as HTML in that sort of compile template which then gets sent to the browser finally the browser processes the HTML file that has been sent and fetches all other required assets such as images JavaScript CSS etc so pretty straightforward but very very powerful we look at some of the features now so how do you identify a liquid file well it will come as no surprise that the extension is liquid as you can see here I've just output for commonly used files from a Shopify theme index dot liquid will be the homepage template theme dot liquid is a layout file and if you're not familiar with layout files we do have a whole bunch of tutorials and screencasts relating to those on the Shopify partner blog and we will put those links in the video show notes as well you'll also notice that we can append the dot liquid extension to both the and JavaScript files now obviously when they are sent to the browser they won't have the dot liquid extension but what it allows us to do is pull in data from the Shopify platform into these particular files which can come in really really handy and yeah you can use the same syntax whether it be you know output or logic within your CSS and JavaScript files and obviously what gets sent to the browser is the compiled final output of those so it's not just templates you can also use it in those asset files as well I also wanted to show you just what a typical template would look like this is the aten browser this is my preferred choice of text editor you'll see that it's all syntax highlighted because I've installed the liquid highlighter package which makes reading and working with your templates really really easy and straightforward you see it's a mixture of HTML these things like an h2 there and it's got some liquid in between those two and obviously at the time of rendering if we had requested a product a template for an active store the the product title would get replaced there with the actual products title as HTML and we'll look at that shortly you'll also notice on the left that's a very very typical layout of a Shopify theme just a number of folders and a number of templates and layouts and so forth very very easy to get started you can obviously build on that as much as you want and have numerous multiple versions of a theme or as in a layout file or multiple versions of a product template that you can programmatically request or request and apply to a particular product within the admin as well but I just want to show you that again if you're new to liquid I don't believe it all really Fox you it's really just working out the syntax and then working with these small files to to incorporate the the liquid code into your templates so let's have a look at that syntax well there are two main delimiters that you'll notice whenever you're working with a liquid file see the double curly brace and the curly brace percentage the first denotes output and the second on there the calibrates percentage denotes you'll also notice when you're familiar with themes that the all the objects now an object is another way of describing a variable such as the shop variable this will have a whole bunch of properties associated with it such as the name the address of the shop the currency that the shop functions in and so forth and we access those using the dot syntax and again this all be demoed shortly we also have things like loops available to us that allow us to iterate over objects so let's say a particular products has a bunch of images associated with it we don't a we don't know how many and B we certainly don't want to be repeating ourselves in code so loops allow us to access those images just tell the template exactly how we want that HTML to be displayed and then not worry about how many they write we'll just do it for us we also have filters that allow us to manipulate output a great example is something such as a computer date will be stored in a particular computer syntax if you will in the database a filter allows us to output that in a particular format that we want that we choose and not in that sort of computer database format we have logic which allows us to actually control the output flow so for example we can ask questions in our code if if a product's available do this if it's sold out do that so it doesn't really influence what's displayed more as in the actual output of the HTML in what more allows us to control which chunk of HTML is output or if a particular piece of code is shown at all and again this will become apparent when we have a look the final piece of the puzzle our operators operators allow us to compare things whether that be a number or a string of text so we can say something like if the price is greater than hundred dollars we could output a particular piece of code if it's less than $100 or if it's I don't know if it's if something's on sale or it has a particular tag we can do X or we can do Y so again I'll show you all of the operators towards the end of the presentation so here's a very very work if you've been working with the themes for any length of time this will be a very very familiar syntax to you it's a we've got some logic in here we're using a for loop which we'll look at in more detail shortly and you can see at the end there I've highlighted the logic percentage curly brace with the with the arrow pointing to it we've also got very familiar image element there with the source but you'll notice as the source is populated by the double curly braces and what we're actually using there are is the the image iterator to do to output an image of a product also using a filter and also closing out at the end there the which I've highlighted with the arrow the second arrow the double curly braces to show that we're closing off that particular output and then we have the end for so a very very simple example but what what actually happens as a result of this if we're using that in a product template is with those three lines of code we have the ability to output every image that is associated with that particular product and you'll also notice again that we are we have no concept of a theme designer where that image needs to live using the image URL filter and filters will make more sense shortly we we can push that responsibility onto the Shopify platform and it will populate that URL for us okay so let's have a look in more depth to clarify some of these concept let's first begin by looking at output now as I showed you when I showed the code editor we had something very similar to this it's an h2 double curly braces product dot title and then we've closed off those curly braces now what's happening here if this is on the product template this will get replaced at run time when when Shopify compiles that HTML template and sends it to the browser and will be replaced by the title of the product that you've entered in the Shopify admin so effectively if we had an American diner mug what would get sent down to the browser in place of those liquid constructs would be this American diner mug so just go back one the product title will get replaced and sent to the browser with the name of the product obviously you won't see any of that syntax once it's rendered in the browser so that's how output really really simple it will grab a piece of data and it will take out the liquid placeholders and it will inject the actual string of text very very simple well it can get slightly more complicated because a lot of these objects have different properties and we can often we have to interrogate those with with loops and things and we'll start to examine what they are now so objects and properties an object really is another way of describing a variable it's a piece of data that has information that we can access but it's kind of like if you think of a human being we have this name of human but then we have properties such as arms and legs and and things like that so just as we have the shop object it has properties such as its title its description the currency that the shop functions in and so on and so forth and as I said at the beginning all these properties are accessed via the dot syntax and if you look through the Shopify Doc's or indeed look at our Shopify liquid cheat sheet you'll see that all of these objects have a whole bunch of properties that you can access using this dot syntax before we had product title in this example this shop description the shop is the object and the description is the property of that object we also have something in liquid known as liquid collections now whenever I do a workshop I try and distinguish these from product collections if you think of a collection in Shopify terms if you're entering a whole bunch of products into the admin and then you group them together logically that's what I term a product collection in liquid a collection is a number of objects that have all the same so you could have a collection of product images you could have a collection of users who you've got customers in the in the in the database effectively and we have to deal with these in a slightly different way so it's always worth thinking is it's something that's more about the the products on the front-end the collections that your client or yourself is entered into the admin or is it about a liquid collection and if it's a collection you'll need to iterate over it using a loop so they are signified in liquid by plural object names and each individual item has its own properties so this again will become clear by example in a moment and as I said liquid loops allow us to output these multiple items and we don't have to have knowledge of each individual one we just tell the template how we would like these items to be output but you can also target individual items directly if you need to using things such as dot first or last more information on those can be found in the Shopify Docs if you really want to dig deep so how do we know when we're encountering a liquid collection well as I said there it's all around the plurals so if you've got shop types or shop meta fields or shopped enabled payment types you'll notice the S on the end of those and that will means that we would need to use a liquid loop to access all of that data ok let's have a look at loops well we've already seen one in actual fact and this was it this is a loop that allows us to output all of the images associated with a particular product now loop is always started using the percentage curly sorry the curly brace percentage format and it begins with four and you'll also notice that it ends with end four so if you're familiar with any type of program this will be a familiar construct what we're saying here is for every image and the word image there is just it's kind of a placeholder is an iterator placeholder it could actually be anything it doesn't have to be imaged it's just a container word but obviously image in this sense feels feels appropriate but it doesn't have to be it could be it could be anything literally so what we're asking here is for every image in the product images collection that's a liquid collection that houses every single product image associated with the current warmer viewing we're going to output an image element and then we're going to pass in that placeholder and then we're going to access the image URL and the me medium version of it again so we're using a filter to ask Shopify to fill in the blanks for us because as I said at the beginning this theme can be used in across multiple stores and we don't have any concept of where these files are resident on the platform so Shopify does all that grunt work for us which is great and then at the end there we close it off with the curly brace percentage and end for so let's say we had 100 images associated with it this loop would run a hundred times because we haven't put any reason for it to stop if there were three it would be three times if there was one and obviously one and if there are no images then a zero image elements would be output to the browser so pretty straightforward hopefully you'll see you'll see these as peppered throughout Shopify themes loops are very very used concept within themes for outputting these collections so again the key there is just to look for the s for the plural and then you'll know that you're dealing with a liquid collection you need to use a for loop as I said there the iterator variable image that I use can actually be anything it's not important what that is all you need to know and just going back a slide is that whatever you use after the four that's how you reference the currently for want of a better phrase the currently viewed image in the loop the current image that you're looking at so it will have different properties for the first image and will have different properties for there for the 88 image in your loop but you reference it using that iterator variable there as I said it could could simply be for all the images it could be your name it could be whatever you want it's just important that you understand that that's not relating to anything other than the year so a placeholder for the current image in the loop you'll also notice there that we we reference the image in the source element there and we used a filter which is denoted by the pipe and we passed it through the image URL filter which is a Shopify specific liquid filter which will go off and grab the URL for that particular kela product image in the medium-sized every time you upload an image in the Shopify admin multiple versions of that image are generated so that they can be used in different different guises so if you want a very small thumbnail image you can use one or you want a medium and if you have a look in the Shopify Docs all those image sizes and proportions are referenced there but in this case we're just referencing the medium one which already have a different URL to the big one and so forth and as I said always look for the closing end for basically what happens when Shopify encounters this it will carry on rendering the rest of the template whether it's looped around one time 10 times 99 times once it's completed iterating over all of those product images in the liquid collection it will carry on and deal with the rest of the template okay logic logic will be again one of the concepts that you'll use all the time during your liquid themes so as I said at the beginning it controls what is output not exactly the code itself but whether a piece of code is displayed or not it doesn't output directly in a template you're not going to see any output to the browser as a result of using logic uses common constructs some of which we've already seen but the ones that mostly use are things like irfan else and if then else and so forth so let's have a look in this one you'll notice that we're using an if statement which I was described as asking a question of our template we've got the curly bracket percentage and we're basically saying if product dot available so the product object and available is a property which will return true or false so fundamentally if the product is available and Shopify will tell us if it is or not if it is we will output the price in an h 299 pounds 99 pence else will output an h2 that says sold out and then we'll end if at the bottom so again a really really simple example but as I said the liquid a lot of sort of logic itself isn't actually outputting anything in our template rather it said controlling which of those two HTML h2s is output depending on the answer to the question if product is available again very very quick example there are variations on the if statement that you can use and there's a whole bunch of different formats that you can can use to control the flow the template but but essentially just remember that logic is akin to asking a question of our template and depending on the answer depends on which piece of code is sent down the wire to the browser now filters I think an amazing feature of liquid and often underused is these hundreds of them and you can do all sorts of really interesting things with them but to put them simple terms it's a way of manipulating output data in some way and they allow our themes to be more agnostic as we've already seen using that image URL filter we have no concept of where that image will reside on the Shopify platform and nor do we need to we simply use that filter and let's shop if I do the hard heavy lifting for as and go off and find that URL they also reduce the amount of code we need to write which you know as a theme designer is great if I don't need to remember particular format so I can just throw in that filter and it will go off and grab that URL or although manipulate the data in a certain way so we don't have to very very powerful let's have a look at one so as I said at the beginning the date format we publish articles in our in the blog feature on the Shopify platform and it's most likely that that data I couldn't tell you exact or matte but will be stored in a particular syntax within the Shopify database we really don't want to output that it's probably doesn't make much sense to most people but we can use a filter in this case the date filter to specify the format and so we start on the left and we we push the the article got published underscore at a property there we start on the left and we filter it through the date filter itself and like to describe it is we start on the left we push it through the filter and it comes out on the other side on the right in a different format filters very very powerful that's a very very simple example again look up the Shopify Docs and find the ones that you that you can use them this is one of the most popular ones there's actually two here we've got the asset URL and the stylesheet tag filters and this this allows us again to really create agnostic themes we don't know where our theme directory is so we have a really useful filter called the asset URL which will give us a fully qualified path to the folder of our current stores active theme and then we also have the stylesheet tag filter which will then take the fully qualified URL and and which has already appended the style that CSS to it and then it will create the full stylesheet tag so much so that I've been developing themes for so long that sometimes I actually have to look at how to declare a style sheet when I'm using something other than Shopify so just to clarify we're passing in as the first piece of output the style CSS which is the name of our stylesheet within our theme we're then filtering through the asset URL which will create a fully qualified URL to that particular asset on the Shopify platform so just a note it doesn't check for the existence of that file it's assuming that you have put the right file name in and then finally we pipe all of that through the stylesheet tag which will take that and create a fully formed stylesheet tag which we can inject into our layout file finally we come to operators operators allow us to compare variables whether it be a piece of text a string or a number or price and if you see if we if we have a look at this code example here you see that I'm using a lot of the concepts that we've talked about already during this presentation so we're starting off with some logic we're using the if statement if carta item count cuts our object in the item count will return the number of items in our car that's the property if it's greater than zero then we're going to output a paragraph that says you have and again within this paragraph we're using liquid output and we're going to output the car to item count and then we are using the pluralized filter and saying which will basically allow us to if is we passing the item count if it's 1 it'll be item if it's zero or more than one it will append a plural as you can see so we're basically saying if it's one item if it's zero or more than one items and again you can find info on that particular filter in the Shopify Docs but again does the heavy lifting so we don't have to it's a really really useful filter so basically we'll say you have so many items in your cart if the question that we asked at the top if the item count isn't greater than zero then we'll output a paragraph that says there's nothing in your cart why not have a look at our product range and we've just got a an anchor there that will direct the user to slash products which gives an overview all the products and of course not forgetting the end if at the end so our comparison there is the is the greater than sign at the top that's just one of many and here's a full list for you we can compare something to be the same as equal to which is the double equals comparison there we've got naught equal to greater than less than bigger or equal less or equal or which can come in very very handy which is a this or that and must be this and also that and contains you can use the contains to look for a string within a string so for example we could say if the product title contains t-shirt then we could output something within our particular template again you can start using these for a whole bunch of things not least of which is things like the cart example I showed on the previous slide okay we've come to the end of the presentation I hope you found it useful we've covered quite a lot of ground but it really was intended as an overview to give you an introduction to some of the key concepts of liquid the are hundreds of very very detailed documentation pages that go into all of the concept we've talked today you can also check out the Shopify partner blog at Shopify comm slash partners slash blog where you'll find articles diving into many of these concepts in much more detail along with some screencasts as well things from layout files and alternate template files to filters to a whole bunch of other stuff I'd also like to direct you to the liquid cheat sheet which is available on Shopify comm slash partners slash Shopify - cheat sheet this is a kind of one-stop shop - all of those objects properties operators filters that you can bookmark and have on hand during your Shopify theme development thank you for watching and I hope you found it useful

Channel: ShopifyDevs

Views: 123,902

Keywords: ecommerce, web design, shopify developers, coding, theme development, shopify experts, Shopify development, web developer, How to build a shopify theme, shopify partners, freelancer, Shopify Liquid, Liquid code, shopify

Id: -ihFPNcSkT4

Length: 27min 33sec (1653 seconds)

Published: Tue Jun 14 2016