By default, Follow Up Email uses a built-in visual template editor that handles layout and styling for you. If you need more control — custom fonts, multi-column layouts, branded product tables, or a design that exactly matches your store — you can paste in your own HTML instead.

How to switch to custom HTML

  1. Open a campaign and click Edit in the email template section.
  2. In the template editor, look for the HTML or Source option (typically in the editor toolbar or a tab at the top).
  3. Paste your HTML into the editor. The preview will update as you type.
  4. Save the campaign when done.
Tip: Keep a copy of your HTML The editor stores your template, but it's good practice to keep a backup of your custom HTML somewhere safe (a text file or notes app) so you can easily re-use or edit it outside the app.

How email HTML is different from web HTML

HTML for email has important differences from HTML for websites. Email clients like Gmail, Apple Mail, and Outlook each render HTML differently, and many ignore modern CSS features. To get consistent rendering across clients, follow these conventions:

Using merge tags in custom HTML

All standard merge tags work exactly the same in custom HTML — just paste them directly into your template wherever you want the value to appear. For example:

Merge tags are replaced at send time regardless of whether they appear in a paragraph, a heading, a link, or any other HTML element.

Starter template

The following is a minimal, email-safe HTML template you can copy and customise. It uses inline styles, a table-based layout, and includes common merge tags.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email</title>
</head>
<body style="margin:0; padding:0; background-color:#f4f4f4; font-family:Arial, Helvetica, sans-serif;">

  <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center" style="padding: 24px 0;">

        <!-- Outer container -->
        <table width="600" cellpadding="0" cellspacing="0" border="0"
               style="background-color:#ffffff; border-radius:8px; overflow:hidden;">

          <!-- Header -->
          <tr>
            <td style="background-color:#1a8fff; padding:24px 32px; text-align:center;">
              <span style="font-size:20px; font-weight:bold; color:#ffffff;">
                {{ shop.name }}
              </span>
            </td>
          </tr>

          <!-- Body -->
          <tr>
            <td style="padding:32px;">
              <p style="font-size:18px; font-weight:bold; color:#111827; margin:0 0 12px;">
                Hi {{ customer.first_name }},
              </p>
              <p style="font-size:15px; color:#374151; line-height:1.6; margin:0 0 24px;">
                Thank you for your order! We&rsquo;re getting it ready for you.
              </p>
              <p style="font-size:15px; color:#374151; margin:0 0 8px;">
                <strong>Order:</strong> {{ order.name }}<br>
                <strong>Total:</strong> {{ order.total_price }}
              </p>

              <!-- CTA Button -->
              <table cellpadding="0" cellspacing="0" border="0" style="margin-top:24px;">
                <tr>
                  <td style="background-color:#1a8fff; border-radius:6px; padding:12px 24px;">
                    <a href="{{ order.status_url }}"
                       style="color:#ffffff; text-decoration:none; font-size:15px; font-weight:bold;">
                      View Your Order
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- Footer -->
          <tr>
            <td style="background-color:#f9fafb; padding:20px 32px; text-align:center;
                        font-size:12px; color:#9ca3af; border-top:1px solid #e5e7eb;">
              &copy; {{ shop.name }} &bull;
              <a href="{{ unsubscribe_url }}" style="color:#9ca3af;">Unsubscribe</a>
            </td>
          </tr>

        </table>
      </td>
    </tr>
  </table>

</body>
</html>

Testing your HTML email

Email rendering varies significantly across clients, so always test before activating. Use the Send Test Email feature to send a preview to yourself and check how it looks in the email clients your customers are most likely to use (Gmail and Apple Mail cover the majority). Pay attention to:

Note: Test emails use placeholder data for merge tags. Some tags may appear blank in a test if the test order doesn't have a corresponding value — this is normal. The real email will populate correctly from actual order data.