Lesson 3: Email Templates

Links:

Guide to Deliverability
Guide to Personalization Variables

Transcript:

Welcome to our Klaviyo for Shopify Course lesson on email templates. In this lesson, we’ll be covering the following:

  • The Value of a Good Template
  • How to Build an Effective Template
  • How to Update Your Shopify Store’s Notification Emails

The Value of a Good Template

As an agency, the first step after the initial setup is addressing a master email template for our client. There are a few reasons why we do this.

  • Consistency
  • Efficiency
  • Deliverability

Let’s talk about each of those.

Consistency & Efficiency

Well, let’s actually talk about consistency and efficiency together; they go together hand-in-hand. When utilizing a template as a starting point for all of your emails, you’re not only cutting down on the time you might need to spend in building each email from scratch, but you’re also maintaining all of your brand standards so that each touchpoint with your subscribers reinforces your branding and is immediately recognizable. I’ve seen brands that might change their logo from time to time, some may change their color scheme on a seasonal basis - it really can get rather confusing and put some people off. People are increasingly distrustful of online marketing and the more consistent you can be in how you engage with your subscribers, the more trust and ease you can bring to the dynamic which translates directly to fewer unsubscribes and spam complaints, higher click rates, and better deliverability. Which is a perfect segue into discussing deliverability.

Deliverability

In effective email marketing, I consider there to be three pillars: Deliverability, Openability, and Clickability. 

To give a holistic picture, let’s start at the end. You might have an amazing website, with incredible product, at an unbeatable offer, but no one is going make it to your site if they can’t find a link within your email or the offer isn’t clear and compelling. That’s Clickability. Directing your email recipient with a clear and engaging message that will compel them to click.

Now let’s take a step back. You may have devised the best looking and most compelling email in the history of digital marketing. Congratulations. But if no one opens that email, who cares? Having effective subject lines that grab the recipient’s attention without being click bait or a disappointment once they open the email, that’s Openability. 

Okay, now to bring it home: Deliverability. If that beautiful email of yours has the most clever subject lines, it won’t make a bit of difference if your emails are going to the spam folder or aren’t successfully delivered at all. It’s incredibly important to understand the basics of deliverability across the board to know how to structure your emails and how to build your strategy in line with best practices. Afterall, if you compromise your deliverability, everything else becomes a moot point.

So what can you do to ensure you are successfully delivering your emails to subscriber inboxes? Check out this link for Klaviyo’s help documentation which is a great guide to demystify Deliverability. However, as it pertains to this discussion on email templates, there are a few key factors to consider. 

  1. Don’t use image-only emails. Always use some text. Note that you can use image alt-text if you ever are using all imagery or if you have an image to graphically lay out text, use the alt image section.Otherwise, it can appear like spam to email inbox providers because phishers often use image-only emails. 
  2. Don’t include numerous links to domains not associated with your site. Links to external domains are often done by phishers, so this can also trigger spam filters.
  3. Don’t use 3rd-party URL shorteners (e.g., Bit.ly).
  4. Incorporate as much personalization as you can. Use variables to dynamically pull in a recipient’s name so emails look less like a mass send.

Building an Effective Template

With that all in mind, let’s see how to go about building an effective email template.

First, we need to make sure we have all of the relevant prep work in place. We need to be sure we have all of the brand standards.

  • Logo
  • Color Pallette
  • Fonts

The Email Builder

Klaviyo provides you with a few options for building your emails. You can use text-only, which in some instances might be a great option to have a very personal, intimate message directly from a brand founder to the customer. You also have the option to build your emails using HTML. This may be a good option if you’re migrating an email from another platform where you are able to export it as html. However, building an email in HTML is probably just going to make things needlessly hard on most people. Lastly, there’s the drag-and-drop email builder. This is far and away the quickest way to effectively build your emails. 

Let’s navigate to the Email Templates section. You can see there are some different options to get started. You have some pre-made templates you can use for starting points or inspiration. Or you can see some basic templates to build upon. You can really choose your own adventure. Let’s dive in and start building.

You simply drag and drop the different types of content blocks into your email. Within your Styles section, you can set some global styles. Within each content block, you also have the Block Styles section to refine the styles on that particular block.

