Adding Dynamic Content in Beefree for Klaviyo

*The syntax for the before condition is the following based on the Klaviyo documentation:

{% if person|lookup:'Favorite Color' == 'green' or 'green' in person|lookup:'Favorite Color' %}

*The syntax for the after condition is the following:

{% endif %}

6. Perform the same steps on the row with the content for folks with a favorite color equal to yellow. Note that the only change in the syntax from the previous step is to change "green" to "yellow".

7. Export your design to Klaviyo.

8. Use Klaviyo to send the email.

You'll notice the rows wrapped in the conditionals display a row's content based on the Favorite color property.

The following image shows the final result for an email sent to an individual in the "Favorite color = green" segment.

The following image shows the final result for an email sent to an individual in the "Favorite color = yellow" segment.

Dynamic Content in Beefree to Create Product Loops in Klaviyo

In the following example, we will explore how to leverage both Display Conditions and Merge Tags within Beefree App to create a Product Loop. We will also explore how to add JSON as a custom profile property within Klaviyo as a prerequisite to setting up the loop. Take the steps outlined in the following sections to add product loop Klaviyo syntax within Beefree, and follow along with the example scenario.

Loop Prerequisites

Prior to adding the product loop syntax within Beefree, ensure you have a custom profile property for your customers within Klaviyo.

Take the following steps to achieve this:

1. Create a new List within Klaviyo. In this example, we created one called “Abandoned Cart”.

2. Click Import contacts to upload a .CSV file with your contacts.*

3. Confirm the information and click Next to complete the upload.

For this example, we are using the following JSON for a customer who loves yellow and added yellow clothing items to their cart before abandoning it. 

[
{
"product_name": "Yellow t-shirt",
"price": 19.99,
"quantity": 1,
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT3VM83dh9a-yuMH5-yu8jeQZK6-nHGAI2bKg&s=",
"product_url": "https://www.target.com/s/yellow+shirt"
},
{
"product_name": "Yellow shorts",
"price": 29.99,
"quantity": 2,
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCEiM412YUpO0mou51izxter00hOoF9Cs2e0kKjJSCSVMdiLNEYbI-5h15OPznoANBd3A&usqp=CAU",
"product_url": "https://www.target.com/s/mens+yellow+shorts"
}
]

For this example, we are using the following JSON for a customer who loves green and added green clothing items to their cart before abandoning it. 

[
{
"product_name": "Green t-shirt",
"price": 19.99,
"quantity": 1,
"image": "https://media.istockphoto.com/id/1346570499/photo/smiling-climate-activists-in-public-park.jpg?s=612x612&w=0&k=20&c=5RLd1Dr-zPsSzqn4eZX1rOeqQcstlrJW0cIlYMsCKRo=",
"product_url": "https://www.target.com/s/green+t+shirt"
},
{
"product_name": "Green shorts",
"price": 29.99,
"quantity": 2,
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqrblpnHi7gldR9rjWB5-GfJNAi_VFsueGdQ&s",
"product_url": "https://www.target.com/s?searchTerm=green+shorts&tref=typeahead%7Cterm%7Cgreen+shorts%7C%7C%7Chistory"
}
]

*Ensure that your .CSV file has a similar structure as the one displayed below. The most important part of the .CSV file is the column called abandoned_cart with the JSON inside of the cells.

Ensure that you save your JSON as a List within Klaviyo so it registers the format correctly. The following image shows an example of this.

Now, it is time to head over to Beefree and add the Display Conditions and Merge Tags syntax to loop through the JSON within an email.

To achieve this loop, we need to take the following steps:

1. Create new Merge Tags within Beefree.

2. Add the correct syntax to those new Merge Tags based on the Klaviyo documentation.

3. Add syntax for dynamic images.

4. Add syntax for dynamic urls within the Button content block.

5. Add the Merge Tags inside the row.

6. Wrap the row with Display Conditions syntax.

We’re going to walk through the sub-steps for each of these steps in the following sections.

Create new Merge Tags within Beefree

Use the tag syntax examples from the Message personalization reference documentation as merge tag syntax within Beefree. Based on the JSON examples shared in the Loop Prerequisites section, we are going to create the following Merge Tags within Beefree.

You can copy and paste the syntax displayed in the image from the table below.

After we create these merge tags within the Workspace Settings, we'll navigate to the builder to start adding them to the email design.

Add syntax for dynamic images

To add the syntax for dynamic images, take the following steps:

1. Inside of the row you want to wrap with the Display Conditions, drag and drop an Image content block.

2. Click on the Image content block inside the builder.

3. Navigate to Content Properties.

4. Toggle on Dynamic image.

5. Paste {{ item.image }} inside the Dynamic url field.

The following image shows a visual example of how this should look within the builder.

Add syntax for dynamic urls within the Button content block

Take the following steps to add dynamic urls within the Button content block:

1. Drag and drop the Button content block onto the builder stage.

2. Navigate to Content Properties on the right-hand side of the screen.

3. Set the Link type to Open Web Page.

4. Paste {{ item.product_url }} inside the Url field.

The following image shows a visual example of how this should look within the builder.

Add the Merge Tags inside the row

Take the following steps to add Merge Tags within the row:

1. Drag and drop the paragraph content block onto the stage.

2. Inside the paragraph block add the text and merge tag you’d like to see within it. For example: “Quantity: Item quantity”. Item quantity in this example is the name of the merge tag that we made in the Create new Merge Tags within Beefree section.

3. Add the remaining Merge Tags created in the previous sections to the row.

The following image shows a visual example of how this should look within the builder once all the merge tags are added to the email design.

Wrap the row with Display Conditions syntax

The steps outlined in this section are what make the product loop possible. Take the following steps to wrap the row with the Display Conditions syntax:

1. Navigate to the Row Properties.

2. Scroll down until you access Display Conditions.

3. Click Add a condition.

4. Complete the required fields:

   • Name

   • Description

   • Before*

   • After*

You can copy and paste the syntax for the Before and After fields from the following snippets:

*Before syntax

{% for item in person|lookup:'abandoned_cart' %} 

*After syntax

{% endfor %}

Once complete, the Display Conditions modal looks like the following:

Now that these steps are complete, you can take the steps outlined in Exporting a Design to Klaviyo to add your new email design to a Flow or Campaign within Klaviyo.

Once the design is in Klaviyo, we can send it to customers. The following image show the email result for the customer who added yellow clothing items to their shopping cart.

The following image show the email result for the customer who added green clothing items to their shopping cart.

HTML that Beefree Created

Reference the HTML Beefree created for this example to see how the syntax added through Merge Tags and Display Conditions looks within the HTML code.

Note: The syntax used throughout this example is specific to Klaviyo. Other sending platforms utilize their own syntax to achieve similar behaviors.