Shopify rocks, but it doesn’t have a sexy interface for setting up HTML Emails (like MailChimp or AWeber). To get good-looking email notifications set up in your store, they say you need to know how to code in HTML…. Or do you?
This article covers the basics of setting up HTML Emails in Shopify.
Psst… Before we start: Want to save hours researching, coding and tweaking your Shopify Email Templates?
First Up: Why Bother Using HTML Email Templates In Shopify?
Because, rather than plain old’ text emails, your customers will see your branding, background colors, logo, and whatever else you choose:
Plain text Email: Shopify’s Default
HTML Email Templates: Sexier
How Do I Enable HTML Email Templates?
1. Create your colorful template in MailChimp, AWeber or another editor.
Unless you want to code your HTML Email Template from scratch, I’d suggest using another service to help you. Here are several good ones:
- MailChimp
- AWeber
- Graphicriver also has some low-cost HTML email templates available for sale.
2. Convert your HTML to inline styles
Once you have your HTML Email template, you can’t just paste it straight into Shopify. Why? Because web services like Gmail and Hotmail use inline HTML, not CSS, to render their emails. The tools you used (above) will have cleverly incorporated CSS into your template, to govern all the styles in your emails.
In a nutshell: If you use normal CSS rules to set the styles in your email, Gmail and Hotmail will delete your styles and show a plain-text email again.
To get around this, you need to use inline styles.
3. Enable HTML in your Shopify Store
Go to your Shopify Admin Panel > Emails and Notifications. Choose the email you want to customize, and then hit “Enable HTML Template”:
4. Add your content
From there, you need to play around with what content you want to show. If you have a heading, use “ctrl+F” on the Shopify page to find your heading and edit it if needed. Same goes for your email’s content (“Thanks for your order” etc.) and footer (phone number/email).
5. Add the Shopify code into your HTML Template
This is really important. It’s no good having a good-looking email template if your Shopify code doesn’t get put in there to tell the customer what they ordered. To do this, you need to copy the text-based email content from the box above, and paste it into the right place in your HTML email template, thusly:
6. Preview, test, and edit until it’s finished
From here, you can preview the email, send yourself a test version, and keep tweaking until you’re happy with it.
You can then repeat for all the emails you want to customize (for example, Shopify provides emails for Order Notification, Shipping Confirmation, New Order, etc.).
Don’t forget: If you’d like a done-for-you set of templates you can set up in under 10 minutes, you can download our template by clicking the button below.
Final notes
- To be honest, this isn’t easy. It does take some time, but it’s worth it when you have great-looking emails going out to your customers.
- Be careful – there’s no ‘undo’: Save versions of your HTML template regularly as you update them. Then back them up again. Shopify’s HTML Email template system is just a text box – there’s no MS Word-Like autosave feature or an undo button.
Good luck and happy emailing!
***
Thank you again for following our Shopify Insider Blog @ BlackbeltCommerce, we have many other valuable posts that are informative. Here are our top recommendations; Shortcodes For Shopify, HTML templates, 4 Social media tricks for your shopify store, All you need to know to start a new e-commerce store, and 4 Days In. We can also help you with many other services. Also, you can learn all about who are the Shopify Experts at Blackbelt Commerce.
Questions? Let us know in the comments below.
This is great – thanks so much! But I’m losing the styling of my links. How would I fix that? Sorry, I’m a designer not a programmer 🙂
Hey Christina! Glad you’re making good progress. To style your links, you’d need to enclose them within the relevant HTML tags. For example:
To make a link bold, use : Your Link Text Goes Here
To make a link italic, use : Your Link Text Goes Here
Others you could use: