< BACK TO BLOG

How to make a table with dynamic columns in Klaviyo

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

Working with the Klaviyo email editor, we have recently wanted to create a table where we display up to three elements.

Specifically, we want to show to the recipient the products they have recently purchased, so that they can easily "refill" by just clicking a "buy again" button in the email.

In Klaviyo, you could use dynamic tables to achieve this. A dynamic table will use properties of the metric that triggered your Klaviyo flow to create a table with as many rows as there are elements specified in the metric properties.

While this sounds like what we need, there are two issues with using Klaviyo's default dynamic table:

  • 1.
    The layout is always vertical (item under item).
  • 2.
    You cannot directly control how many items to display.
As a result, if the customer has recently purchased 5+ items, we can end up with an ugly, long list of products, ruining our beautiful email design.

Instead, we would like to be able to create a table that will contain up to three products that were ordered recently, and we want to display them horizontally, as shown in the example below. Notice how, depending on how many products were purchased, the number of items in our table changes from one to two and three.

Example of a dynamic-column table.

A step-by-step tutorial for adding a table with dynamic columns in Klaviyo email editor

1. Set up a Flow, triggered by the Placed Order metric.

We will use the Placed Order Metric created automatically by the Shopify integration. This metric is automatically sent to our Klaviyo whenever a customer makes an order in our Shopify store.

Set up a Flow triggered by the Placed Order metric.

2. Add a new email to the Flow, and go to the email editor.

This can be one of your email templates.

3. Add a text block to your email.
Add a text block to your email.
4. Press the "Source" button in the upper-right corner of the email editor.
Press 'source' in the upper-right corner of the email editor.
5. Copy the template below and paste it into the editor.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <table width="100%"> <tbody> <tr> {% for item in event.extra.line_items|slice:'3' %} <th width="(100/3)%"> <div> <img src="{{ item.product.images.0.src }}" style="max-height:175px; display: block; margin-left: auto; margin-right: auto;" /> </div> <div style="text-align: center;padding-top:25px"> {{ item.product.title }} <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"> Buy again </a> </div> </div> </div> </th> {% endfor %} </tr> </tbody> </table>
6. Press the Source again.

You will see that the table looks like in the screenshot below.

Press "Source" in the top-right corner of the email editor
You might think it doesn't look right---but you will be able to see the email with the images and names of the products once you press "Preview".

Press "Source" in the top-right corner of the email editor

Customizing your table

Once we have pasted the basic template above into our email, it is time to adjust its formatting to fit with our brand styling. The table below explains what is controlled by the different lines of the template.

We do not discuss the styling of the "Buy again" button here (lines 13-31). You can read a detailed overview of styling the button in this article.

line #

Line of the template

What it controls

3 event.extra.line_itemsThe name of the variable inside the Placed Order metric that you want to use. If you use another metric, you can find the correct variable name in the "Preview" window. (You can read more about Klaviyo variables here)
3slice:|"3"This controls how many items (products) will be fitted into your table. Note: if you want to increase the number of items in the single row from three to 4 or 5, you will also need to adjust line 4: namely, you will need to change width="(100/3)%", to width="(100/4)%" or width="(100/5)%", respectively. This will ensure that the table row does not become larger than the text above and below the table which could make your email look ugly, or even not render correctly on smaller screens.
6 item.product.images.0.srcThis is the Klaviyo variable address of the URL of the product image. If you are using the default Placed Order metric provided by the Shopify integration, this default value should work and does not require adjusting to display the correct product image.
7max-height:175pxThe maximum height of the image. By setting the maximum height we make sure that the product images don"t get too large, and are of the same size.
12 item.product.title This is the Klaviyo variable address of the name of the product. If you are using the default Placed Order metric provided by the Shopify integration, this default value should work and does not require adjusting to display the correct product name.
28Buy nowThe text inside of the button. (See this article for a complete explanation of how to style the button in lines 13-31.)

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> , <a> and %, 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!