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.

Order Item

Cart Checkout Button

A button that is a section on its own, so you can easily add it in between other notification sections.

Checkout Button

Cart Items Headline

Simple, centered headline section that you can use above your order items list.

Cart Items Headline

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:

Password Reset

Cart Totals

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

Cart Totals


Text & Links

Text and link can be customised with inline CSS.


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 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.