Troubleshooting custom CSS, JavaScript, and HTML in Klaviyo
You will learn
Learn how to troubleshoot custom code when importing a custom HTML template or building your own custom coded template.
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 is unable to 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.
Custom HTML and CSS elements
If you're creating a custom HTML template, you cannot use product feeds within your email.
Certain HTML and CSS elements used to make emails interactive are not supported by all email clients. Test your custom template in the inboxes your recipients use, even if it looks correct in Klaviyo.
If Klaviyo cannot process your CSS, generating a preview can fail. Check the CSS syntax and simplify the rule causing the error, then preview again. For errors involving template tags or variables, see Troubleshooting email template error messages.
Common HTML issues
If you're finding that your custom HTML email does not look correct, here are a few common places to check for problems.
Quotes in font-family styles
When adding a font-family property to an inline style, make sure quotes around a font name do not close the HTML style attribute. For example, use double quotes around the style attribute and single quotes around Helvetica Neue. You do not need to remove correctly paired quotes from font names.
Problem | Fixed |
<p style='font-family:'Helvetica Neue', Helvetica, Arial;'>Text</p> | <p style="font-family:'Helvetica Neue', Helvetica, Arial;">Text</p> |
Media queries
Use valid CSS syntax for media queries, including braces around the rules you want to apply. Place the following example in your template’s <head>. It applies to elements with the class mobile-text on screens up to 460px wide. Adjust the class, styles, and width for your design, then test in your recipients’ email clients.
Example media query |
<style> |
Unnecessary center tags
If you have multiple HTML <center> tags throughout your email template, it may not render properly in Gmail. To fix this issue, remove all unnecessary <center> tags. Only one <center> tag is needed at the top of the email template near the <body> tag. All additional <center> tags are superfluous.
Klaviyo does not support JavaScript emails
Most email clients (Gmail, Hotmail, Yahoo, etc.) view JavaScript in emails as a security threat. This is because scripts can hide malicious content. As a result, these major email clients block scripts in emails entirely. Given the inherent security threat associated with JavaScript in emails and the lack of support for such scripts by most major email clients, any added scripts will automatically be removed.
Klaviyo does not support embedded forms or videos
Klaviyo does not support embedded forms, widgets, or videos in templates. This is because our testing shows that these types of features do not reliably render across all major email clients. Similar to JavaScript snippets, most email clients view these elements as a security threat and strip them out of emails altogether.
If you're interested in learning workarounds for this, check out this article on adding a video or GIF to an email.
Other unsupported tags and attributes
The HTML tags and attributes covered here are not an exhaustive list of what Klaviyo supports. Check whether the elements you use are supported by major inbox providers. Klaviyo also checks tags and attributes when you import or save your template.
When you import or save custom HTML, Klaviyo removes disallowed elements such as <script> and <iframe>, converts unrecognized tags to <span>, and removes unsupported attributes. When you save changes in the HTML editor, review any warnings for the affected tag or attribute. If part of your HTML disappears or changes, use a supported alternative.
Check your changes
- Click Save in the HTML editor. Review any errors or warnings, correct the affected code, and save again.
- Click Preview. If your template uses profile or event data, choose the profile or event you want to preview with.
- Select Send as an email, enter your email address in Send To:, and click Preview Now.
- Open the preview email on desktop and mobile. Check the layout, fonts, links, and any interactive content. If you make more changes, save and send another preview before sending to your audience.
Additional resources
- How to import a custom HTML template
Learn how to import a custom HTML template into Klaviyo.
- Troubleshooting email template error messages
If you encounter errors or warnings in an email template, you may need to resolve them before sending your message. Search this resource for the error message or warning you’re encountering to find tips for resolving the issue.