How to Upload an Email Template in Klaviyo

In this tutorial, we’ll be creating a custom HTML email template in Klaviyo using a Postcards template.

Prerequisites

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

Steps

1. Create a Postcards template with the required Klaviyo email tag

The first thing we need is a Postcards template with the required Klaviyo email tag added to it. We want to add the email tag in this step so we don’t have to edit the code later.

The one required email tag is the unsubscribe link, and it looks like:

{% unsubscribe_link %}

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

We’ll be adding the unsubscribe tag to the footer.

Scroll down to the footer and click it.

Locate where the email content is defined, and replace it with your unsubscribe text and tag.

That is all the changes we need to make for this template.

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 Klaviyo. 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 Klaviyo:
  • 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 Klaviyo email campaign.

2. Create a custom email template in Klaviyo

In your Klaviyo dashboard,  under "Content," select “Templates” in the left-side menu.

In the email templates page, select “Create” in the top right corner, and from the drop-down menu select "Import email template."

From the pop-up, you’ll see two options. With the “Upload HTML file” option, you can give your template a name, then select and upload the index.html file you downloaded from Postcards, and finally click “Import Template.”

In this case, however, we’ll use the second option, “Paste HTML,” where you can simply paste the code copied from your Postcards template and then click “Import Template.”

At this point, your template is ready to go!

I sent myself a test email, and it looks like:

To remove the Klaviyo branding in the footer, you have to become a paying user.

What we covered

1. How to create a Postcards template with the Klaviyo unsubscribe email tag.
2. How to create a custom HTML email template in Klaviyo.