For beautiful transactional emails
We have extracted each section from the Notification Templates, so that you can easily create your own transactional email templates.
For order confirmations or abandoned cart recoveries, use this section to show your customers what they've added to their order.
A button that is a section on its own, so you can easily add it in between other notification sections.
Cart Items Headline
Simple, centered headline section that you can use above your order items list.
Confirm Email / Password Reset
With a confirmation message and a button for your users to confirm their email. Can be used for any 'confirmation' needs. The Password Reset section also has an extra line of text at the bottom:
A HERO-like intro for your transactional emails, with a cool gradient background colour that even works in Outlook! Comes with a button variation, as shown below:
The Star Rating section, adapted for a transactional email.
Order Shipping Details
Two column layout that can be used to show shipping and billing address.
Your shopping cart emails need to show the user how much they've spent. Use this.
Text & Links
Text and link can be customised with inline CSS.
Simply change the
width="" of each image. If you want use retina images, make sure your own image is twice the pixel size of the placeholder.
Buttons can be customised with inline CSS. Read more in our Button component framework docs.
Top & bottom spacing
line-height: value on the
<div class="spacer". For mobile spacer customisation, learn more about spacers in Acorn.
Limitations & Other Notes
Currently, no online email builder supports point-and-click changing of CSS gradients. As a result, you will need to do this in code.
For most email clients, simply change the two HEX values in
background: linear-gradient(to right, #6A3093, #A044FF);"
For Outlook, you need to change the two
color="" attributes, and keep in mind that the direction is reversed as compared to the CSS one:
<v:fill type="gradient" color="#A044FF" color2="#6A3093" angle="90" />