Setting Up Style Templates

Last updated: June 24, 2026

Style templates are full HTML wrappers that control the look and feel of outbound emails — header banners, logos, fonts, colors, footers, and so on. They are separate from email templates, which hold the message content (subject + body).

When an email template is linked to a style template, the email body is inserted where the style template defines {{ body }}.

Where to manage style templates

1. Go to Templates & Libraries → Email Templates

2. Open the Style Templates tab

3. Click New + to create, or edit an existing template

4. Use the HTML Editor tab to write HTML, and Preview to see how it looks

5. Link a style template to an email template via the Style field on the email template

Style templates apply to personal (user-sent) emails that use a linked email template. System-sent emails use the platform's default email layout instead.

Style template requirements

Every style template must include the {{ body }} placeholder. This is where the email template content is injected when the message is sent.

Example structure:

    <!doctype html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <style>
          img { max-width: 100%; border: none; }
          .container { max-width: 580px; margin: 0 auto; }
        </style>
      </head>
      <body>
        <!-- Your header / logo / branding here -->
        <div class="container">
          {{ body }}
        </div>
        <!-- Optional footer here -->
      </body>
    </html>

HTML is sanitized on save (scripts and other unsafe content are removed). Image src values must use safe URLs (https://, http://, or data:image/...).

There is no built-in logo or image upload in the style template editor. All images must be embedded in your HTML using publicly accessible URLs.

Adding an email header

Email headers are the banner or branded image area at the top of your style template HTML.

Recommended email header image specs

Display width: 580px (matches the email content area)
Source width (if using a full image): 1160px (2× display width)
Height: Flexible — commonly 100–200px for a banner strip; taller hero images are fine if you design for it
Aspect ratio: No fixed ratio enforced; design to fit within the 580px content width
File format: PNG or JPG (PNG preferred for graphics with transparency)
Hosting: Must be a publicly accessible HTTPS URL in your HTML img tag

Example header markup

    <img
      src="https://your-cdn.example.com/email-header.png"
      alt="Acme Corp"
      width="580"
      style="display: block; width: 100%; max-width: 580px; height: auto;"
    />

Tips:

Avoid CSS background images for critical branding — many email clients strip or ignore them
Test in the style template Preview tab before saving

Adding a logo

To include a company logo, add an img tag in your style template HTML pointing to a publicly hosted image URL.

Recommended logo image specs

No required logo dimensions or file size limits are enforced in the style template editor. However, for best results follow these guidlines:

Display size in email: Max 80px height × 240px width is a common target for a header logo
Source size: Roughly 2× for retina (e.g. 160px tall or 480px wide, depending on aspect ratio)
Background: Transparent PNG works best on varied email backgrounds
Format: PNG preferred; JPG acceptable
Hosting: Must be a publicly accessible HTTPS URL

For the img tag, use inline styles: display block, max-height 80px, max-width 240px, width auto, height auto.

Example logo markup

    <img
      src="https://your-cdn.example.com/company-logo.png"
      alt="Acme Corp"
      style="display: block; max-height: 80px; max-width: 240px; width: auto; height: auto;"
    />

Linking style templates to email templates

Create or edit a style template with your header, logo, and {{ body }} placeholder
Create or edit an email template
Set the Style field to your style template
The email's subject and body come from the email template; the wrapper comes from the style template

Style templates can be locked after publishing. Locked templates must be unlocked before editing.

Troubleshooting

Images don't appear in sent emails

Confirm the image URL is publicly accessible (open it in an incognito browser)
Use https:// URLs, not local file paths
Check that the style template is linked on the email template and the email is sent as a personal (user) message

Header looks blurry

Upload a 2× resolution source image and constrain display width to 580px in HTML

Logo looks too large in email

Add inline styles: max-height 80px, max-width 240px, width auto, height auto

Style Templates tab is missing

Ask your account admin to enable the Style Templates feature flag for your organization

📄 Setting up Email Templates