Customize your Shopify Email campaigns using Liquid
Liquid is Shopify's simple, easy-to-use programming language, and is the same programming language that themes from the Shopify Theme Store are built with.
You can use custom Liquid to enhance your Shopify Email messages by creating an entirely custom-coded email or by adding a custom Liquid section to a template. These options let you input custom Liquid or HTML.
You can use custom Liquid to display custom assets such as side-by-side images, custom buttons, custom sized images, and custom section sizes.
On this page
Considerations
Review the following considerations before you start adding custom Liquid to your Shopify Email messages:
- The variables that you include in your code need to be supported by custom Liquid.
- You can only use a desktop device to create a custom Liquid section.
- The
unsubscribe_link
variable is required in custom Liquid emails. If you've activated open tracking, then theopen_tracking
variable is also required. Learn more about adding required variables to your email. - The code that you enter has the following limits:
- Maximum 50 kilobytes (KB) for custom Liquid sections.
- Maximum 500 KB for custom-coded Liquid emails.
Liquid variables supported in custom Liquid
You can use the following variables to customize your Shopify email messages with Liquid.
Liquid variables supported for all email templates
You can use the following variables to customize any of your Shopify email messages with Liquid.
Variable | Description |
---|---|
all_products | All of the products on your store. |
unsubscribe_link | This variable gives access to the unsubscribe link. This variable is required if you create a custom-coded email. |
open_tracking | This variable gives access to the pre-formatted open tracking block. This variable is required if you create a custom-coded email and have activated open tracking. |
data.customer.* |
This variable gives access to the following customer data properties: first_name last_name email city state country These properties can't be used inside Liquid filters, or Liquid conditions. |
email.* |
This variable gives access to the following email properties: subject displays the subject line of the email.preview_text displays the preview text of the email. |
shop.* | This variable gives access to the following shop properties:
name displays the shop name.domain displays the shop primary domain.url displays the shop URL.shopify_domain displays the shop Shopify domain.
|
Liquid variables supported for abandoned checkout emails
You can use the following variables to customize your abandoned checkout Shopify email messages with Liquid.
Variable | Description |
---|---|
abandoned_checkout.* |
This variable gives access to the following properties of an abandoned checkout:
|
id(checkout ID) | A unique ID of the checkout for internal use. |
shop | Your Shopify store name. |
name | The name of the abandoned checkout, also known as the checkout number. |
total_price | The total price of the order (subtotal + shipping cost - shipping discount + tax). |
shipping_price |
The shipping price. Example: |
shipping_address | The shipping address. |
billing_address | The billing address. |
line_items | A list of all line items in the abandoned checkout. |
unavailable_line_items | A list of all line items in the abandoned checkout that aren't available. |
note | The note that's attached to the abandoned checkout. |
landing_site |
The path of the landing site that the customer used. This is the first page that the customer accessed when they reached the store. Example: |
landing_site_ref |
Extracts a reference parameter from the landing site. Reference parameters can be: If the {% if landing_site_ref == 'my-tracking-token' %} My action... {% endif %} |
referring_site |
The url of the referrer that brought the customer to your store. Example: |
created_at | The date and time the customer created the checkout that they abandoned. |
closed_at | The date and time when the checkout was closed. |
customer_locale | The two or three-letter language code for customer's locale, optionally followed by a region modifier. For example, en, en-CA |
item_count | A sum of all the items' quantities. |
unique_gateways | A list of unique payment providers available on the checkout. |
discount | The discount applied to the cart or a line item in the abandoned checkout. |
discounts | A list of discounts applied to the checkout. |
successfully_applied_discounts | The discounts that were successfully applied to the checkout. |
discounts_amount |
The dollar amount of the discount applied by all discounts. Example: +$5.00 |
discounts_savings |
The dollar amount of the savings caused by all discounts. Example: -$5.00 |
buyer_accepts_marketing | Returns trueor falsedepending on whether the customer accepted marketing during the abandoned checkout. |
subtotal_line_items | The line items that are used to calculate the subtotal price at checkout, excluding any tip line items. |
requires_shipping | Returns trueif there's at least one item in the checkout that requires shipping. |
subtotal_price | The subtotal price of the line items at checkout. |
The email associated with the abandoned checkout. | |
shop_name | The name of your store. |
tax_lines |
The taxes broken up by type of tax: {% for tax_line in tax_lines %} {{ tax_line.title }} ({{ tax_line.rate_percentage }}%) : {{ tax_line.price | money_with_currency }} {% endfor %} |
tax_price | The combined taxes of all the items in the checkout. |
attributes |
Any attributes that were attached to the abandoned checkout. Example: |
shipping_method | Information about the first shipping method available at checkout. |
shipping_methods | The shipping methods available at checkout. |
free | Returns true if the total price of the checkout is zero. |
free_shipping | Returns trueif the checkout doesn't require shipping, or if the price for shipping is zero. |
different_billing_address | Returns trueor falsebased on whether the shipping address is the same as the billing address. |
customer | The customer object containing the attributes of the customer output. |
gift_cards | The gift cards applied to the checkout. |
gift_cards_amount | The amount of the checkout price that would be paid for by gift cards. |
transactions | The transactions of the checkout. |
shareable_url | The URL of the first product in the line items. |
shareable_title | The product title of the first line item. |
total_tip | The total tip that the customer added at checkout. |
discount_applications | Describes why and how an item was discounted in the checkout. |
cart_level_discount_applications | The cart-specific discount applications for the cart. |
currency | The currency of the abandoned checkout. |
line_items_subtotal_price | The sum of the prices of all the line items of the checkout, after any line item discounts are applied. |
Liquid variables for abandoned browse and abandoned cart emails
The abandoned_visit.*
variable populates only if an email is part of an abandoned cart or abandoned product browse marketing automation. Review the following properties that this variable gives access to.
Variable | Description |
---|---|
abandoned_visit.* |
This variable gives access to the following properties of an abandoned cart or browse:
|
Using required variables
When you create a custom Liquid email, the variable unsubscribe_link
variable is required. If you've activated open tracking, then the open_tracking
variable is also required.
Although these variables can be inserted anywhere in the code for your email, the most common place to add them is in an email's footer section, such as in the following example:
<div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>
Example of custom Liquid code
You can add your custom Liquid or HTML in the code editor. The following code is an example of how you can add Liquid code to display your store name, a custom button, and a custom-sized image in an email message.
<style>
body {
text-align: center;
}
p#welcome {
margin: 0;
padding: 3rem;
color: white;
font-weight: 700;
font-size: 26px;
font-family: 'Futura';
}
div#image_wrapper img {
max-width: 70%;
border-radius: 60px;
box-shadow: -2px 6px 0px rgba(227, 111, 59, 0.7);
}
div#button_wrapper {
padding: 1rem;
}
div#button_wrapper a {
padding: 1rem 2rem;
border-radius: 24px;
display: inline-block;
background: linear-gradient(120deg, #F6A179, #865CFF);
box-shadow: -2px 4px 0px rgba(96, 54, 173, 0.9);
font-weight: 700;
font-size: 16px;
font-family: 'Futura';
color: white;
}
div#footer {
font-weight: 700;
font-size: 16px;
font-family: 'Futura';
padding: 2rem;
}
div#button_wrapper:hover a {
box-shadow: -4px 6px 0px rgba(96, 54, 173, 0.8);
}
div#custom_section {
background: linear-gradient(120deg, #FF9F73, #FFC7AD);
padding:0 0 2rem 0;
border-radius: 4rem;
}
</style>
<div id="custom_section">
<p id="welcome">
Hello from {{shop.name}}<strong></strong>!
</p>
<div id="image_wrapper">
<img src="https://burst.shopifycdn.com/photos/a-trio-of-natural-soaps.jpg" alt="" />
</div>
<div id="button_wrapper">
<a href="">Shop now</a>
</div>
<div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>
</div>