Adding custom Liquid to Shopify Email campaigns

You can add custom coding to your Shopify Email messages by adding a custom Liquid section or by creating an entirely custom-coded email. These options let you input custom Liquid or HTML.

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 display custom assets such as side-by-side images, custom buttons, custom sized images, and custom section sizes.

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 the open_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.

Description of Shopify Email supported Liquid variables
Variable	Description
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.
abandoned_checkout	This variable gives access to the following properties of an abandoned checkout: `url` displays the URL of the abandoned checkout. `line_items` displays the first five line items of the abandoned checkout. Additionally, each `line_items` object contains the following properties about each product: `image_url` `product_title` `variant_title` `quantity` `remaining_products_count` displays the remaining line items count, if there are more than five line items in the abandoned checkout. The `abandoned_checkout` variable populates only if an email is part of an abandoned checkout marketing automation. Otherwise, the variable will be `null`.
abandoned_visit	This variable gives access to the following properties of an abandoned cart or browse: `url` displays the URL of the abandoned checkout. `products_added_to_cart` displays the first five product line items added to the cart of the abandoned visit. Additionally, each `products_added_to_cart` object contains the following properties about each product: `title` `image_url` `variant_title` `quantity` `products_viewed` displays the first five products viewed during the abandoned visit. Additionally, each `products_viewed` object contains the following properties about each product: `title` `description` `image_url` `url` `remaining_cart_products_count` displays the remaining line items count, if there are more than five line items in the abandoned checkout. The `abandoned_visit` variable populates only if an email is part of an abandoned cart or abandoned product browse marketing automation. Otherwise, the variable will be `null`.
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. `address` displays the shop address, which exposes the following address properties: `address1` `address2` `city` `country` `phone` `province` `zip` `branding` displays the shop branding, which includes the following properties: `accent_section_color` `background_primary_color` `background_border_color` `body_text_color` `button_background_and_link_color` `button_label_color` `footer_link_color` `footer_text_color` `footer_background_color` `social_link_facebook` `social_link_twitter` `social_link_instagram` `social_link_pinterest` `shop_name` `logo`, which is rendered as an `img` tag directly.

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>