Take some time to get acquainted with the different blocks and how the settings work. One content block that can be extremely useful is the Product Block. You can use this content block to display specific products in your email or you can create data feeds to pull collections of multiple products. Klaviyo’s data science team has had a hand in allowing you to have a lot of different controls over certain product recommendations and other unique settings to tailor the experience with products based on the recipient’s purchase history as well as popular products from other customers. Let’s navigate to the data feeds section within the account where you can see a new arrivals data feed and best sellers feed have already been set up. These are pulling directly from collections within the Shopify store.You can 

As you’re building, you’ll notice that when you hover over a content block that you can choose to duplicate content blocks or select the star to save them for later use within this template or other templates in the future.

It’s also worth noting how you can toggle to mobile view and simulate that viewing experience. One important Block Setting you will find is how to make some blocks visible on either desktop or mobile only. It can be a bit tricky at times, but allows you more control on the appearance for different device types.

Keys to an effective template

  • Be Clear & Concise
  • Always have a Call to Action
  • Ideally have only 1 Call to Action
  • Urgency
  • Personalization

There are a few key aspects to consider when building any email, so it’s wise to make sure you approach your email template with these in mind. 

Be clear and concise. Plain and simple, I see a lot of brands overthinking it. Sure, you want your emails to look great and be engaging, but they’re not a work of art to be hung on a wall and admired. They are messages that are meant to persuade your subscriber into taking a specific action. Don’t impede the flow of traffic. Let the form follow the function. So be wary of too much content and avoid anything that will cause an excessive amount of scrolling. Try to only incorporate a single topic or message within an email. If you see things venturing off topic, it might be better suited to be broken up in a separate email. 

Along those same lines, always make sure your emails have a call to action. Like I said, the email is serving a specific purpose, so make the action you want the user to take to be clear. 

Ideally, you only want to have a single call to action - keeping things simple and directed. Now, there may be instances where you do need additional calls to action. If there is more than a single call to action, have a primary call to action with secondary, less prominent calls to action.

It’s often recommended for the tone of your emails to convey a sense of urgency. Your emails become far more compelling when you appeal to the fear of missing out. Now don’t get too carried away and seem ingenuine, use your discretion to be effective.

Personalization is something we touched on moments ago in the very cursory discussion of deliverability. Including subscriber first names with a dynamic variable is something that has data supporting the effectiveness on user behavior. Incorporating dynamic personalization variables is an easy way to make your emails more unique and engaging and avoiding them from sounding sterile, prefabricated, and mass produced, all of which are things that tend to put subscribers off. You can find Klaviyo’s documentation on personalization variables in the link provided. 

As an agency, since we set up and carry this out over and over again, we have some of these variables saved in an app called Text Expander, which is designed to help increase productivity by saving snippets of information that can be inserted with keyboard shortcuts like a macro. That way, we only need to remember the shortcut and not the longer, complicated text. You might find it to be helpful to you in your business, so I thought it bears mentioning. There are some other apps similar to TextExpander such as AText, but be sure to check those out if that piques your interest. 

As you can see here, I’m able to simply type a shortcut and I have the variable for first name. A word of caution, however. When you utilize a first name variable, for instance, you’ll want to be sure you are collecting the data in your signup forms. Otherwise, it might not make any sense to even attempt that sort of personalization in your email. Also, always include a default to fall back on. This way, if you don’t have the user data, it will have a default instead of appearing blank.

Custom Fonts

You may want to try incorporating your brand’s custom fonts into emails. This can be a bit tricky since several inbox providers do not render them properly, causing them to fall back to a default web-safe font. Also, your custom font will not be available in the dropdown menu within the email builder, and custom fonts are not supported in several of the blocks such as button blocks, product blocks, and header/link blocks. However, it bears mentioning here if this is something you do want to try. The process may differ slightly depending on where the font is hosted whether they are Google Fonts, Adobe Fonts, or otherwise. In any case, you’ll add a bit of code within a text block in your template. Be sure to use the source toggle to enter html. Paste the code from Klaviyo’s documentation which we’ve linked. Then you’ll set the specific settings for the font, assigning as you wish to h1, h2, h3, etc., paragraph text, and so on. You’ll also want to set your web-safe default as a fallback. For all of the details, see the link for the help documentation from Klaviyo to guide you through the process. 

Dark Mode

