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
How does it work? (jump to section)
Using variables in a dynamic table (jump to section)
Using variables based on product recommendation slot (jump to section)
💡 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 |
|
ID |
|
Product page URL |
|
Image |
|
Price (formatted in default currency) |
|
Description |
|
Tags |
|
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.
Make sure you're editing your email inside of your quiz completed metric flow.
Add a table block into your email from the left menu.
Inside the table block, go to the Table Settings tab.
Under "Table data", change the table type to Dynamic. Two fields will appear called "Row collection" and "Row alias".
Under Row collection, type in
event.products_all. This tells the table where to pull data from inside of your quiz completed event.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_alleach time.
For example, if you enterquizas 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.
With the dynamic table open, go to the Content tab.
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.Under DYNAMIC ROWS, switch to the image column & click on Add Dynamic Image / Browse Image.
In the Dynamic variable or dynamic URL field, type in
quiz.image(replace quiz with your row alias).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
Open an email inside of your quiz completed metric flow.
Click on the Preview button.
In the right menu, under Preview Event Info, hover over a variable under "products_all".
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_allis the section of the event data that holds products.0is the product slot, which begins at0. This means0is the 1st product,1is the 2nd product,2is the 3rd product and so on.imageis 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 todefault:'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.
