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.

Liquid variables supported for all email templates

You can use the following variables to customize any of your Shopify email messages with Liquid.

Description of Shopify Email supported Liquid variables
VariableDescription
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.
    • address displays the shop address, which gives access to the following address properties:
      • address1
      • address2
      • city
      • country
      • phone
      • province
      • zip
      • branding displays the shop branding, which gives access to 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.

    Liquid variables supported for abandoned checkout emails

    You can use the following variables to customize your abandoned checkout Shopify email messages with Liquid.

    The abandoned_checkout variable populates only if an email is part of an abandoned checkout marketing automation. Otherwise, the variable is null.

    Description of Shopify Email supported Liquid variables for abandoned browse, cart, and checkout
    VariableDescription
    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.
    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_price | money }}

    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: /products/great-product?ref=my-tracking-token

    landing_site_ref

    Extracts a reference parameter from the landing site. Reference parameters can be: ref, source, r.

    If the landing_site is /products/great-product?ref=my-tracking-token, then the landing_site_ref is my-tracking-token. You can perform a certain action if your reference parameter is equal to a certain value:

    {% 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: https://www.google.com/?s=great+products

    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
    true
    or
    false
    depending 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
    true
    if there's at least one item in the checkout that requires shipping.
    subtotal_price
    The subtotal price of the line items at checkout.
    email
    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: {{ attributes.gift-note }}

    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
    true
    if the checkout doesn't require shipping, or if the price for shipping is zero.
    different_billing_address
    Returns
    true
    or
    false
    based 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.

    Description of Shopify Email supported Liquid variables
    VariableDescription
    abandoned_visit.*

    This variable gives access to the following properties of an abandoned cart or browse:

    • url displays the URL of the abandoned cart or browse.
    • 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
      • image_alt_text
    • remaining_cart_products_count displays the remaining line items count, if there are more than five line items in the abandoned checkout.

    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>
    Ready to start selling with Shopify?Try it free