Skip to main content
All CollectionsIntegrationsKlaviyoπŸ“• Using the Klaviyo Integration
Adding Product Recommendations to a Klaviyo Email with Dynamic Blocks
Adding Product Recommendations to a Klaviyo Email with Dynamic Blocks

#integrations #klaviyo #personalization #quiz #step-by-step

Mark Baek avatar
Written by Mark Baek
Updated over a week ago

Once you've set up the correct type of flow in Klaviyo, any emails you add inside of this flow can display quiz data dynamically.

There are many ways to do this, but the one this guide will highlight is using a dynamic block to display products.

πŸ’‘ What you'll learn


πŸ’‘ Prerequisites

Metric-triggered flows must target the quiz completed event which is available on Octane Plus.


How does it work?

Dynamic variables are bits of code you can add to emails that turn into customer data when the email is sent. Here's a simple example:

Inserting a first name into an email:

Hi {{ first_name }},

Thanks for subscribing!

In this example, {{ first_name }} is a variable that will turn into the first name listed in the subscriber profile that receives the email. These variables can also access custom properties and event data, which means you'll be able to use variables based on data passed from a quiz.

This guide will go over 3 methods of using dynamic variables to add product recommendations:

  • Dynamic tables: useful for when the number of final products varies.

  • Variables per product recommendation slot: useful when you want to show a static amount of products (for example, always showing 3 products in emails).

  • Show/hide logic: this option lets you add conditions based on dynamic variables to any template block you add to an email.

Before going into each option, here's a quick reference for the variables that represent each part of a product recommendation.

πŸ—’οΈ What does it turn into?

✍️ Variable

Name

title

ID

id

Product page URL

link

Image

image

Price (formatted in default currency)

price_formatted

Description

description

Tags

tags

Type

type

πŸ’‘ Mastering Klaviyo's dynamic variables

This guide will help you set up a dynamic table which is the recommended method for inserting data from quiz completions.

By familiarizing yourself with Klaviyo's variables feature, you can unlock a ton of customization. For example, setting up the table in this guide with event.products_all|slice:'3' instead of just event.products_all will allow you to limit the table to 3 products (explained more in-depth ahead in this guide).

Here are some resources that can make you a master at building powerful email templates in Klaviyo:

Using variables in a dynamic table

PROS:

βœ… Quickest & simplest to put together.

βœ… Flexes automatically to the number of products recommended.

CONS:

❌ Must know HTML to style.

❌ Can clog up email if there are too many products.

Dynamic tables are the quickest method to use for inserting products into emails, but they give the least control over styling unless you're savvy with styling emails using HTML code.

🎬 VIDEO: Creating Dynamic Email Content with Quiz Data

OPTIONAL: Check out a quick video demo on creating a dynamic table with quiz data.

πŸ“• How to create a dynamic table using quiz data.

  1. Make sure you're editing your email inside of your quiz completed metric flow.

  2. Add a table block into your email from the left menu.

  3. Inside the table block, go to the Table Settings tab.

  4. Under "Table data", change the table type to Dynamic. Two fields will appear called "Row collection" and "Row alias".

  5. Under Row collection, type in event.products_all. This tells the table where to pull data from inside of your quiz completed event.

  6. Under Row alias, type in a nickname for the row collection. This will let you reference the row collection without having to type out event.products_all each time.
    ​
    For example, if you enter quiz as the row alias, you can insert product titles by typing {{ quiz.link }} instead of {{ event.products_all.link }}.

πŸ“• How to add content to a dynamic table

For this example, we'll assume you entered quiz as the row alias, but if you used a different alias, replace quiz with that alias instead.

  1. With the dynamic table open, go to the Content tab.

  2. With the text column highlighted, type in {{ quiz.title }} into the text body. This will turn into the title of each product recommended in a customer's result.

  3. Under DYNAMIC ROWS, switch to the image column & click on Add Dynamic Image / Browse Image.

  4. In the Dynamic variable or dynamic URL field, type in quiz.image (replace quiz with your row alias).

  5. Save changes to your table & preview the email to see the dynamic table in action.

πŸ’‘ Limiting dynamic table expansion

The filter |slice:'<insert number here>' can be added to the row collection field to limit how many products the table will expand into.

Just replace <insert number here> with the number of products you'd like to limit the table to. event.products_all|slice:'4' would limit the table to 4 products while event.products_all|slice:'2' would limit the table to 2, and so on.

Here's a glossary on all of the variable filters you can use to power up your flows.

Using variables based on product recommendation slot

PROS:

βœ… Easy to incorporate into email layout.

βœ… Easy to setup each block.

CONS:

❌ Does not automatically flex to the number of product recommendations.

This method works best if you want to display an exact amount of products in an email each time. This is because the blocks you add are static, instead of dynamic - if you create 3 product slots with this method, but your quiz only recommends 2 to a customer, they'll see a blank spot where the 3rd product was meant to be.

It's easier to show an on-brand set of products this way, so it can still be a good method if your quiz recommendations vary in amount with each result. You'll just have to use the minimum possible number - for example, if your quiz can show 3-5 products at the end, you would want to build an email with 3 products only.

πŸ“• Finding product variables in the email Preview

  1. Open an email inside of your quiz completed metric flow.

  2. Click on the Preview button.

  3. In the right menu, under Preview Event Info, hover over a variable under "products_all".

  4. Click to copy the variable code.

This preview method will let you easily copy the variable to a piece of product data from a quiz result. For example, if you hover over the image variable of a recommended product and click, you may end up copying the code {{ event.products_all.0.image|default:'' }}.

Here's a breakdown of how the variable works:

  • event.products_all is the section of the event data that holds products.

  • 0 is the product slot, which begins at 0. This means 0 is the 1st product, 1 is the 2nd product, 2 is the 3rd product and so on.

  • image is the specific part of the product this represents, which would be the product image in this case.

  • default:'' is what's shown if there's no available data. For example, if you changed this to default:'No image', the text "No image" would display if the image data was missing. This portion is optional.

To put this together, you could add the code {{ event.products_all.0.image }} into an image block and it would transform into the image of the 1st product. To show the image of the 2nd product, you would change it to {{ event.products_all.1.image' }} while {{ event.products_all.2.image' }} would be an image of the 3rd product and so on.

This method isn't restricted to just tables, letting you use variables with different types of blocks for flexibility.

Did this answer your question?