[Tutorial] How To Code An Abandoned Cart Email With MJML & Templating Language

Gabriela Gavrailova

// Product Marketing Associate for Devs

You know how many customers are leaving some items in their carts without processing to the actual purchase? We’re here to make sure you’re ready to give your customers that extra nudge and remind them about those items they once left behind in their carts. Even better you are going to make them even happier, by telling them that those items are on sale. 😏

If you’re a thorough follower of our tutorials, you may already know that, we’re showing you how to create and send awesome transactional emails step by step. We’ve already showed you how to create welcome email and email receipt using template language and MJML. Now, you’ll learn how to create abandoned cart emails.

A templating language for your transactional emails

Are you tired of creating a separate template for all your needs? Template language is here to offer you the best solution! You’ll be able to create one template for all your purposes using our template language.

Template language is available in different languages and using multiple libraries, so you are probably familiar with at least one of them. It’ll be a piece of cake! 😉

Mailjet’s Templating Language

At Mailjet, we know the value of a fully integrated templating language, which is why we created our own templating language with our Transactional Send API in mind. We’re here to help you manage everything in one template, to save you time and effort.

So, let’s recap: MJML for producing responsive HTML emails without effort, plus a templating language to bring them to life with conditional blocks and variables.
This combo can change your life as a developer. But, enough words, you’ll definitely want some action. That’s why we’ve decided to show you how to create and send awesome transactional emails, step by step.

The “How to code” tutorial: what you need to know

We’re rolling out a series of tutorials, all of which will explore a very common use-case, providing numerous examples, code snippets and nice visuals. We’ve even created an easy-to-execute tool, written with NodeJS, to test emails under actual conditions. To use it, you’ll just need valid credentials for both MJML API and Mailjet Transactional Send API, but don’t worry if you’re a newcomer: applying for the MJML API beta and creating a Mailjet account are totally free.

Our “How To Code” series has four parts. Check them out now:

How to code an abandoned cart: Quick Introduction

Today, we’re going to see how to implement an efficient abandoned cart email using MJML, the open-source email framework with 7600+ stars on Github open-source email framework, and our templatе language. Here’s a quick preview:

When a customer adds products to their cart but doesn’t check out, it doesn’t mean the sale is definitively over. Here are some numbers for you: 50% of abandoned cart emails are opened, and more than a third of them trigger clicks to redirect customers to the website. And these figures could be even higher during a sale, when you’ll have the chance to offer your customers that additional tempting discount.

This high rate can be easily explained: customers often abandon their carts without meaning to do so, be it because of website crashes or times out (sure, that never happens to yours), or simply because they needed some time to think. This is why an abandoned cart email can be a successful way to re-engage customers, guide them through to the last step in your buying process or allow them to recover lost purchases.

A proper abandoned cart email should include the following:

The items left in the cart.
An incentive, such as a discount or a special deal, personalized for your user.
Some new articles your user may prefer.

Let’s focus on these points.

How to create an abandoned cart email

You should encourage your clients to resume their shopping experience, just where they left it. This implies that your email template should display the abandoned cart, just as it looks on your website, both in terms of design and in terms of the items left behind. Easy to say when you’re using the [name here any trendy JS framework], but how do you do this in an email? The solution: use our templating language loops and variables directly into your email to display a cart based on raw JSON data.

Coding the abandoned cart section

Let’s start from the top of the template. We are going to use mj-navbar as container. We’ll choose this container as it is better suited for our needs and it’s already formed by two mj-column. The first one will contain mj-image and the other one the mj-inline-links component, which will create your links based on a list of mj-link children.

Of course we are going to add some CSS code to make our template prettier and here’s what we have:

Coding the body of the template

Now, let’s see how to code the main body of the template. As a general rule, it is recommended to keep it as close as possible to your cart’s main design on the website. Here’s our code:

As you can see, we’re using two nested mj-section. We’ll do this because the MJML API we’re using for this tutorial does not support the component yet.

Defining the items in the cart

Next, we’re going to configure everything related to the items in the cart. To do so, we are going to set up this loop {% for single_element in array_variable %}, using the following pattern: {{ var:property_key:default_value }}. Within the loop, a new variable single_element is created and updated for each iteration, ready to be used.
Here’s the MJML code for the display:

If you want to know how to set up your API call, visit our documentation here.

Coding the section with the additional discount

We are almost done! Now we need to let our customers know the good news! There are sales, oh surprise, the items that they left behind are now with discount! Who doesn’t love discounts? Probably some customers abandon their carts because they initially thought your products were cheaper. Hold on… Where did all these taxes and shipping fees come from? Well now, with the discount on the items, the customers won’t even notice those additional costs.
Here again, we’ll use a mj-table to display two sub-columns:

To win these customers back, the best way is to issue a discount or offer them free shipping, in the form of a deal that looks as if it was directly branded for them. To do this, add blocks to your template that only show up under specific conditions. In this tutorial, conditional blocks come to the rescue.

How to code section with other suggestion

Abandoned cart emails can provide a nice opportunity to present other products. You surely have a nice algorithm for recommendations – use it to generate some JSON data and, with our templating language, display nice personalized blocks directly in your email.

How to code CTA button

This is the easiest part. 😉 To add the CTA button, just use the code below for the mj-button:

Time to jump on Github

OK, we’ve given you an overview and some code examples to create an amazing abandoned cart email. Now it’s time to create your own with your own design.
You’ll find everything you need on our detailed tutorial on Github, complete with examples and code samples.

Have you missed the previous tutorials? Check them out here:

How to create an e-commerce receipt email

How to send a welcome series email

We’ve also created an easy-to-execute tool, written with NodeJS, to test emails under actual conditions. To use it, you’ll just need valid credentials for both the MJML API and Mailjet’s Transactional Send API. Don’t worry if you’re a newcomer: applying to the MJML API beta and creating a Mailjet account are totally free.

Do you want to be informed about the next tutorials? Come and say “hi” on Twitter or join us for a chat on Facebook