0

Your Cart is Empty

by Michael P. Hill December 02, 2015

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!

Michael P. Hill
Michael P. Hill

Michael P. Hill is a Shopify, Shopify theme, content marketing, digital marketing and product management expert based in Chicago. Follow him on Twitter at @michaelphill or connect on LinkedIn.

Need Support?

Please don't post support questions or issues as a comment on this thread, as we may not be able to process it in a timely manner. Instead, please visit our Support Center to browse frequently asked questions or submit a support request directly to our team.



Also in Shopify Theme Blog

Use your Shopify theme's signup forms and popups to build your email list
Use your Shopify theme's signup forms and popups to build your email list

by Michael P. Hill December 06, 2016 0 Comments

Along with blazing fast speed , the new Turbo Shopify theme introduces key new features that let you easily integrate email newsletter signup forms in eye-catching ways to expand your marketing efforts. Plus, get pro tips on how to best gather emails from customers.
Read More
Using your Shopify theme's password page as a marketing tool
Using your Shopify theme's password page as a marketing tool

by Michael P. Hill November 30, 2016 0 Comments

Building and setting up your Shopify theme and store can often be a long, strategic process, but there are some ways you can put your Shopify theme to work before you even launch by using the built in password page feature that comes with the Shopify platform.
Read More
One page wonders: Building smaller stores with full featured Shopify themes
One page wonders: Building smaller stores with full featured Shopify themes

by Michael P. Hill November 25, 2016 0 Comments

While most Shopify stores offer a wide selection of products, sometimes your store might only offer a handful of items — or even just one — and the most flexible Shopify themes on the market include the features needed to “shrink down” to a store that has a smaller inventory count.
Read More
Stay on top of OOTS news!

Subscribe to our mailing list to be notified of theme updates, new releases and more.