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