Tags
What’s a tag?
You’ve got your personalized salutation down pat, so now it’s time to write the first sentence of our body copy—and make that personal as well. To do that, let’s talk tags (the Liquid kind, not the dog kind).
We’ll start with a quick review. You know that a key is a container for a value, like a customer’s name. And you know that you can use filters to manipulate keys’ values, like capitalizing a customer’s name. Now we can bring in the third player on the Liquid dream team: tags.
Tags use programming logic to decide which dynamic content is displayed in your email. There are lots of handy tags you can use, like the if tag to display content if certain conditions are met and the assign tag to create a key right inside your code. (We’ll explore many in depth in the Intermediate Tags module).
One handy tag is the else/elsif tag, which will allow us to use conditional logic to choose the perfect beginning for our body copy. Let’s it put into action to get a sense of how tags work with keys.
At Tip Top Pets, you sell products for both cats and dogs. When you send an email, you want to say one thing if your customer owns a dog, but something different if they own a cat. And if you don’t know what kind of pet they have, you need a third option that covers all your bases (who knows, maybe they bought that leash for an unruly sea urchin!).
So you come up with three sentences, one for each possible scenario. In this case, Spot is a dog, so we’re going to start the body copy with: “Ruff ruff! We’ve received your order!” We know Spot is a dog because “dog” is the value of the pet.pet_type key.
Let’s see how the key and the tag work together to dynamically select the right content:
{% if pet.pet_type == "dog" %}
Ruff ruff! We’ve received your order!
{% elsif pet.pet_type == "cat" %}
Meow! We’ve received your order!
{% else %}
Hooray! We’ve received your order!
{% endif %}Ruff ruff! We’ve received your order!The tag will choose the correct text for a cat or a dog, or generic text if pet.pet_type has a value other than cat or dog.
Practice problem
Ready to write some code? Use the if/elsif tag to add a personalized message based on Spot’s age category. For seniors, it should say “Senior pets need tender care.” For puppies, it should say “Puppies need a strong start.” For everyone else, it should say “Your pet deserves the best.”
Select the correct Liquid code from the options below:
That’s not right; try again!
Option A is correct!
Let’s run the code:
{% if pet.pet_age == "senior" %}
Senior pets need tender care.
{% elsif pet.pet_age == "puppy" %}
Puppies need a strong start.
{% else %}
Your pet deserves the best.
{% endif %}Senior pets need tender care.Teamwork makes the dreamwork, so let’s look at how to use tag notation to make it play nice with keys and tags!
Tag notation
In Liquid, tags are surrounded by single curly brackets and percentage signs, like this:
{% tag %}Unlike keys, tags do not display a value to the email recipient. Instead, they provide the logic that determines what is displayed. In general, tags use true-or-false (aka, Boolean) logic to determine the output to display: telling Liquid that if a certain condition is true, display a certain output, and if the condition is false, move on.
Tags sometimes contain logical and comparison operators (like == in the previous section). These operators are how the tag chooses what to display. We’ll cover operators in more detail later, but here’s a quick overview of the basic operators.
| == | equals |
| != | does not equal |
| > | greater than |
| < | less than |
| >= | greater than or equal to |
| <= | less than or equal to |
| or | logical or |
| and | logical and |
There’s much more to learn about Liquid, but now you have a basic understanding of how keys, filters, and tags work together to add personalized, dynamic content to your static email templates.