Adding a Shopify Email custom Liquid section

Adding a custom Liquid section lets you input custom Liquid or HTML into your Shopify Email messages.

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 the custom Liquid section 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 into your Shopify Email messages.

  • The variables that you include in your code need to be supported by the custom Liquid section.
  • The code that you enter can't exceed 50 KB in size.
  • You can only use a desktop device to create a custom Liquid section.

Liquid variables supported in the custom Liquid section

You can use the following variables to customize your Shopify email messages in the custom Liquid section.

Description of Shopify Email supported Liquid variables
Variable Description
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:
    • 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.

    Example of custom Liquid code

    After you add a custom Liquid section to your email template, 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>
      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#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>

    Ready to start selling with Shopify?

    Try it free