File Structure

How the template is organised

The product has the following folder structure:

  • Documentation/ — this documentation
  • Files/
    • campaign-monitor/ — Campaign Monitor integration
      • all-in-one/ – .zip file that can be imported as a template in this service
      • components/ – buttons, navigation (menus), dividers, and spacers
      • grid/ – standard and collapsed grid examples
      • layout/ – master layout file, just add sections
      • sections/ – all template sections, each in its own file
    • html/ — HTML files, not integrated with any ESP
      • templates/ – pre-built HTML templates [2]
    • images/ — social icons and other UI elements
    • mailchimp/ — MailChimp integration [1]
    • shopify/ — Shopify notification templates [3]
    • stampready/ — StampReady integration [1]
    • mailster/ — Mailster WordPress plugin integration [1]
  • PSD — Photoshop design files
  • [1] Same structure as the campaign-monitor folder.
  • [2] HTML version doesn't have an all-in-one. Pre-built layouts are provided instead.
  • [3] The shopify folder contains only the pre-built, Shopify-integrated templates.

Boilerplate

If you're into coding, the product offers a boilerplate layout file inside the layout folder, which you can use as a base for your custom email templates, by copying sections from the sections folder, one on top of each other.

This file contains meta tags and CSS in the <head>. Much of it is needed, but some parts (like menu styles) are optional. If you want to remove certain styles because you're not using the sections they're meant for, or if you want to customise them further, we recommend using EmailComb to clean up unused CSS. If you're unsure of what a specific CSS rule does, please refer to the framework documentation.

Pre-built HTML Templates

This product includes pre-built HTML templates, for you to use right away:

Marketing templates are for your regular marketing/promotional/newsletter campaign.
Notifications are transactional email templates. They are used in user-initiated scenarios, like a password reset or purchase confirmation. You can use them with SparkPost or MailGun.

Sections

Sections are individual, stackable blocks of content that you can use to create an email. The product includes dozens of sections, most of them being email counterparts to the ones in our HTML and WordPress products.

You can customize the text, buttons, images, and colours in all sections.

ESP-integrated versions of the product also include individual section files in their sections folder, which you can copy/paste to the boilerplate file in a text editor, in order to build your own custom templates for that provider [1].
[1] With the exception of the Shopify integration.

Components

We've also included a small set of useful components from our Pine Email Framework. These are provided as a convenience, for you to quickly copy/paste a button or a spacer in an email that you're custom coding based off of the product.

The Grid

Also as a convenience, the product includes standard and collapsed grid examples from our framework. If you want to learn more about using the grid, please refer to the framework documentation.


Next Up: Sections Quick Reference →