Adding a Shopify Email custom Liquid section

Grow your business

If you need help with creating custom code for your Shopify Email messages, then you can hire a Shopify Expert.

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>