If you’re a thorough follower of our tutorials, you may already know that, till the end of April, we’re showing you how to create and send awesome transactional emails step by step.

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

abandoned cart preview

Sending an abandoned cart email, a quick introduction

When a customer adds products to their cart but fails to check out, it doesn’t mean the sale is definitively over. Indeed, sending an email is a remarkably effective tactic to reduce your churn rate. 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.

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 the buying process was overcomplicated. 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:

  1. the items left in the cart;
  2. an incentive, such as a discount or a special deal, personalised for your user;
  3. some new articles your user may prefer.

Let’s focus on these points.

Your user has abandoned its cart items. Clearly, this means they don’t want them anymore?

Well, not necessarily. You see, humans are complicated. They may have reconsidered their decision to buy first but, eventually decide that they do want to purchase after all.

You should enable them 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.

Oh, that didn’t seem that expensive!

Some customers abandon their carts because they initially thought your products were cheaper. What is it with all these taxes and shipping costs you’re adding to the final bill?
To win back these customers, 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.

Now that I’ve got your attention, may I present you this other very cool product?

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.

Time to jump on Github

OK, enough theory. Now it’s time to write an awesome abandoned cart template yourself.

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? Subscribe to our dev-only newsletter or come and say “hi” on Twitter and join us for a chat.