How to Use HTML in Klaviyo Template Editor

Joseph Hsieh

January 17, 2020

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”

how-to-use-html-in-klaviyo-template-editor_4
Go to “Email Templates” and click on “Create Template”

Click on “Import”. In the “import” section click “Browse” to upload an HTML file or click on “Paste HTML instead” to paste the code.

how-to-use-html-in-klaviyo-template-editor_5
Click on “Import”. In the “import” section click “Browse” to upload an HTML file or click on “Paste HTML instead” to paste the code.

Click on the “Import Template” button to create the template.

You can now find, edit and preview your HTML template in the “Email Templates” section.

NOTE: When you import an HTML email, the Klaviyo Template Editor is not available – so you need to edit and create the HTML source code directly.

Recent Posts

How to Disable or Enable the Double Opt-in Process in Klaviyo

What is "Double Opt-in" and how to disable it in Klaviyo.

How to A/B Test the Sending Time of Campaigns in Klaviyo

Learn how to A/B test the sending time of campaigns in Klaviyo.

How to A/B Test Subject Line and Content in Campaign Emails in Klaviyo

Learn how to A/B test your campaigns in Klaviyo.