Use your HTML and CSS skills to create custom Kit email templates.
☝️ Heads up! This is an advanced tutorial for those who are already comfortable working with custom HTML and CSS. If coding isn't your forte, we'd recommend you use our visual template editor instead, for which we have a separate tutorial here.
Let's dive in.
1. Create a new HTML email template
From the Email Templates page in your account, click the + New Email Template button from the right sidebar:
Then on the next page, scroll down and click the Create HTML Template option:
You'll be taken to a page that looks like the following:
It's very empty right now, but that's about to change.
NOTE: If you're a confident coder, you're probably tempted to skip the rest of this tutorial right about now (a blank code editor is tempting, right?!) But we encourage you to keep reading, if only to review our recommendations to help ensure your template is valid and functional.
2. Paste one of our default templates' code into the editor
"But wait," you might be thinking. "I wanted to create my own template!"
Don't worry: you'll still be able to make it your own, and customize it however you like! 🎨
We provide the code for our 3 default templates here.
We recommend picking the one you like the best as a starting point, and paste its code into the editor.
The reason we suggest starting with one of our templates as a base is because there are several variables that are required in a Kit template, namely:
A place for the content you add in the email editor to go, using the
{{ message_content }}variableA valid unsubscribe link, using either the
{{ unsubscribe_link }}variable on its own, or the{{ unsubscribe_url }}variable if used as the value of thehrefattribute of an anchor tagA physical address, either manually typed in or automatically populated from the one in your account settings using the
{{ address }}variable
These elements must all be added correctly for your template to be functional and compliant. Since our default templates include all of these, and are valid out-of-the-box, it's often easiest to duplicate one of those and customize it to your liking from there.
NOTE: We're won't prevent you from writing your own template code from scratch if that is your preference. You'll just have to be sure to include all the elements above in order for it to function properly. If you run into trouble, we have a troubleshooting guide here.
3. Give your template a name
Feel free to give your template an identifiable name in this field — it's for your internal reference only, and you can change it at anytime:
4. Press Save
Once your base template code and name have been added, click the red Save button in the lower righthand corner of the page:
We're not done yet, and this template won't be used anywhere until you set it to be. You just have to save your template at least once to enable this Preview Layout button on the sidebar:
(Being able to preview the resulting email layout will make customizing your template much easier!)
5. Make it your own (Also known as: the fun part)
At this point, you have a valid, functional email template, that's ready to be customized.
Make all the changes you'd like to your template's HTML and CSS, and use the Preview Layout button at any point to see how it's looking so far.
NOTE: Don't forget to save it again once you're done customizing it!
6. [Optional] Set your HTML template as your default template
If this is the template you'd like to use for all of your emails unless otherwise specified, you can set it as your default to save yourself from having to manually select it for each email.
To do so, click the three dots next to your HTML template on the Email Templates page, followed by Set as default.
A green 'Default' label will indicate that your template is your current default template:
That's all there is to it!
Having trouble?
We put together a troubleshooting guide to help you resolve the most common HTML email template issues we come across 👇