How to import a custom HTML template

Estimated 3 minute read
|
Updated Aug 29, 2024, 4:58 PM EST
You will learn

You will learn

Learn how to import a custom HTML template into Klaviyo. 

We only recommend using custom HTML for technically savvy marketers, or for anyone who has access to a developer. While our product does support custom HTML, our support team cannot help you build out your custom templates beyond offering the general guidance covered in this documentation. To maintain the security of your data, Klaviyo's support team is not able to open your HTML files.

Upload a custom HTML template

Upload a custom HTML template

Custom HTML templates must be .html files and must include an unsubscribe link (i.e., an {% unsubscribe %} or {% unsubscribe_link %} tag). Learn more about unsubscribes in Klaviyo.  

  1. Navigate to Content > Templates.
  2. Click Import template.
  3. Enter a name and upload the HTML file of your template.
  4. Upload any images or assets referenced in your HTML.
  5. Click Import Template.

Exporting a template built in Klaviyo's drag and drop editor and then importing it back into Klaviyo is not recommended, and can cause problems with the template's functionality. 

Removing unsupported template tags and variables

When you export a template from a different email service provider, it may contain tags and variables that aren’t supported by Klaviyo. Before you import your HTML file, remove those tags (and, if needed, replace them with Klaviyo personalization tags).

A template with unsupported tags

The HTML of a template that includes unsupported tags

For example, see the message and HTML below. This message was exported from another email service provider and contains tags for the current year, a company’s address, and more. These external tags are not compatible with Klaviyo.

Klaviyo template tags are contained within curly brackets. Variables are surrounded by two pairs of curly brackets (e.g., {{ first_name }}), and template tags are surrounded by a pair of curly brackets and percent symbols (e.g., {% unsubscribe %}). If the template tags and variables in your template are denoted by other characters, Klaviyo will not support them.

Add images and attachments (optional)

Add images and attachments (optional)

You can reference images and attachments by uploading a zip file that includes your attachments and referencing them by their filename within your template.

When you click to import your template, these images and assets are automatically added to our CDN and their references are updated within your template.

Add hidden preview text to a custom HTML template

Add hidden preview text to a custom HTML template

If you’d like to set the preview text for a custom HTML template (rather than letting inboxes pull preview text from your message content), add the code block below to your template. This code should be added immediately after the opening <body> tag of your template.

<div style="display:none; font-size:1px; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden;">
Insert preview text here.
</div>
Emoji and custom HTML templates

Emoji and custom HTML templates

As of February 2024, all emoji are supported in all Klaviyo email editors (i.e., the drag-and-drop editor, hybrid editor, text-only editor and custom HTML editor).
Additional resources

Additional resources

Was this article helpful?
Use this form only for article feedback. Learn how to contact support.

Explore more from Klaviyo

Community
Connect with peers, partners, and Klaviyo experts to find inspiration, share insights, and get answers to all of your questions.
Live training
Join a live session with Klaviyo experts to learn about best practices, how to set up key features, and more.
Support

Access support through your account.

Email support (free trial and paid accounts) Available 24/7

Chat/virtual assistance
Availability varies by location and plan type