Once you’ve got your premium Shopify theme up and running, one hidden opportunity to extend the professional look of your shop is through the notification emails that are sent out when key events happen.
The most common — and high profile — instance of this is sending a customer an order confirmation email, but emails are also sent when users forget their login information, when an order is shipped or even if you write them a personal note — and all of these notes can be customized.
Shopify actually calls these emails “Notifications” and they are all controlled under the “Settings” menu and the “Notifications” page. Here, you will see a list of all of the email notifications that are available and you can edit what they say and how they look.
There are some important things to consider when customizing these notifications, however.
HTML in emails
When you receive an email that has photos, colored backgrounds or column layouts, this is created using HTML. However, unlike the advanced HTML that your Shopify theme uses for your shop’s website, the HTML code used in emails must be much simplier. For a variety of reasons, most email programs (such as Outlook or Apple’s Mail) don’t support the more complex layout techniques that Web pages use.
Because of this, it’s a good idea to keep your HTML emails simple. A good starting point is a simple header, perhaps with some links to key areas in your store followed by the content of the message, all in a single column. This also allows for maximum flexibility for easier viewing on mobile devices.
Here’s a free example layout that includes a header bar with space for a logo, navigation bar with links, an open area for content and a footer, which will work nicely for many stores:
To create more complex layouts, you will need to use a design method from the early days of the Internet that is if often referred to as “table-based” layouts. These layouts use HTML tables to create the illusion of blocks of content or columns.
It’s also important to note that, in order to ensure consistent formatting, any styling of the email elements (such as setting the background color of the header or specifying the font weight) will need to be done using inline styles. This is basically a way of adding styles through your HTML markup using the “style” attribute, rather than by including separate CSS rules in the <head> section or linking to an external stylesheet, which is usually how it’s done for websites.
For example, a common design issue that many store owners want to address is preventing links from defaulting to the bright blue color that most email programs use. To accomplish this with inline styling, you need to use HTML such as this:
<a href=”url_goes_here” style=”color:#ea5300;”>Link text</a>
The “#ea5300” in this example is the HTML color code (link) for an orange shade. In the sample email code given earlier, however, the links in the navigation bar are white and don’t have underlines.
Consistency
One way you can keep your email notifications looking polished, as well as save some time, is to use the same template for each one and just switch out the content as needed. The sample code above is a great starting point for all your emails and could easily be applied to each of the notifications that Shopify sends.
Plain text emails
Once you start editing your email notifications, you’ll see that Shopify provides two versions of each email — a plain text version and an HTML version.
It’s important to always include this plain text version which still provides all of the same information as your HTML one.
Since plain text emails don’t support any formatting, including even bold or italics, it’s sometimes necessary to use spacing and text-based elements such as a line of equal signs, hyphens, asterisks or another symbol, to help create some visual organization in your text only emails.
Keep in mind, too, that most of your customers are likely to see the HTML versions of your emails, so extensive customization of plain text emails isn’t typically a good investment of your time.
Responsive emails
While emails can be responsive, not all email clients support this. In general, it’s better to either use a flexible layout that can expand or shrink to fit the user’s screen or pick a width between 400 and 600 pixels that’s a happy medium and doesn’t require mobile users to have to zoom too much to read your emails.
Links and image paths in emails
One of the most common pitfalls when creating emails is that they always need to contain the full file path or URL for both links and image sources. It’s easy to accidentally leave off the domain name part of URLs, which will result in broken links and “images not found.”
Liquid in emails
Just like Shopify themes, email notifications support Liquid code, which is primarily used to insert dynamic information such as lists of products ordered. By default, Shopify fills in all of this for you and it’s generally a good idea to either leave this alone or simply move the code, as is, around your templates as needed.
Email notifications also support Shopify’s control flow tags, which allow you to only display certain content when certain conditions are met.
It’s also important to remember that not all Liquid tags work in emails and including a non-compatible one could lead to issues with the emails generated by Shopify.
Test your emails
Shopify, quite conveniently, including a built in “send test email” function in its email notification editing interface and it’s a good idea to take advantage of this feature often. You should carefully test each notification you modify to ensure that the layout and design remains as consistent and error free as possible. When you send yourself a test email, try to view it on both desktop and on mobile.
Content for your emails
Besides the obvious content that’s included in the Shopify email notifications (such as order information), email notifications are also a great way to add some additional content or promotional info:
- Customer service information
- Links to your social media
- Special offers
- Upcoming events or sales
- Requests for reviews
- “How to” content or links to instruction manuals or other guides
- Links to various sections of your site
- “Refer a friend” program information
- Content spotlighting your most popular products
- Links to featured blog posts
Internal notifications
It’s also important to note that some of the notifications that Shopify sends are only meant for you or your staff — such as the notification that an order needs to be fulfilled. You can still customize these, however, and adding a logo and adjusting the information included can make them suitable for other purposes as well
For example, you might be able to print the emails you receive and use them for your records, as a checklist as you pack the order or even as a packing slip included in the shipment.
Finally, let yourself be inspired by what other shops have done with their own email notifications and make notes of any particularly clever or effective approaches that you would like to use for your own emails. Don’t be afraid to copy a layout or style, then add your own twist to it!
Shopify has a great list of ideas to get you started!
