How to Upload an Email Template in Kit

In this tutorial, we’ll be creating a custom HTML email template in Kit (formerly ConvertKit) using a Postcards template.

We have released new email templates for Kit.

Prerequisites

• A Designmodo account
• A Kit account
• A text editor that can open HTML files

Steps

1. Create a Postcards template with the required Kit tags

The first thing we need is a Postcards template with the required email tags. We want to add these tags in the Postcards interface so we don’t have to edit the code later. The two tags we need are the unsubscribe URL and the message content.

They look like this:

{{ message_content }}

{{ unsubscribe_url }}

In the Postcards app, I created a template that consists of Header 7 and Footer 1. It looks like this:

We’ll be adding the message content tag to the subtitle text in the Header.

Click the Header to open up the side menu and then click “Text” element.

Replace the content in the editor with the message content tag like this:

Next, we’ll be adding the unsubscribe tag to the footer.

Scroll to the footer and then click it. That’ll open a side menu to customize the values in the footer.

Find where the email is defined, and then update it with the unsubscribe URL values.

Now all the changes we need to make are finished.

Wait a few seconds for the auto-save.

Once your design is ready, the next step is to export the HTML from Postcards so you can import it into Kit. Postcards give you two ways to do this through the Export menu:

• Copy Email Code — this is the quickest option. It copies clean, production-ready HTML directly to your clipboard, so you can paste it right away into Kit:
  • Click Export in the top-right corner.
  • Select Copy Email Code.
  • The full HTML will be copied automatically to your clipboard.

• Download as ZIP — this downloads the full HTML package of your email, including the index.html file. Make sure "Host images/fonts online" is enabled before downloading, unless you plan to use your own hosted image and font files.
  • Click Export in the top-right corner and select Download as ZIP.

• Click the "Download as ZIP" button.

• Open the ZIP and extract the contents into a folder.

• Inside the extracted folder, locate the index.html file.
• Open index.html in a text editor such as Notepad, Notepad++, or Visual Studio Code.
• Copy the full HTML code from that file. (CTRL + A - to select all, then, CTRL + C - to copy)

Extract the file into a folder you can work with. It should look something like this:

Now we have everything we need for the custom Kit email campaign.

2. Create a custom email template in Kit

To create a custom email template in Kit, from the main Dashboard, select “Send”, and then choose “Email Templates” from the drop-down menu.

Next, you’ll be redirected to the Email Templates page. From there, click on “New Email Template”.

Once the Templates page opens, scroll to the bottom and choose “Import Code / Create HTML Template”.

You are now in the Editor. Give your template a name and paste in the code from the Postcards template you created. It should look like this:

After you finish editing the template, click on "Save" in the bottom right corner.

At this point, your template is ready to go!

I sent myself a test email by creating a new broadcast, and it looks like:

What we covered

1. How to create and export a Postcards template with Kit email tags.
2. How to create a custom HTML email template in Kit.