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.
On this page
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.
Variable | Description |
---|---|
abandoned_checkout |
This variable gives access to the following properties of an abandoned checkout:
The |
abandoned_visit |
This variable gives access to the following properties of an abandoned cart or browse:
The |
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.
|
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>