How to add a button to a table in the Klaviyo email editor
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 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 editor1. 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.
You will see that the button has appeared in the table cell!
I now repeat the same for Row 3 in columns 2 and 3 to add buttons to the remaining product columns.
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
| ||Background of the cell in which you place the button.|
|Horizontal alignment of the button in the cell in the middle (you can change it to |
|Space between the top and bottom of the cell and the button, respectively.|
|The hyperlink that you want your button to go to.|
|Background color of the button.|
|Space between the button edge and the text inside the button.|
|Font colour of the text inside the button.|
|Font size of the text inside the button|
|How bold you want the font to be. You can choose levels of boldness from `lighter`, `normal`, `bold` and `bolder`.|
|(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.|
|This controls the shape of the button. For|
|The 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
<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.
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!