So, I’ll begin by saying that Dark Mode is a complete wild card and can be the cause of a great deal of frustration. Since Dark Mode first emerged, the rate of adoption has been significant. Due to the multitude of apps and devices on which users receive emails, it is a bit of a misnomer to not pluralize it as Dark Modes as there isn’t any standard or consistent manner in which they all render your emails. The way iOS Dark Mode renders your emails on the Gmail app as opposed to Apple Mail is completely different, for instance. In fact, what the Gmail app does on iOS in Dark Mode should be prosecuted. Then you have Android phones, desktop operating systems, all of the different email clients, their apps, how they behave in browsers as opposed to their standalone apps, how they may open from social media apps like Instagram, and on and on. It’s a lot to consider. Needless to say, test your emails as best you can. That’s a rule that applies not only to Dark Mode. Make sure you test on different device types and email clients as much as you can. However, here are a few pointers for combatting the “ills” of Dark Mode:

  • Consider transparent backgrounds on images
  • Optimize your logo and social icons
  • Text is a good standby
  • Collect Preferences & Consider Different Versions

Due to the way some Dark Modes function, you might want to test transparent backgrounds on images, although sometimes this may work against you. Some Dark Modes will invert the background color and can wreak havoc on what you thought were your brand standards. Like I mentioned, test as many scenarios as possible.

Optimize your logo and social Icons. Also, if you have a dark logo, you may want to update it to have a stroke of white for instance on the outside to ensure it remains visible if colors do get inverted and you end up with a dark logo on a dark background. The same goes for social icons or other graphic elements you are including in your email.

Text is always much more predictable. Black text will invert to white and vice-versa. If you are looking for more predictability, it might be a good idea to rely more heavily on text if you’re overly concerned about how your images and colors might be rendered in Dark Mode.

Lastly, it’s a much heavier lift, but it is completely within the realm of possibility that you could collect subscriber preferences and optimize emails with different versions based on those preferences. It’s definitely a considerable amount of work, but can certainly be done.

Long story short, unfortunately, there is no magic bullet for optimizing emails in Dark Mode. You can’t please everybody all the time, and that certainly is the case here to all of the different scenarios. It either takes a lot of work or you can resign yourself to hoping users will abandon options that will make emails look bad. After all, chances are that if you are struggling to get your emails to look good in Dark Mode, you’re not alone. If I’m using an operating system and app that makes emails look bad, I’m probably more likely to switch my settings or switch the app, but I might be a bit biased.

Updating Shopify Notification Emails

Now let’s talk about your brand’s Notification Emails. These include transactional emails such as your Order Confirmation, Shipping Confirmation, and Order Refund emails, all of which come directly from Shopify, not your Klaviyo account. Having these emails adequately branded is an area I quite often see skipped over or missed from so many companies, and yet these are crucial communications from your brand directly to your customer. Often these are left as the Shopify default or have minor tweaks form within Shopify, however, even the modifications you can apply within Shopify are limited or difficult unless you are proficient in HTML. 

It bears mentioning that it is possible to send transactional emails from Klaviyo, but for these it really isn’t necessary. In any case, we’ll walk through how to update these Shopify Notification Emails to match the emails you’re sending from Klaviyo so you have consistent, elevated branding.

First, it’s really handy to use the Saved Blocks feature on your email template. Go through your email template and save the different elements that will apply to all of your emails, such as header and footer elements. Next, within the Email Templates section of your account, select the “Create Template” button and then choose Shopify Notification Templates. Now, one by one you can select them, name them accordingly, and choose to “create”. You’ve now populated the default, which contains all of the variables specific to Shopify, so content will dynamically populate correctly. Now carefully replace each block with your saved blocks in order to apply your correct styles. You may also need to update your global settings in the Styles section.

Once you have your Shopify Notification Template designed, you can export the template as html. You’ll want to do this step after you’ve upgraded to a paid plan in Klaviyo. Otherwise, you’ll have a Klaviyo watermark at the bottom of these emails. We’ll note in a later lesson when it makes sense to carry this out.

Just copy the html and navigate back to your Notification settings in Shopify. Paste the HTML and you’re all set. Klaviyo doesn’t have templates for every Shopify notification, but many of the key email notifications are accounted for. Repeat these steps for each one. Note that in some cases, there may be some slight differences in the naming conventions between Shopify and Klaviyo. There also may be a bit of spelling and punctuation to correct here and there. 

Recap

So let’s recap all that we covered in this lesson:

We covered that the value of a good template lies in Consistency, Efficiency, and Deliverability.

How big a factor Deliverability can be.

How to Build an effective template with the Email Builder.

Some pointers on adapting to Dark Mode.

How to update Shopify Notification Emails.

In our next lesson, get ready we’ll be discussing the Automated Customer Journey - Signup Forms and Flows.