Custom Email Templates for CMS and CRM
Email templates in Mailchimp, Klaviyo, HubSpot, Customer.io, or Salesforce Marketing Cloud are often created through built-in drag-and-drop editors. But sometimes you need more — a custom HTML template that fully matches your brand's design and supports complex variable substitution logic from the platform.
Template Formats by Platform
Each CRM/ESP uses its own merge syntax:
| Platform | Variable Syntax | Conditions |
|---|---|---|
| Mailchimp | *|FNAME|* |
*|IF:FNAME|* ... *|END:IF|* |
| Klaviyo | {{ first_name }} |
{% if first_name %} ... {% endif %} |
| HubSpot | {{ contact.firstname }} |
{% if contact.firstname %} |
| Customer.io | {{ customer.first_name }} |
{% if customer.attributes.plan == 'pro' %} |
| Brevo (Sendinblue) | {{ params.firstname }} |
{% if params.plan %} |
Custom HTML Template Structure
A basic template is valid HTML with tables for Outlook compatibility:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>*|MC:SUBJECT|*</title>
<style>
@media only screen and (max-width: 600px) {
.container { width: 100% !important; }
.column { display: block !important; width: 100% !important; }
.mobile-padding { padding: 16px !important; }
}
</style>
</head>
<body style="margin:0;padding:0;background:#f3f4f6">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="padding:24px 16px">
<!-- Main container -->
<table class="container" width="600" cellpadding="0" cellspacing="0" border="0"
style="background:#fff;border-radius:12px;overflow:hidden">
<!-- Header -->
<tr>
<td style="background:#1e40af;padding:24px 32px">
<img src="https://example.com/logo-white.png" width="120" alt="Logo" />
</td>
</tr>
<!-- Content -->
<tr>
<td class="mobile-padding" style="padding:32px">
<h1 style="margin:0 0 16px;font-size:24px;color:#111827">
Hi, *|FNAME|*!
</h1>
<!-- Content -->
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:16px 32px;background:#f9fafb;text-align:center">
<p style="margin:0;font-size:12px;color:#9ca3af">
<a href="*|UNSUB|*" style="color:#9ca3af">Unsubscribe</a>
·
<a href="*|UPDATE_PROFILE|*" style="color:#9ca3af">Preferences</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Importing to Platform
After building, the template is uploaded via interface or API:
// Example: creating a template via Klaviyo API v2
const response = await fetch('https://a.klaviyo.com/api/templates/', {
method: 'POST',
headers: {
'Authorization': `Klaviyo-API-Key ${process.env.KLAVIYO_PRIVATE_KEY}`,
'Content-Type': 'application/json',
'revision': '2024-02-15',
},
body: JSON.stringify({
data: {
type: 'template',
attributes: {
name: 'Order Confirmation EN',
Timeline
Creating 3–5 custom templates for a CRM — 5–7 days.