LIQUID FOR TECHNICAL MARKETERS: 3 Types of Liquid Code (Variables, Tags, and Filters)
🗣️ WATCH FULL YOUTUBE VIDEO HERE 🗣
What’s up everyone, my name is Allan, Founder and Consultant at For Now Marketing, and welcome to LIQUID FOR TECHNICAL MARKETERS!
If you’re goal is to improve your Liquid coding skills, then please
- like this video
- subscribe to our channel
- watch this video all the way to the end
- and keep an eye out for more videos in the future.
Today, we’re going to talk about the 3 types of Liquid code. There’s only 3 types of Liquid code, and when we break it down this way, it sounds so simple!
Before we jump into the 3 types, let’s go over one resource that we’ll be using throughout our LIQUID FOR TECHNICAL MARKETERS program.
Liquid Basic Documentation
This is the resource that we are going to be referring to throughout this program, and the link is in the Youtube description. This is Shopify’s basic documentation for Liquid. They also have a Developer version of their documentation, which is full of useful information, but it’s also much more daunting, complex, and includes many information that doesn’t apply to Braze Liquid.
So please bookmark the basic documentation because this page has everything you need to learn to become a Liquid expert. But, I’m making these videos so you can enjoy the process of becoming a Liquid expert and not have to read through these pages alone :)
3 Types of Liquid
Now, let’s get back to the 3 types of Liquid code. So what are those 3 types?
#1: Variable
First, we have what’s called a variable. On the basic documentation, they refer to variables as “objects” more often. But for our program, we’ll refer to them as variables.
What exactly is a variable? Think back to your middle school Algebra class where x equaled some value. It’s a very similar concept.
A Liquid variable is assigned a certain value, and we can use that variable to create personalized messages.
A variable is always surrounded by the curly brackets, {{ and }}. Whenever you see curly brackets, you can expect that variable’s value to be rendered in our messages. For example, “Hello !” Notice first_name is surrounded by two curly brackets.
There are different types of variables we can create, which are called datatypes. We’ll go over those in more detail in the next video.
#2: Tags
Second, we have tags. I like to think of tags as functions.
Tags are the more advanced type of Liquid code, but the good thing is that there really isn’t too many tags to learn, and each tag is not too complex.
Tags or functions will never render anything themselves, but all the work gets done “in the background”.
Tags are surrounded by a single curly bracket and a percentage symbol, {% %}, like this. I’m sure you noticed the other code when we went over the first_name variable example.
Well, that’s actually called the assign tag, and the assign tag allows us to assign values to variables. The assign tag is how we were able to create a variable called “first_name”.
So to break this down further, we write { curly bracket, % percent symbol, write the keyword “assign”, choose a name for our variable which we’ve called “first underscore name”, add the equal sign, just 1 equal sign, and then give it the value allan. We’ll surround allan in quotes, and we’ll go over why we surround allan in quotes in the next video also. Finally, end this assign tag with % percent symbol and } right curly bracket.
We’ll talk more about the assign tag many more times throughout our program, so don’t worry if this is still new to you!
#3: Filters
Third, we have filters. Filters cannot stand alone in Liquid and must always be tied to a variable. We take a variable, and we put it through some filter which then outputs a modified version of that variable.
For example, did you notice that my first_name, allan, was spelled with a lowercase? When sending an email to a customer, we might want to make sure that their name is capitalized, even if their name is lowercased in our internal database.
Liquid filters allow me to take that variable and put it through a filter so that the first name value gets capitalized. The specific filter we would use is called “capitalize”, and here’s how we use it.
To use a filter, we put a pipeline character | after our variable name, before the closing brackets. For example, “Hello {{ first_name | capitalize }}.
Here, we are using the “capitalize” filter to make sure that our variable is being rendered with the first letter capitalized, even if the variable value itself does not have the first letter capitalized.
Syntax
By the way, all the symbols that we use for coding are called syntax. So curly brackets {{ }} is the syntax for variables, pipeline character | is the syntax for filters, and curly bracket percent symbol {% %} is the syntax for tags or functions.
Filters: Parameters
Before we wrap up today’s video, let’s talk about one more aspect of Filters, which is parameters.
The capitalize filter we used was a simple filter; you simply add the filter, and it capitalized our variable.
However, there are some filters that require us to add additional information into the filter, and we call those parameters. Parameters help the filters decide how to change the variable.
So for example, if we take a look at this append filter which “adds the specified string to the end of another string”, you’ll notice that in addition to the pipeline character and the word “append”, there’s also a colon and another value in between quotes, “.html” in this example.
That “.html” is the parameter for this situation. We’re telling the Liquid filter “append” what to add to our variable. In this case, our variable is “/my/fancy/url”, and the parameter we included with the append filter is “.html”. So this filter will add “.html” to the end of our variable “/my/fancy/url”.
Thank You!
We’re not going to go over every single one of these filters in our Youtube series, but when you have a moment, definitely take a look at these filters, one by one! There are some very cool filters that can really boost your Marketing Personalization to the next level.
Thank you for watching, and see you next time!
allan@fornowmarketing.com
fornowmarketing.com
