< BACK TO BLOG

How to add a button to a table in the Klaviyo email editor

A step-by-step guide with ready-to-use, customizable template

Working with the Klaviyo email editor we recently needed to add a bunch of buttons inside a table, to create a panel like this:

Klaviyo's "side-by-side" template

Klaviyo does not straightforwardly support putting button blocks inside of table blocks in the drag-and-drop editor (see here). So, we decided to share our solution with the community.

In this article we walk through

  • adding a button inside a table in the Klaviyo email editor,
  • customizing this button to fit with your brand styling,
  • adding a link to this button to redirect to your site.

Step-by-step tutorial for adding a button to a table in Klaviyo email editor

1. Create a new email template

Let's first create an email template in Klaviyo. Include in it a table with your product name and product image. The only missing piece is a "Buy" button.

Step one: create a new email template

2. Go to the column and row where you want to place your button

Step two: navigate to the cell where you want to place your button

3. Press Source button in the top - right corner of the email editor

Step three: press the "Source" button in the top-right corner of the email editor

4. Copy the template below and paste it directly into the editor window

Step four: copy-paste the template below into the editor window

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <div style="background-color:#FFFFFF"> <div style="text-align: center; padding-top: 50px; padding-bottom: 25px;"> <a href="www.runconverge.com" style="background-color: #6366F1; padding-left: 50px; padding-right: 50px; padding-top: 18px; padding-bottom: 18px; color: #FFFFFF; font-size: 16px; font-weight: bold; text-decoration: none; border-radius:10px" > BUTTON </div> </div>
5. Press the Source again.

You will see that the button has appeared in the table cell!

Step five: press "Source" in the top-right corner of the email editor

I now repeat the same for Row 3 in columns 2 and 3 to add buttons to the remaining product columns.

Step five: press "Source" in the top-right corner of the email editor

Customizing your button

Now it is time to adjust the style of the button to fit with your brand styling.

The table below explains how each line of the template controls different aspects of the formatting of the button.

Line of the template

What it controls

<div style="background-color:#FFFFFF">Background of the cell in which you place the button.
text-align: centerHorizontal alignment of the button in the cell in the middle (you can change it to right or left if you want your button to be aligned with right or left side of the table cell, respectively).
padding-top and padding-bottomSpace between the top and bottom of the cell and the button, respectively.
href="www.runconverge.com"The hyperlink that you want your button to go to.
"background-color: #6366F1 (in the "href" line)Background color of the button.
padding-left, padding-right, padding-top, padding-bottomSpace between the button edge and the text inside the button.
color: #FFFFFFFont colour of the text inside the button.
font-size: 16ptFont size of the text inside the button
font-weight: boldHow bold you want the font to be. You can choose levels of boldness from `lighter`, `normal`, `bold` and `bolder`.
text-decoration: none(Optional.) We included this to make sure that the text in the button is not underlined. Because the button is a hyperlink, by default the text inside the button will be underscored, unless we include this line.
border-radius:10pxThis controls the shape of the button. Forborder-radius:0px, the button is a rectangle. The higher this number, the rounder the button's vertices, and the more ellipse-like the button becomes.
BUTTONThe text inside of the button.

You can modify these details in the template, before copy-pasting it into your Klaviyo editor.

As you are experimenting, remember that you can always press "Source" button to see the effects of your experiments take effect in the editor.

Tip 1 : Every time you make a change to the template in the "Source" tab, press "Source" again to see how your button design changes in the editor.

Tip 2 : Be careful not to modify any special characters such as <dev> and <a> as well as location of " signs inside the template.

If you modify any of these, the template might not work, and pressing "Source" will prompt Klaviyo to automatically modify your template to something that does work, but likely will look different to your intention.

Conclusion

We have walked through adding a button to a table in the Klaviyo email editor. If you are struggling, or need help wth adjusting the template for your particular brand styling, feel free to reach out and I will gladly help out. If you like this content and would like to read more similar articles, subscribe to our newsletter 😊

Subscribe for the Smart Automation newsletter

Weekly Smart Automation tips and tricks, product updates from Converge, and more!