If you have existing HTML templates, you can convert sections of them to editable blocks that you can change, add, or delete within Klaviyo's drag-and-drop editor.
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.
Add Drag and Drop Support to Your Template
Start by importing your custom HTML templates.
Once your templates are imported, you need to add tags to the HTML to make blocks editable.
1. Add a property to the enclosing <td> tag that indicates it's going to be an editable column.
Here's what this looks like:
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
For each table column, you'll specify that it's an editable region and you'll specify the width of that region. Editable blocks all have to start with a table column.
2. Add a
<div> for the type of block.
Immediately within that
<td> tag, you'll add a
<div> tag specifying the type of block that it will contain: either text or an image block.
You aren't limited to just text and image blocks in custom HTML templates with drag and drop support. To add other block types (e.g., Table Blocks or or Button Blocks), follow the instructions below to add a text block. Once you've uploaded the template, open it in the campaign or flow editor, then drag another block type into the customizable field.
<div class="klaviyo-block klaviyo-text-block">
Within the text block, you can include any text/html/etc as the default.
<div class="klaviyo-block klaviyo-image-block">
Within the image block, you'll want to include an <img> tag that links to the default image.
Finally, remember to close the
Once you've added the tags, the template will still show up in your Email Templates tab.
The template will not appear in the drag-and-drop editor until you use it in a campaign or flow email. It will remain as custom code in the Template Library view.