Use your HTML & CSS skills to create custom ConvertKit email templates.

☝️ Head's up! This is an advanced tutorial for those who are already comfortable working with custom HTML & 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 templates page in your account, click the 'New Email Template' button from the right sidebar:

Then on the next page, click 'Use HTML Editor':

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 ConvertKit template, namely:

  • A place for the content you add in the email editor to go, using the {{ message_content }} variable
  • A valid unsubscribe link, using either the {{ unsubscribe_link }} variable on its own, or the {{ unsubscribe_url }} variable if used for the value of the href attribute of an anchor tag
  • A 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 & 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:

(This 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 & 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 it as your default

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 'Use this Template' button underneath it on the templates page:

A green checkmark will indicate that it's your current default:

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 👇

Troubleshooting: HTML Email Templates

Did this answer your question?