Klaviyo : How to Use HTML in Klaviyo Template Editor

Klaviyo’s Email Template Editor has a great selection of built-in layout options and settings that you can use to easily drag and drop different elements to create an email. However, in some cases, the drag and drop Blocks may have some limitations. In this guide, we’ll show you how to add an HTML block so you can add just about anything you can create with custom HTML.

Adding HTML with a Text Block

The Text Block can be used to add an HTML Block to your layout. To edit the HTML on any text block in Klaviyo’s template builder, click on the Text Block and then click on the “Source” button from the top right corner of that block’s settings.

how-to-use-html-in-klaviyo-template-editor_1 — Click on the Text Block and then click on the “Source” button from the top right corner of that block’s settings.

This will reveal the HTML source code of the block. Here, you can see the standard HTML markup with the “h” and “p” tags. The style of these elements inherits its properties from the general “Styles” settings of the template builder.

how-to-use-html-in-klaviyo-template-editor_2 — Klaviyo Template Editor – General “Styles” Settings.

Here, you can set the paragraph and headings text style.

But if you are savvy with HTML/CSS and you want to make more custom layouts, you can do that directly in the source of the Text Block to override the Style settings.

Build a Custom HTML Table to Merge Rows and Columns

One example of where you can use custom HTML in Klaviyo’s template builder is to create custom HTML tables. While the Klaviyo’s native Table Block has many of the necessary options in it, it doesn’t have the option to merge cells (colspan and rowspan).

If you want to merge rows or columns in a table you’ll have to create your own custom table. You can do that in the text block by editing it’s source code.

This is an example of a custom table with two rows merged.

how-to-use-html-in-klaviyo-template-editor_3 — This is an example of a custom table with two rows merged.

Here, we’re using an example of a Block that shows a custom layout with sneakers.On the right column in the merged rows we have one image that shows someone wearing the sneakers. On the left column we have two rows that show slightly different variations of the product. By using two separate images, we can easily link the images to different products in the store.

In the “Source” of the Text Block you can basically include any HTML/CSS elements to customize the layout of that block.

Here’s the HTML Code for this particular example:

<style type="text/css">

.table{
   width: 100%;   
  }
.trow {
 border: 1px solid #f0f0f0;
  }
.product {
   border: 1px solid #f0f0f0;
  }
.variation {
   border: 1px solid #f0f0f0;
   width: 40%;
  }
</style>
<table class="table">
    <tbody>
       <tr class="trow">
           <td class="variation"><img src="https://d3k81ch9hvuctc.cloudfront.net/company/PnURcC/images/b96669f5-f285-4f40-8b9d-c4f23de274da.png" /></td>
           <td class="product" rowspan="2"><img alt="Vehicle Category" src="https://d3k81ch9hvuctc.cloudfront.net/company/PnURcC/images/30ca4bde-dd87-4f02-8a24-1143ca24ae1b.png" /></td>
       </tr>
       <tr>
           <td class="variation"><img alt="Off-Road Vehicle" src="https://d3k81ch9hvuctc.cloudfront.net/company/PnURcC/images/02893216-46f6-458f-a1a1-51eb29f6da2a.png" /></td>
       </tr>
    </tbody>
</table>

One final note. Although it’s tempting to use HTML for every block in your layout, we recommend avoiding custom HTML/CSS in your email unless it’s absolutely necessary or you have a lot of experience with writing HTML/CSS for email. Klaviyo’s template editor has all the necessary blocks to build just about any layout you desire and it’s battle tested to work well across a wide variety of desktop and mobile email clients.

NOTE: Using the “Source” section of the Text Block is recommended only for partial HTML implementations in your emails. If you want to code your entire email from scratch, follow the instructions below.

Creating an Email Template Completely with HTML

In some cases, you may want to import the raw HTML of a complete email that you may have already created from another tool or source. Klaviyo supports complete HTML emails by importing the HTML file or copy and pasting the source.

Go to “Email Templates” and click on “Create Template”