hello hello youtube my name is braden,gerard,and today we're going to take a look at,another one of my shopify tutorial,videos,today we're going to be looking at,variables and how you can use,variables inside of your liquid,templates,now just like in any programming,language variables are key to holding on,to,data that you might need to use later on,or accessing things from the shopify,store,that you want to show in your template,so today we're going to look at,three different types of variables that,you can use,inside of your template code and you can,use these variables to show or hide,things or to display different,pieces of data in parts of your template,so,let's jump into the code and take a look,okay now we're going to look at,variables in liquid so if you need to,create variables in your template,you can use the variable tag so,the variable tag is denoted by the,keyword assign,and then the name that you want to give,to your variable so in this case i'm,going to say favorite food,and we'll make that equal to whatever my,favorite food is so i'm going to say,tacos,all right so there i now have a string,variable that is assigned,to tacos so if i wanted to then print,out my favorite food i could say my,favorite food,and then i can print out that variable,favorite food,and if i save that you'll see that the,page now says my favorite food is tacos,okay and we can assign any data type to,a,variable the only exception there is,that we can't actually create,lists in variables we can only create,lists by splitting strings or by,having lists given to us by shopify i've,mentioned,that in a previous video and i just,wanted to remind you of that,so we could also make our variable equal,to,a boolean so we could say assign,i don't know first time visitor maybe,this is someone who's just visiting the,site and we want this to be,known in our template we could say that,it's equal to true,okay and then we close that and then,we'd maybe welcome them if they're a,first-time visitor so we'd say,if first time visitor,is equal to true,and we just say welcome to our site,enjoy 10 off as a new customer,and then we could put close our if,and if we save that say welcome to our,site android 10 off as a new customer,all right let's just throw a break tag,in here just so that,this isn't all in the same line and,there you see that we're also getting,this variable printed out because our,first time visitor variable is true,another thing that we can do,with variable tags is we can use the,capture tag,so if we create a capture tag,what a capture tag can do is it will,grab whatever is in between the opening,and closing capture tag,so let's create a capture tag here,called about me,okay and for the sake of this demo we'll,also create two,regular variable assigns,one with my name we'll say which is,equal to,brayden and then we'll do another one,with,let's say,favorite color,is equal to green,so now we have those two variables and,we have our capture now if i wanted to,capture this information,into one variable we could say i am,and then print out my name,and i like the color,and then here we'll put favorite color,okay and then we can close this capture,so,we write end capture and what that'll do,is everything between those capture tags,will be assigned into,the variable about me so it'll create a,string inside of that about me variable,so now if we go down here and we say,about me,and i save that i am braden and i like,the color green,okay that becomes that variable becomes,everything that we've captured inside of,it,the final thing that we can do with our,variable tags is we can increment and,decrement things,okay so if we wanted to increase a,counter for example,we could do that the way we would do,that,is with the increment tag so let's,create a for loop here,and if you remember back to our four,video which if you haven't watched go,check it out,um it's our iteration video on for loops,and we learned there that you can use a,range,so we could say 4i in and then create a,range,let's say 1 to 10,and then we close that and then close,our 4.,and inside of there okay let's just,increment a counter,so we could simply create a tag,that says increment and then we'll just,call it counter,okay and then after the for loop,we'll just print out that counter,and let me get rid of this for you guys,just so it's not confusing,all right and then we will run that or,save that sorry,and you'll see we get 0 1 2,3 4 5 6 7 8 9 10. okay so this creates,a list with all of the numbers,that are inside of our counter,now the other thing that we could do is,we could decrement the counter,so here if i say decrement,and we save that you see negative one,two three four five six seven eight nine,ten,negative ten,so why is it printing out negative 10,twice and same with increment if we put,increment here,right why is it printing out um 10 only,once,so if we look this this starts at 0,and goes to 10. so here i'm,i'm printing out or i'm looping sorry,iterating,from 1 to 10. so if we print out that i,value,okay we'll see that we're getting one,and then it's gonna print out the,increment so,let me just comment this out for a,minute,so i'm now using the comment,tag which is a theme tag,specifically for shopify theming and,we're going to talk about,theme tags in a future video so make,sure to check that out but if i comment,out,this and we just run the iteration with,the i we're seeing that our iteration is,going from one to ten right so it's,going one two three four five six seven,eight nine ten,so it's running nine times right one two,three,four five six seven eight nine sorry ten,times,yes we've got ten digits there so it's,running 10 times the loop is,going through the the code 10 times so,we're incrementing 10 times,okay so we know that so let's let's,remove this comment now remove that that,i value,and run this again and take a look at,our output so we see here we're getting,1 2 3 4 5 6 7,8 9 10 11 outputs,okay so these first 10 outputs,are what's happening inside of the for,loop and this last,output is our counter output here okay,so our counter is showing a value of 10,and our increment is showing that,it starts at zero and ends at 9.,so what we can see here is that,increment always,when you run the increment it always,prints out the current value of,increment,before it's been incremented or sorry in,this case the current value of counter,before it's been incremented and since,counter was never assigned to any value,before it starts at zero,okay it's a new number and it's a new,number that hasn't been assigned to any,value is zero,so it starts at zero and increment will,print out that starting value,or the current value and then it will,increment it and then on the next loop,it's now one because it's been,incremented so it prints out,that current value and then increments,it so it always prints out what the,value is and then it increments it,so then that's why we're seeing zero one,two three five six seven eight nine and,then it prints out ten at the end,because it's been incremented again,after that last iteration and we print,it out,similarly if we do the decrement,right this should make more sense now um,dec,missed made a mistake there if we print,out this now you'll see that,the current value is negative one if we,start with a fresh counter that's on a,decrement,and then it goes all the way down to,negative 10,and then it prints out the negative 10,again at the end,so notice though there is a difference,with decrement decrement,will print out the value after it's been,decremented,okay so in this case the counter starts,at 0 and it gets decremented and then,printed out,so just notice that difference between,increment and decrement the increment,prints out the value before it's been,incremented,and decrement prints out the value after,it's been decremented,that's all we have to talk about for,variable tags,i hope that helped thanks for tuning in,to another one of my shopify liquid,tutorial videos,if you enjoyed this video and it helped,you learn a little bit more about,shopify liquid templating,then feel free to leave a thumbs up on,the video and make sure to subscribe to,the channel if you want to catch,more of our shopify liquid tutorial,videos,and future development tutorial videos,that we're going to be doing here,thanks have a great day
Congratulation! You bave finally finished reading shopify liquid tell what page you're on and believe you bave enougb understending shopify liquid tell what page you're on
Come on and read the rest of the article!