How to create a hybrid email template

You will learn

Learn how to create custom HTML templates that are compatible with Klaviyo’s drag-and-drop editor (i.e., hybrid templates). By following these steps, you can design a fully custom HTML email while maintaining access to features only available in the drag-and-drop editor (e.g., product blocks or universal content blocks).

To rebuild an existing HTML template as a drag-and-drop template, use HTML-to-drag-and-drop conversion. Klaviyo uses AI to recreate the design with editable blocks. Review the converted layout and content before sending. Use a hybrid template when you want to keep your custom HTML and add editable blocks only in specific regions.

Add a code snippet to your HTML template

Each code snippet below creates 1 editable region. You can add multiple drag-and-drop blocks within that region. To make separate areas of your template editable, add a snippet for each region.

Place each <td> snippet inside a <tr> in your email’s table layout. Set data-klaviyo-region-width-pixels to the width of that region in pixels; the examples use 600.

For example, if you’d like to add an image and a table block using the drag-and-drop editor, just follow the Add a customizable image block steps below. Once you upload your template to Klaviyo and use it in a campaign or flow, you’ll be able to add blocks above or below the image block.

Before importing a marketing email template, include an unsubscribe tag, such as {% unsubscribe %}. Save your template as an .html file.

Add an editable text block

1. Create a custom HTML template using your preferred HTML editor.
2. Add the following code snippet to your HTML template. Place it wherever you’d like to add your text block in your template.
   

textCopy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>

1. In Klaviyo, navigate to Content > Templates.
2. Select the Email: saved tab.
3. Click Create > Import email template.
4. Enter a name for your template, upload your HTML file, and click Import template.
5. If you open the template from your Templates tab, you’ll see your template’s code in Klaviyo’s HTML editor.
   

1. To access the template in Klaviyo’s drag-and-drop editor, add it to a campaign or flow.
2. If prompted to choose a template type, select Drag and drop.

1. In the template gallery, select Email: saved, select the template you imported, and click Use template.
2. Note the text block that says Hello world! This is your editable text block.
3. Drag and drop additional blocks above or below the text block, as desired.

Add a customizable image block

1. Create a custom HTML template using your preferred HTML editor.
2. Add the following code snippet to your HTML template. Make sure to place it wherever you’d like to add your image block after importing your template.
   

textCopy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block"></div>
</td>

1. Optionally, add a preset image inside the div. Replace the example image URL below with a publicly accessible image URL, and replace the link and alt text with your own:

textCopy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block">
        <a href="https://www.klaviyo.com/"><img src="https://example.com/my_image.png" alt="My Image" /></a>
    </div>
</td>

1. In Klaviyo, navigate to Content > Templates.
2. Select the Email: saved tab.
3. Click Create > Import email template.
4. Enter a name for your template, upload your HTML file, and click Import template.
5. If you open the template from your Templates tab, you’ll see your template’s code in Klaviyo’s HTML editor.
   

1. To access the template in Klaviyo’s drag-and-drop editor, add it to a campaign or flow. If prompted to choose a template type, select Drag and drop.
2. In the template gallery, select Email: saved, select the template you imported, and click Use template.
3. Note the image block, which will either contain a button to upload an image or the image you included.
4. Drag and drop additional blocks above or below the image block, as desired.
   

Add a universal content block

This process is supported for universal content blocks, not universal sections.

1. Create a custom HTML template using your preferred HTML editor.
2. Add the following code snippet to your HTML template. Make sure to place it wherever you’d like to add your universal content block after importing your template.
   

textCopy

<td data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div data-klaviyo-universal-block="block_id_1">&nbsp;</div>
</td>

1. Replace block_id_1 with the ID of your universal content block. To find a universal content block's ID:
   1. Navigate to Content > Universal content.
   2. Open a universal content block to edit it.
   3. The URL for this page will follow this format: https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID.
   4. Copy the block ID from the URL.
2. In Klaviyo, navigate to Content > Templates.
3. Select the Email: saved tab.
4. Click Create > Import email template.
5. Enter a name for your template, upload your HTML file, and click Import template.
6. If you open the template from your Templates tab, you’ll see your template’s code in Klaviyo’s HTML editor.
   

1. To access the template in Klaviyo’s drag-and-drop editor, add it to a campaign or flow. If prompted to choose a template type, select Drag and drop.
2. In the template gallery, select Email: saved, select the template you imported, and click Use template.
3. Note the universal content block(s).

You can add multiple universal content blocks with a single code snippet. To do so, add another div element immediately after the first in the code snippet above, using a different block's ID.

Add a block of another type (i.e., product block, table block)

1. Create a custom HTML template using your preferred HTML editor.
2. Add the following code snippet to your HTML template. Place it wherever you’d like to add your block(s) after importing your template.
   

textCopy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>

1. In Klaviyo, navigate to Content > Templates.
2. Select the Email: saved tab.
3. Click Create > Import email template.
4. Enter a name for your template, upload your HTML file, and click Import template.
5. If you open the template from your Templates tab, you’ll see your template’s code in Klaviyo’s HTML editor.
   

1. To access the template in Klaviyo’s drag-and-drop editor, add it to a campaign or flow. If prompted to choose a template type, select Drag and drop.
2. In the template gallery, select Email: saved, select the template you imported, and click Use template.
3. Note the text block that says Hello world! Drag another block (e.g., a product block) below this block.
4. Delete the text block and add additional custom blocks, as desired.
   

Sample hybrid email template code

The example below shows a functional HTML file with the hybrid code snippet for a text block. Use this code to test the hybrid editor functionality.

  <html>
  <head>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>A simple hybrid email</title>
    <style>
      body {
        background-color: #f6f6f6;
        font-family: sans-serif;
        margin: 20px;
      }
      .main {
        background: #ffffff;
        border-radius: 3px;
        width: 100%;
      }
      .container {
        margin: 0 auto !important;
        width: 600px;
      }
      .wrapper {
        box-sizing: border-box;
        padding: 15px;
      }
      table {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <table class="main">
        <tr>
          <td class="wrapper">This is a very simple HTML email</td>
        </tr>
        <tr>
          <td class="wrapper">
            <table>
              <tr>
                <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
                  <div class="klaviyo-block klaviyo-text-block">
                    Hello world!
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td class="wrapper">{% unsubscribe %}</td>
        </tr>
      </table>
    </div>
  </body>
</html>

Emojis and hybrid email templates

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

Preview your hybrid email

Preview your email on desktop and mobile and send a test email before sending it to recipients. Check the layout, images, links, and any dynamic content in the campaign or flow where you plan to use it. Wait for your changes to finish saving before leaving the editor.

Outcome

After completing these steps, you can add and edit drag-and-drop blocks within the regions defined by your code snippets. The surrounding custom HTML remains outside those editable regions.

Additional resources