How to Build Dynamic Blocks in a Flow Email

read
Last updated at:

Overview

Within a flow, you’re able to personalize the content of your emails based on the event that triggers the flow. For example, if someone starts a checkout, you can include product images and prices within an abandoned cart email to encourage recipients to return to their cart and finish their purchase.

While Klaviyo comes prepopulated with a handful of built-in dynamic blocks within the emails in the flow library, you can build out and customize these blocks on your own as well.

In this article, we’re going to build out an abandoned cart dynamic block as an example of how you can use event data within a flow email.

Before You Start

Before you can jump in, you’ll want to make sure that you have an ecommerce integration enabled with Klaviyo. If you're building out the abandoned cart example, and if you’re using a custom integration, make sure it's pulling in checkout started data. If you’re using a built-in integration (i.e. BigCommerce, WooCommerce, Magento, Shopify, etc.), the integration will pull in this information automatically.

Creating a Dynamic Block

Step One: Create Your Flow

First, you must create a flow that is triggered by an event (or metric). In this example, because we are building an abandoned cart block, we need our flow to be triggered by the Started Checkout event. This ensures that we have access to the event data necessary to construct an abandoned cart block.

 mceclip0.png

You can customize any of your flow emails using this same process, but you’ll have to change the metric to have access to other information being pulled into Klaviyo. For example, if you would like to include information in a post-purchase email about the item someone bought, you will need to make sure that the flow is triggered by the Placed Order event.

From there, you can drag and drop an email into the flow, and customize it.

Step Two: Adding a Dynamic Table

First, drag a table block into your email. Typically, you will want to delete the third column and column headers within the block columns as well as the divider, which can be adjusted under the Block Styles tab.

Next, go to Rows. Before inserting any text in the table, switch the table from Static to Dynamic. If you have already written a message in one of the cells, copy the message prior to changing the table to Dynamic, as doing so will automatically erase the contents of a table.

2019-11-19_14-26-00-2.gif

Step Three: Capturing the Event Variable

Go into Preview tab to pull up the available dynamic variables. Then, scroll down to the title for one of the products abandoned in a cart to find the event variable: {{ event.extra.line_items.0.product.title }}. This contains more information about the product than {{ event.Item }}, which is simply the name of the item.

2019-12-30_15-21-32.png

In the image above, the text highlighted in blue is the variable array, yellow is the array number, and orange is the specific variable you want to pull. 

Step Four: Establishing a Data Source for the Dynamic Table

Click Data Source. Here, you will be able to input a Row Collection field, which is the variable array you want to repeat, as well as the Row Alias. By default, they say Items and item, respectively.

You can leave the alias as is, but for Row Collection, paste in the event variable array. Remove the brackets on both sides as well as the number and following text. For example, {{ event.extra.line_items.0.product.title }} becomes event.extra.line_items. This shortened form is called the collection.

image13.png

Step Five: Including a Dynamic Product Title

After the data source is set up, you can move on to using variables to include text in your email. Since this email is for an abandoned cart flow, it’s important to show the name of the product left behind.

To input the product title into the text, navigate to one of the columns. If you want an image in the first column and the text in the second, click on Column 2.

Next, paste in the full event variable once again. This time, replace the collection for the variable (i.e., the text you used for the Row Collection) as well as the following number with the Row Alias, and don’t delete the surrounding brackets. For this example, {{ event.extra.line_items.0.product.title }}now becomes {{ item.product.title }}, since item is the alias.

image11.png

Once you finish the steps above, preview the email to ensure that the title shows up. If it doesn’t appear, double-check the spelling, capitalization, and formatting of the text here and in Data Source against the variable shown in the preview window.

Step Six: Adding an Image

To insert a dynamic image, you need to find the event variable for the image in the preview window. Often, this variable is listed under image, img, or src, but it depends on your integration. Here, it is under src: {{ event.extra.line_items.0.product.images.2.src }}. Note in this tag, we are specifically referencing the third image (0, 1, 2, etc.) in the event variable array that holds images (event.extra.line_items.0.product.images). This is an event variable array within the event variable array event.extra.line_items, which holds the images for this specific item.

Once you have this variable, head to the column where you want to display the image (Column 1, in this case) and change it from Text > Image. Choose Browse and then select Placeholder.

