# Liquid Email

Liquid is an open-source template language designed to help you build dynamic, data-driven content, making it perfect for personalized and interactive emails. With Liquid, you can embed variables and conditionals directly into your HTML. This allows you to create highly customized emails that cater to individual recipients, leading to more engaging and effective campaigns.

How Does It Work?

* **Variables**: Placeholders in the HTML that get replaced with actual data when the email is generated.
* **Conditionals**: Control the content display based on specific criteria, making the email content adaptable to different scenarios.

{% hint style="info" %}
**Note**: You can utilize the full range of Smartico dynamic tags including <mark style="color:orange;">`label`</mark>, <mark style="color:orange;">`state`</mark>, <mark style="color:orange;">`campaign`</mark>, and <mark style="color:orange;">`event`</mark> tags to customize and personalize your email templates with Liquid.
{% endhint %}

To better understand the capabilities of Liquid lets follow a couple of examples.

## **Use of fallback**

When greeting users, it's important to display their names. However, if some users haven't set up their names, you can use their username (or specific prefix like Mr, player, friend, etc.) as a fallback.

```liquid
Hello, {{ state.user_first_name | default: state.core_username }}!
```

<mark style="color:blue;">**Set up name Result:**</mark> <mark style="color:blue;">Hello, Christopher!</mark>\ <mark style="color:blue;">**Not setup Result:**</mark> <mark style="color:blue;">Hello, christopher90!</mark>

## **Use of conditions & variables**

Using conditions and variables in Liquid allows you to display personalized user information, significantly boosting user retention and giving the user a sense of exclusivity and personal attention.

For example, below, we are dynamically displaying the day of the week the email is sent, showing information of the last deposit, current balance amount, and showing countdown for promotion. At the same time, all that info is personalized for each recipient.

<pre class="language-liquid" data-overflow="wrap"><code class="lang-liquid">







<strong>Happy {{ 'now' | date: "%A" }}! We miss you! You haven't done a deposit for
</strong> {{ days_since_deposit }} days

 more than a week

 more than a month



and your balance is



really low at {{state.acc_real_balance | plus: 0}}.



{{state.acc_real_balance | plus: 0}}.

.
We have an exciting offer for you! If you deposit in the next {{'now' | date: "%H" | minus: 24 | abs}} hours and {{'now' | date: "%M" | minus: 59 | abs}} minutes , we will accumulate an additional 50% bonus to your deposited amount.
</code></pre>

<mark style="color:blue;">**Example Result:**</mark>\ <mark style="color:blue;">Happy Friday! We miss you! You haven't made a deposit for 5 days, and your balance is really low at 3$.</mark>\
\ <mark style="color:blue;">We have an exciting offer for you! If you deposit in the next 20 hours and 50 minutes , we will accumulate an additional 50% bonus to your deposited amount.</mark>

<mark style="color:blue;">**Example Result 2:**</mark>\ <mark style="color:blue;">Happy Saturday! We miss you! You haven't made a deposit for more than a month and your balance is at 20$.</mark>\
\ <mark style="color:blue;">We have an exciting offer for you! If you deposit in the next 23 hours and 04 minutes , we will accumulate an additional 50% bonus to your deposited amount.</mark>

## **Set a specific timezone**

Simply adjust the time to a specific timezone used by the email recipient so they don’t get confused by the system time, which is in UTC time.\
\
Here is a more detailed explanation:\ <mark style="color:purple;">`"now" | date: "%s"`</mark> - gives us the current time of the Smartico system in UTC timezone.

<mark style="color:purple;">`current_time | plus: 7200`</mark> - is where we set the offset by seconds; plus/minus are used to determine if you want to offset ahead/behind, 7200 seconds = 2 hours

<mark style="color:purple;">`{% assign %}`</mark> is used to create and store a value in a variable which you can manipulate or in this instance, use for calculation

<mark style="color:purple;">`{{ adjusted_time | date: "%Y-%m-%d %H:%M" }}`</mark> - is what we print to the user, and we define the format <mark style="color:purple;">`%Y-%m-%d %H:%M`</mark> (year, month, date, hour, minute)

<mark style="background-color:yellow;">Warning: beware that the values are case sensitive, for instance %M shows minutes and %m shows month</mark>

{% code overflow="wrap" %}

```liquid
{% assign current_time = "now" | date: "%s" %}
{% assign adjusted_time = current_time | plus: 7200 %}
{{ adjusted_time | date: "%Y-%m-%d %H:%M" }}
```

{% endcode %}

<mark style="color:blue;">**Result:**</mark>

<mark style="color:blue;">2025-10-27 11:00</mark> \*(when your current time is 2025-10-27 09:00)

## **Format Date/Time**

