How to Customize Shopify Email Notifications for Clients

How to Customize Shopify Email Notifications for Clients
shopify email notifications

Customizing emails is a frequent request from clients who are looking to optimize their communications with customers, and can be one of the easiest methods to personalize a Shopify store. Carefully designed emails are a powerful tool for communication, enabling clients to add a personal touch at different points of the purchase journey.

Emails are sent automatically following an order, and to update customers on shipping, abandoned checkouts, and customer accounts, so there’s a lot of scope for improving these experiences. By upselling a client on bespoke emails, you can add extra value to your project, in addition to developing custom themes.

In this article, we’ll look at some practical ways you can add additional functionality to Shopify’s email notifications, and grow your Liquid expertize.

You might also like: How Smart Design Patterns can Improve Store Conversions.

Why customize email notifications for clients?

As online businesses become increasingly engaged across various channels, customers have come to expect a seamless experience at every touchpoint. Email can often be overlooked in favor of more immediate UX — but considering that every customer will receive email notifications, it’s critical that email communicates effectively and appropriately.

Personalized emails allow your clients to maintain a look and feel that’s consistent with the rest of their brand. By embedding on-brand images, and rewording text to conform with a brand’s tone, your client can stay close to their audience.

It’s also possible to amplify the value of your clients products by adding extra content to these notifications. Some products may have instructions that can be included as text within these emails, while others could link to a video.

Being strategic of how abandoned checkout emails are sent can also open up a range of marketing opportunities. By applying a discount code to the abandoned checkout email, your clients can leverage this chance to boost conversions, since the discount would be an incentive to complete a sale.

Customizing email notifications

Shopify sends notifications to customers when different actions take place, and there are 16 notifications that customers can receive, including order confirmation and abandoned checkout.

Each one of these notification templates can be customized to include your own HTML and CSS, which means there’s a lot of room to showcase your client’s brand. It’s important to carefully consider what kinds of customizations would suit each particular client.

There’s a range of email-specific Liquid variables that can be used for many different purposes. Whether you are looking to output customer info or product features, we’re sure you’ll find something that can improve email notifications for your clients.

With this in mind, here are two customizations that can add advanced functionality to email notifications.

1. Adding conditional content using Liquid operators

It’s possible to display specific content for individual products on an email, using conditional Liquid operators. With if statements you can add text, or images, that will appear when a product fulfills criteria that you set up.

As well as Liquid operators, you will also use the line item object, which allows you to reference particular properties of a product that’s in a customer’s shopping cart. Each line item represents a single line in the customer’s shopping cart, and you can see all the different variables in our Liquid documentation. Line items can be used in email notifications to isolate individual properties of a product.

For example, your client could have a set of products that have a unique set of instructions — maybe it’s a downloadable product and there are steps to follow. In this case, you could add conditional Liquid if statements that would output these instructions, if a product contained a specific word in its title.

The code for this would consist of an if statement using contains to check for the presence of a specific word, in this example “Book”, within the product title:

{% if line.title contains 'Book' %}
<p>These are the instructions for the Book</p>
{% endif %}

The location of where this message appears would be up to you, but a common placement could be below the title of the product. In that case, you could add the code within the cell that contains the line.variant.title line item, and above the closing </td> tag. This could look like the below image:

shopify email notifications: additional content

Now when a customer orders a product with Book in the title, they would see the specific message on their order notification email, below the product title. To the customer, the email would appear like this:

shopify email notifications: test

This is a simple yet powerful way to display product-specific content within emails, and could potentially save clients from customer frustration if products require installation or other post-purchase actions. Even if clients simply want to send a friendly message for certain products, it’s a perfect way to introduce creativity into email notifications.

2. Applying discount codes on abandoned checkout emails

According to the Baymard Institute, 69 percent of online shopping carts are abandoned before the customer completes a sale, which represents a huge loss of potential sales. Recovering abandoned carts can be a huge challenge for clients, so if you can improve results in this area, you’ll add a lot of value to your projects.

Generally, abandoned checkout emails are sent a few hours after the potential customer “bounced” away, so if they receive an encouraging email with a discount code, they could be motivated to complete the sale. Thankfully, it’s possible to apply an automatic discount to an abandoned checkout recovery email to incentivize these would-be customers.

To achieve this effect, you would first need to create a percentage discount code or a monetary discount code, depending on the type of promotion your client would like to offer. Once this discount has been created, make a note of the name assigned to the discount code, for example “WelcomeBack”. This name will be needed when you are customizing the notification template.

Next, on the abandoned checkout notification template you’ll need to change the destination of the “Complete your purchase” call-to-action button. Usually when a customer clicks to complete their purchase, they’re directed to the checkout, and their previously chosen products are pre-loaded. We can follow this same process, but apply the discount we created, by changing the default URL to a URL containing the discount.

You’ll need to find the line that includes:

<td class="button__cell"><a href= "{{ url }}" class="button__text">Complete your purchase</a></td>

And the line that includes {{ shop.url }}:

shopify email notifications: shopify url

The URL variables here will need to be replaced with a code snippet that appends the URL so that it includes the discount. This snippet of code would look like this:

{% if url contains '?' %}
{{ url | append: '&discount=WelcomeBack' }}
{% else %}
{{ url | append: '?&discount=WelcomeBack' }}
{% endif %}

Once you’ve replaced {{ shop.url }} and {{ url }} with the above snippet, your email notification should appear like this:

Finally, you can add some text to the abandoned checkout email template informing the customer that there’s a discount applied. This could look something like this:

Now when a customer clicks on the call-to-action button on the email, they’ll be directed to the checkout of your client’s store, with their pre-loaded products and a discount applied. Exactly the kind of sweetener that will drive conversions for your clients!

You Might Also Like: How to Conduct Research That Drives A/B Testing.

Make sure you test!

Regardless of your design, you’ll have to test each email to ensure the output looks right, from a customers perspective. As developers, we should always be thinking about how the end product will look and feel to the client’s customers. On the notification settings page there are two options for testing, by previewing and by sending a test email.

The preview function is very helpful if you are making quick edits, but it’s advised that a test email should be sent once you’re finished working on a template. Better still is to go through the actual process with a test order, to look out for any possible pain points you could have missed.

Have you experimented with customized email notifications and added new functionality to emails? We’d love to hear from you in the comments below!

About the Author

Liam is a Partner Education and Front End Developer Advocate at Shopify. He's passionate about promoting community engagement and developing learner resources. Whenever he’s not reading about code you can catch Liam making friends with cats and collecting records.

Grow your business with the Shopify Partner Program

Learn more