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, Content 4, Feature 5, Call to Action 1, 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. That’ll open the side menu and then press “Column #2.”
Scroll down to the bottom until you find where the email is defined and then replace the contents with the unsubscribe tag contents.
That is all the changes we need to make for this template.
Press “Done” at the top of the side menu and then press the “Export” button at the top right corner of the app. Then press “Download as zip” and make sure you have the “Host images online” option selected so you don’t have to download and upload the images yourself.
Your screen should look like this:
Download and extract your file into a folder you can work with. It should look something like this:
2. Create a custom email template in Klaviyo
In your Klaviyo dashboard, select “Email Templates” in the side menu.
In the email templates page, select “Create Template” in the top right corner.
In the create page, select “Import.”
On the next page, give your template a name, then select and upload the index.html file you downloaded from Postcards in the HTML file section, and then press “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
- How to create a Postcards template with the Klaviyo unsubscribe email tag.
- How to create a custom HTML email template in Klaviyo.