If you are importing a custom HTML template, or building your own custom coded template, there are a few things to consider.
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.
Klaviyo Does Not Support Embedded Forms or Videos
Learn moreIf you're interested in learning workarounds for this, check out this article on Adding a Video or GIF to an Email.
Custom HTML and CSS Elements
Certain HTML and CSS elements used to make emails interactive are not currently supported. For example, if you are looking to make your email interactive in Gmail by using certain CSS attribute selectors, you may see your template trigger an error in Klaviyo.
Klaviyo does not currently support certain operators (like ~) in email templates. This may limit the extent to which certain custom HTML and CSS can be used. If your template contains HTML or CSS that isn't fully supported, you will not be able to generate a preview of your email and will see the following error:
What issues should I look for if my custom HTML isn't rendering properly?
If you're finding that your custom HTML email does not look correct, here's a few common places to check for problems.
Single Quotes in Font
Wherever you're adding a font-family in the CSS, look for single quotes or unnecessary quotes. Remove all quotes when adding in your font.
Problem Fixed font-family:'Helvetica Neue', Helvetica, Arial font-family:Helvetica Neue, Helvetica, Arial
If media queries are not in the standard format, it will not render properly. Follow the standard format for all media queries.
Standard Media Query Format @media only screen and (max-width: 460px)
Unnecessary Center Tags
If you have multiple HTML <center> tags throughout your email template, your email 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.