image25.png

Input the image event variable, replacing the collection and following number with the alias; here, {{ event.extra.line_items.0.product.images.2.src }} becomes {{ item.product.images.2.src }}. Then, click Save.

Note that if there’s a number near the end (such as the 2 in this example), it should not be removed.

image7.png

In addition, check the Fill Image Area checkbox and set the pixel size (250 px is good in most cases).

image9.png

Once you finish making changes, click Save and preview your image to make sure it appears as expected. If an image doesn’t appear, check the spelling of the variable under Placeholder against the one in the preview window.

Step Seven (Optional): Showing the Quantity and Total of a Product

If you want to show the quantity and total price for each product, navigate back to the column where you added the product title.

Type in “Quantity:” in the text box. Next, navigate to the preview window to find the event variable -- for example, {{ event.extra.line_items.0.quantity }}.

image23.png

After exiting this window, paste the variable next to “Quantity,” replacing the collection and number with the alias.

For the total, use the line_price event variable (e.g., {{ event.extra.line_items.0.line_price }}), which will show the total price of a product based on the quantity. For instance, if you have a lipstick that costs $12, and someone has added two of them, the line price will show as $24.

image22.png 

As with the quantity, write in “Total:” and replace the collection with the alias. To display the currency, either add in the currency symbol before the brackets — for instance, ${{ item.line_price }} — or add % currency_format inside the brackets and before the event variable as well as another % before the closing brackets — for example, {% currency_format item.line_price %}. Note that the currency format tag cannot be used with the float format filter.

image15.png

Adding a Float Format Filter

By default, numbers will be shown as X.0 (with at least one decimal place). If you’d like to change this format, you can do so with the float format filter. Adding |floatformat:0 into the brackets will get rid of the decimal point and following number while |floatformat:1 will display with one number after the decimal point, |floatformat:2 will display with two, and so on. Learn more about using filters. 

Step Eight (Optional): Linking to the Product Page

To link either a dynamic image or text to the associated product page, head to the preview window and locate the event variable for the product handle.

image2.png

Depending on the properties passed on the event, the structure of this link may differ. For example, an event property may contain the full URL to a product or it may only contain the path, in which case it will need to be combined with the store URL. Below, we've laid out what the product link would look like for the Started Checkout event from our more common integrations when item is the Alias.

  Event Variable Final Tag
BigCommerce {{ event.extra.items.0.product.url }} {{ organization.url }}{{ item.product.url }}
Magento 1 {{ event.extra.line_items.0.product.key }} {{ organization.url }}{{ item.product.key }}
Magento 2 {{ event.Items.0.Product.FullURL }} {{ item.Product.FullURL }}
Shopify {{ event.extra.line_items.0.product.handle }} {{ organization.url }}products/{{ item.product.handle }}
WooCommerce {{ event.extra.Items.0.URL }} {{ item.URL }

If you use the organization.url tag, you must set your link protocol to <Other> instead of http or https.

You may notice when using {{ organization.url }} to show a certain product that it leads to a broken link. This happens because Klaviyo populates your website URL in the template using the {{ organization.url }} tag, which pulls directly from the URL you have inserted in your account settings. Removing the forward slash (/) in your account settings can resolve this issue. 

image5.png

Alternatively, you could type out your store URL directly followed by products/ and the variable for the item product handle (for example, {{ item.product.handle }}).

2020-06-05_17-50-45.png

Step Nine: Previewing Your Email

After completing the steps above, the email template should look similar to the one below.

image4.png

To see how this would look in an email, and to make sure the links work properly, click the Preview tab on the left-hand side and either preview the email directly in Klaviyo or send it to yourself. An example of the former is shown below.

image16.png

You can use these same concepts to build out additional dynamic blocks for flows triggered based on different metrics.

Summary

To recap:

  1. Create a flow triggered off of metrics pulling in
  2. Set your block to be dynamic
  3. Preview the email to get the event data that you want to use
  4. In Data Source, enter the row collection and row alias
  5. Add product title
  6. Place in a placeholder image
  7. Add product price and quantity, if desired
  8. Link to product, if desired
  9. Preview

Additional Resources

x
Was this article helpful?
141 out of 246 found this helpful