Skip to main content

Creating your first template

This guide walks through the fastest path to a working template. You do not need a perfect design system on day one. The goal is to understand the core model: template base, modules, settings, and preview.

Before you begin​

You should have:

  • a rough HTML email layout to work from
  • a sense of which parts should stay global
  • a sense of which parts marketers should be able to edit

Step 1: Create the template​

Create a new template and open it in the Template Editor.

Start with the template base, not the modules. Paste in the outer wrapper for the email and make sure it contains {{ content }} where the modules should render.

<html>
  <head></head>
  <body>
    <table>
      <tr>
        <td>Header</td>
      </tr>
    </table>

    {{ content }}

    <table>
      <tr>
        <td>Footer</td>
      </tr>
    </table>
  </body>
</html>

Step 2: Turn content areas into modules​

Look at the parts of the email that marketers should be able to add, remove, or repeat. Those should become modules.

Common first modules:

  • hero
  • article card
  • image-and-text section
  • CTA banner
  • footer variation

Give each module a clear name. If the module list is hard to scan, the Email Editor will be hard to use later.

TODO: Add a video showing a section being moved from the base template into a new module.

TODO: Add a screenshot of the first working template with the template base selected and a module visible in the picker.

Step 3: Add settings and inputs​

Once the code structure exists, decide what should be editable.

Start with one simple setting group. For example:

  • Content setting
    • headline input
    • body input
    • CTA text input
    • CTA link input

The Name is what users see in the editor. The Key is what you reference in Liquid.

Step 4: Connect the inputs to Liquid​

After you create the setting and inputs, use those values in the module code.

For example:

<h2>{{ content.headline }}</h2>
<p>{{ content.body }}</p>
<a href="{{ content.cta_link.url }}">{{ content.cta_text }}</a>

The exact structure depends on your setting and input keys, but the idea is the same: define the field in settings, then render it in Liquid.

Step 5: Preview the marketer experience​

Open preview and test the module the way a marketer would use it:

  • change the content
  • check desktop and mobile behavior
  • confirm the defaults look good
  • make sure labels are easy to understand

If the preview feels awkward, fix the template now. Template ergonomics matter just as much as the HTML.

Step 6: Save and create a revision​

Once the first version works, save it and create a named revision. This gives you a clean milestone before you continue building the module library.

What to do next​

After the first template works, the next improvements are usually:

  • better setting grouping
  • stronger defaults
  • cleaner naming
  • repeatable settings for list-like content
  • feed-backed settings for structured external data