You can format a date in Liquid using the `date` filter.

The general syntax is

`{{ date_variable | date: "format_string" }}`

Here are some common format specifiers:

| **Specifier** | **Description**                       | **Example Output (for Jan 02, 2025 at 3:04 PM)** |
| ------------- | ------------------------------------- | ------------------------------------------------ |
| `%a`          | Abbreviated weekday name              | Thu                                              |
| `%A`          | Full weekday name                     | Thursday                                         |
| `%b`          | Abbreviated month name                | Jan                                              |
| `%B`          | Full month name                       | January                                          |
| `%d`          | Day of the month, zero-padded (01-31) | 02                                               |
| `%e`          | Day of the month, space-padded (1-31) | 2                                                |
| `%m`          | Month as a decimal number (01-12)     | 01                                               |
| `%y`          | Year, last two digits (00-99)         | 25                                               |
| `%Y`          | Year with century                     | 2025                                             |
| `%H`          | Hour in 24h format (00-23)            | 15                                               |
| `%I`          | Hour in 12h format (01-12)            | 03                                               |
| `%M`          | Minute (00-59)                        | 04                                               |
| `%S`          | Second (00-59)                        | 39                                               |
| `%p`          | AM or PM (uppercase)                  | PM                                               |
| `%P`          | am or pm (lowercase)                  | pm                                               |
| `%c`          | Date and time representation          | Thu Jan 02 15:04:39 2025                         |
| `%D`          | Short MM/DD/YY date                   | 01/02/25                                         |

Example

```
Last updated: {{ "now" | date: "%Y-%m-%d %H:%M:%S" }}
```

## **Set a specific translation**

If we want to use dynamic tags like day/month but the recipients are from different countries and speak different languages we can assign specific translations:

{% code overflow="wrap" %}

```liquid
{% assign days = {
  "FR": {"Monday": "Lundi", "Tuesday": "Mardi", "Wednesday": "Mercredi", "Thursday": "Jeudi", "Friday": "Vendredi", "Saturday": "Samedi", "Sunday": "Dimanche"},
  "ES": {"Monday": "Lunes", "Tuesday": "Martes", "Wednesday": "Miércoles", "Thursday": "Jueves", "Friday": "Viernes", "Saturday": "Sábado", "Sunday": "Domingo"}
} %}
{% assign current_day = "now" | date: "%A" %}
{% assign user_language = state.core_user_language %}
{% if days[user_language] %}
  {% assign translated_day = days[user_language][current_day] %}
{% else %}
  {% assign translated_day = current_day %}
{% endif %}
{{ translated_day }}!
```

{% endcode %}

<mark style="color:blue;">**Spanish user result for Friday:**</mark> <mark style="color:blue;">Viernes</mark>\ <mark style="color:blue;">**French user result for Friday:**</mark> <mark style="color:blue;">Vendredi</mark>

## **Reminders for missions, jackpots etc.**

Boost user engagement by sending email reminders to users when they have progressed in missions but haven’t finished them yet to remind them and trigger user activation. Give users a nudge on the rising Jackpot and motivate them to play more.

**Jackpot amount:**

{% code overflow="wrap" %}

```liquid
{{ state.user_first_name }}, our Amazing Jackpot has reached an astonishing {{state.jackpot_amount}}. Hurry up and play for a chance to win it!
```

{% endcode %}

<mark style="color:blue;">**Result:**</mark> <mark style="color:blue;">Christopher, our Amazing Jackpot has reached an astonishing 67000$. Hurry up and play for a chance to win it!</mark>

**Missions in progress:**

{% code overflow="wrap" %}

```liquid
{{ state.user_first_name }}, do you know that your {{event.meta.image_url}} {{event.meta.name}} mission is still in progress? Finish it and you will get {{event.meta.reward}}!
```

{% endcode %}

<mark style="color:blue;">**Result:**</mark> <mark style="color:blue;">Christopher, do you know that your “Play 5 Mini-Games” mission is still in progress? Finish it and you will get 10 Free Spins!</mark>

## **URL Encoding and Decoding**

URLs can be encoded and decoded directly within your email template using \`url\_encode\` and \`url\_decode\`.

{% code overflow="wrap" %}

```liquid
{{ "example.com/questions/what-is-the-question?#Answer#1" | url_encode }}
```

{% endcode %}

<mark style="color:blue;">**Result:**</mark> [<mark style="color:blue;">https://example.com/questions%3Fwhat-is-the-question%23Answer%231</mark>](https://example.com/questions%3Fwhat-is-the-question%23Answer%231)

\
Many more...
------------

Check all Liquid supported filters and commands below:

{% embed url="<https://shopify.github.io/liquid/>" fullWidth="false" %}