This guide will show you how to dynamically turn content blocks in Klaviyo (like image, text & button blocks) into a set of product recommendations from quizzes.
💡 What you'll learn
What to know about adding product recommendations with content blocks (jump to section)
Adding content blocks to the email (jump to section)
Turning the content blocks dynamic (jump to section)
💡 Prerequisites
Before the steps in this guide can be followed, you must create a metric flow using a quiz completed event first.
Octane Plus is required to dynamically insert product data into Klaviyo flows.
What to know about adding product recommendations with content blocks
There are many ways you can use variables to create product recommendations, but the steps in this guide are useful when your quiz has a static amount of recommendations.
If the number of products at the end of your quiz changes for each results, this format will not adapt to a changing amount of products.
For example, if you set up your email to show 3 sets of products, but someone's results only show 2 products, an empty space will display instead.
Adding content blocks to the email
This guide will add 3 product recommendations, but the methods here can be adapted to any number of products.
📕 Setting up your content section
Open the email you want to edit inside of the metric flow you created for your quiz.
From the left menu in the email editor, drag-and-drop a section into your email.
Next, drag-and-drop a column into the section.
📕 Creating your product layout
Drag-and-drop image blocks into each column.
Underneath each image block, drag-and-drop a text block.
Drag-and-drop button blocks underneath each text block.
For the next step, we'll add variables to each block that will turn them dynamic when the flow receives data from a customer's quiz completion.
Turning the content blocks dynamic
📕 Accessing quiz data in the email preview
In the email editor, click on Preview & test in the top right section of the editor.
On the right side of the preview, data from quiz opt-ins will be displayed under Preview Event Info.
Hover over a variable like description or image and click to copy the variable that represents that data.
💡 How variables represent product data
Each part of a product is passed into Klaviyo as a separate piece.
For example, product images have their own variable, as do titles, product page links and so on.
The variable for a product title might look like this:
{{ event.products_all.0.title }}
event.products_allis the section of the customer's quiz data that holds product data.The
0represents the 1st product recommended in a quiz (1would represent the 2nd product,2would be the 3rd product and so on).titleis the exact piece of data that the variable is pulling. You could change this toimagefor the product image,linkfor the product page link and so on.
📕 Making the image blocks dynamic
The 1st product in your quiz results will be under the expandable "0" section. Find the image variable.
Click on image to copy the code - it should look like
{{ event.products_all.0.image|default:'' }}.
Exit from the preview, and open one of your image blocks.
Under Upload an image, click on "Browse Image Library".
Instead of uploading an image, switch to the "Dynamic Image" tab on the left.
Under Dynamic variable or dynamic URL, paste the code you copied from the Preview.
Repeat these steps for each image block.
The code for the 2nd product's image should be
{{ event.products_all.1.image|default:'' }}.The code for the 3rd product's image should be
{{ event.products_all.2.image|default:'' }}.
Next, we'll repeat the same process to turn the text blocks into product titles.
📕 Making the text blocks dynamic
Open the email preview again.
Under the Event Properties section, find the title variable under "0".
Click on title to copy the variable, which should be
{{ event.products_all.0.title|default:'' }}.Exit out of the preview and paste the variable into the 1st text block.
Repeat the steps for each text block.
📕 Adding the product page link into buttons
A direct add to cart can't be added into a Klaviyo email from the quiz, so instead the button blocks will be used to link to each product page.
Open the email preview again.
Under the Event Properties section, find the link variable under "0".
Click on title to copy the variable, which should be
{{ event.products_all.0.link|default:'' }}.Exit out of the preview and open the button block in the 1st column.
Paste the variable in the button's URL field.
Repeat the steps for each button block.
Once completed, here's what the section should look like. When previewed inside of the quiz completed flow, each block should transform into the respective pieces of quiz data.
