Import a Custom HTML Template

Last updated at:


Importing a custom HTML template gives you the most control over your email content. While we recommend working with our drag-and-drop editor for ease of use and better responsiveness built into your email, you have the option to work with custom HTML if you already have a template or if you prefer working directly with your code.

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. Import custom templates if you prefer working with an editor outside of Klaviyo, or if you prefer working directly with source code, and if you have the technical skills or resources to troubleshoot and resolve any issues.

Uploading a Custom HTML Template

From the Email Templates tab, click Create Template and toggle to Import to import your template. Enter a name for your template and upload the HTML file of your template.


Additionally, upload any images or other assets referenced in your template HTML. Click Import Template and your template will appear on the Email Templates tab.

Adding Images and Attachments

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.

Custom HTML templates must be .html files and must include an {% unsubscribe %} link.


Adding 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.

Additional Resources

Was this article helpful?
96 out of 192 found this helpful