For beautiful transactional emails

We have extracted each section from the Notification Templates, so that you can easily create your own transactional email templates.

Cart Product Row

For order confirmations or abandoned cart recoveries, use this section to show your customers what they've added to their order.

Cart Checkout Button

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:

Cart Totals

Your shopping cart emails need to show the user how much they've spent. Use this:

Customisation

Text & Links

Text and link can be customised with inline CSS.

Images

Simply change the src="" and width="" of each image. If you want use retina images, make sure your own image is twice the pixel size of the placeholder.

Buttons

Buttons can be customised with inline CSS. Read more in our Button component framework docs.

Top & bottom spacing

Change the line-height: value on the <div class="spacer">. For mobile spacer customisation, learn more about spacers in Pine.