Tutorial

Creating vertically stacked abandoned cart tables

  • 20 June 2022
  • 5 replies
  • 1669 views
Creating vertically stacked abandoned cart tables
Userlevel 4
Badge +3

Dynamic table blocks don’t always have to show a product and its description side by side in the traditional horizontal format. In fact, you can build a dynamic table block that stacks vertical where your product details are highlighted underneath your product image!

The directions of this post are very similar to the last post - Building a dynamic table block using event data - showing how to create a dynamic event table from scratch. The only difference here, is the image will be added within the text portion of the table, through the image button. So, the directions will be the same until the last paragraph where I discuss how to add in an image to the text.

Dynamic event data will only show when the email is inside of an event based flow (abandoned cart, etc). For this example, I will be talking about abandoned cart, but this process can be used with other event triggers as well. This data shows information on what the customer did when on your website. In a flow email, add in a table block. Under table settings, turn to Dynamic. Go to preview tool for started checkout, find the repeating beginning variable for each item. IE: for price, name, quantity each of these begin with ‘event.extra.line_items’. This repeating string will be used for the row collection under table settings. Add in just the repeating string for row collection, nothing else. So, event.extra.line_items under row collection. Row alias can be anything you want, this one word will represent the whole ‘event.extra.line_items’ string. I suggest adding in ‘item’ for row alias. So, everytime ‘item’ is used in the dynamic table, it is actually loading in ‘event.extra.line_items’. We do this so that all products in someone’s abandoned cart can load in, rather than just the first item.

Now, to bring in specific product information, go to preview, copy ‘product name’ (or any variable, you want to pull in). Paste into the text portion of the dynamic table, and replace the whole first string with ‘item’, your row alias. So if the product name in the previewer is ‘event.extra.line_items.product.title’ you change this in the text block to ‘item.product.title’. Now, this will load in all product title’s in someone’s abandoned cart. 

This process can be repeated for any variable in the previewer. Note: for product price, to have the price formatted as $X.XX, remember to add |floatformat:2 into the string. Ex: {{item.price|floatformat:2}}. You can pull in any information that is available in the previewer, if the information is not available in the previewer, then it cannot be pulled in because Klaviyo is not capturing it. Also please note, this example was based on Shopify. Other integrations may use a different repeating string/names for variables but the premise remains the same; find the repeating factor, use this for row collection, set a row alias, and then add the content to the table with the row alias and the individual variables.

In order to have the content stacked, under Table Settings delete any columns other than one, so the dynamic table is one column. Under Content, in the one column (that should be text) select the ‘Add Image’ button, screenshot attached below. This button allows you to add an image within text. The image URL is where the image should be pulled from. If you’re using Shopify, the image source URL is: {% if item.product.variant.images.0.src %}{{ item.product.variant.images.0.src }}{% else %}{{ item.product.images.0.src|missing_product_image }}{% endif %}

You can add an image max width/height - I suggest around 200px for each.

This source URL, can be found by looking at your default abandoned cart flow, selecting into the dynamic event table, selecting the image, and copying the placeholder link. This process can be repeated by any integration, not just Shopify. Screenshots attached of this. 

In conclusion, the stacked abandoned cart table is created by the usual process of creating a dynamic event table, but the last step being to make the table one column, adding an image button, and pasting in the usual placeholder link, as the image source link. 

 


5 replies

This was a great article. I was wondering if there is a way to create a grid of repeated columns using this method, or if we are forced to show single results stacked in rows. OR maybe these cart abandonment emails can only show one item of the cart in an email regardless if they had 1 or 10 items in their cart. I have wondered that for a long time.

Badge +3

Hey there! I do have a question, I am using Klaviyo’s new builder to build an abandoned cart email now. However, certain tags are not showing when I preview it.

1. Is there anything wrong with my tags for quantity? as the previews are not showing correctly 

2. I would like to link the individual product image with the final incomplete checkout URL, how do I do so? It would be great to have a video tutorial as guidance. Thanks! 

Quantity is not showing in the preview


 

The tags that I input

 

Userlevel 7
Badge +60

Hey @stellapuivoon,

It looks like you may be having trouble with your {{ item.quantity }} tag not being recognize as an actual variable. I’ve seen this happen from time to time if you were copy and pasting the code from one source to another and may have brought over some latent or encoded formatting. For this reason, when copy and pasting into the template editor, we suggest pasting without formatting. You can do this by either using Ctrl+Shift+V instead of Ctrl+V on a PC or if you’re using a Mac, you would use the Option+Shift+Command+V commands. We also have the clear formatting tool that @Anna McCarthy explains in her New and Classic Editors: Clearing External Styles Community post. 

I don’t see why you wouldn’t be able to setup a hyperlink for your dynamic image when you’re building vertically stacked abandoned cart tables. After applying the placeholder image, you can apply a hyperlink to an image by using one of three options:

  1. Right click on the image and select the Link option
  2. Highlighting the image and using the hyperlink shortcuts (Ctrl+K on PC or Command+K on Mac)
  3. Highlighting the image and selecting the hyperlink tool from the template editor (chain link icon)

If you haven’t had a chance to take a look yet, I think you’ll also find Anna’s Building a dynamic table block using event data post really helpful as it goes into more details about building a normal dynamic table block with event data. 

I hope this helps!

David

Badge +3

Hey David! Thanks for the detailed explanation. I’ve figured out the ‘Quantity’ part!
One of my issue I am facing is that the checkout URL seems to be not working when I applied the steps (shown in the attached image) for my product images. Is there anything that I can do about it? 
 

 

Userlevel 7
Badge +60

Hey @stellapuivoon,

Glad you got the “Quantity” portion figured out!

This sort of behavior may be one you’ll want to investigate further within your Shopify backend and/or with your developer. I would recommend starting your investigated from the URL that you’re being led to after clicking on the image.

Klaviyo overall is an ingestion engine and is simply displaying data shared to it from the Shopify Started Checkout event - this includes the URL referenced from the {{ event.extra.checkout_url }} variable. 

You may find some helpful tips in past Community posts of a similar subject as well:

David

Reply