How to build an Order Reminder flow in Klaviyo

This article will take you through building an order reminder email from scratch, including 1-click actions and lists of products. Our finished result will look something like this:

Order_Reminder_Goal.png

Before you start, having an idea or sketch of the email you want to build is helpful. It is also helpful to open two windows, one in “preview” using the “preview and test” button and one in the actual editor.

 


Step 1: Create the flow and build the flow experience

Start by creating a flow from scratch and selecting ordergroove.order.reminder as the metric trigger.

Step_1_of_Order_Reminder.gif

Step 2: Customize the Messaging

Once the flow is built, it’s time to style and customize the message with dynamic content from the event Ordergroove sends. Within the Klaviyo flow, click on the message you want to customize and hit "configure" or "edit". You can set the email subject, preview, and sender information from this page. Next, it's time to set up how the email should be styled. We used the drag-and-drop option and selected a basic 1-column Klaviyo template.

Here's how to start styling an email:

Step_2a.gif

After you’ve set up the layout you want for your email, you should build a mock with the structure you are looking for and stubs for the dynamic content you want. Here's what our mock looked like, with dynamic data bolded:

Mock.png

Step 3: Capturing Dynamic Content

Next up is capturing the dynamic content. Here’s the information we send to Klaviyo. The simplest way to do this is to open two Klaviyo windows, one editing the content and one using "Preview and Test" to show the dynamic variables.

In the screenshot below, I have the preview on the left and the editing on the right.Setup.png

Here's the zoomed-in look at the middle of the screen. The data we sent to Klaviyo is in the preview on the left, and the content editor is on the right. In this picture, I want to put the dynamic subtotal variable in my email, so I click on sub_total in the preview, and Klaviyo copies what I need to my clipboard.

Subtotal.png

 

I can then go to the editor and paste the dynamic variable where I want it, highlighted in this picture:

Screenshot_2023-05-17_at_9.09.15_AM.png

 

Here's what it looks like to go through the mock updating with the dynamic variables:

step_2b.gif

    Note: We used the first name from Klaviyo's profile of the customer, which is just {{first_name}}.

 

Step 4: Capturing Dynamic Content in a list

There is one place clicking the variables won’t work: areas that can contain multiples (like the items in the order). That requires some extra work to loop through each item and display that information. We need to tell Klaviyo to show the same information for both items. We do that by configuring repeat rules within a section of the email. Here's a link to the Klaviyo documentation on repeat rules.

To set up the repeat rules, you need to select the section you want the list to appear in, then select Display Options on the left bar and select Create Repeat Rules.

Screenshot_2023-05-17_at_9.26.20_AM.png

 

The Repeat for field Klaviyo is asking for is the event.items_subset. You can identify lists because the data below is numbered. For example, in the picture below there's a 0 and 1, indicating I have two items in the order. The Item alias field tells Klaviyo how to interpret 0 and 1. In our example, I typed out the word "item".

Screenshot_2023-05-17_at_9.36.40_AM.png

 

After we set up the repeat rules, whatever we put as the item alias becomes the first part of the data you want. We used "item" as the alias below.

In the example, I want to show a picture of the item on the left, with the name and quantity on the right for every item in the order. Klaviyo offers several ways to show the image name; selecting "dynamic link" allows you to use the URL Ordergroove gives you in the event. Here's a list of frequently used mappings to add your desired content.

 

Ordergroove data Klaviyo variable (copy and paste this)
Product Name {{ item.product.name }}
Product Image {{ item.product.image_url }}
Product Page

{{ item.product.detail_url }}

Product Quantity

{{ item.quantity }}

Product Price

{{ item.product.price }}

Subscription Frequency

{{ item.subscription.frequency }}

 

For example, if I wanted to add an image of the item in the order, I would drag and drop an image field where I wanted it. I would then select Browse Image Library and choose the Dynamic Image option, pasting the Product Image snippet above "{{ item.product.image_url }}" in the URL.

Screenshot_2023-05-17_at_9.44.50_AM.png

If I wanted to make this accessible, I could set an Alt Text in the image settings that would be descriptive. I could also redirect customers to the product page when they click on the image using the Link address field in Klaviyo using the Product Page variable from the table above. Here's what that image configuration looks like within Klaviyo when I select the image:

Screenshot_2023-05-19_at_1.38.59_PM.png

 

 

After the image is all configured how you want it, it's time to get the product name and quantity. I copied {{ item.product.name }} and {{ item.quantity }} from the table above where I wanted it placed in the email, like so: Screenshot_2023-05-19_at_1.37.10_PM.png

 

 

Here's putting it all together to set up the content repeat and using those mappings within our order reminder loop to customize the image and set up the product names and quantity variables for each item.

step_2c.gif

 

Step 5: Hooking up the 1-Click Action

Finally, we want to link up the 1-click delay to the "DELAY MY ORDER" button. 1-click actions work by directing to a page you specify (usually a homepage) with unique parameters that Ordergroove listens for. More information about 1-click can be found here.

In the editor, click the button and set the URL to something like the one below with your page instead of www.mystore.com.

https://www.mystore.com/#og_quick_action=delay#og_quick_action_token={{event.action_token}}

It should behave like this when you are done:

1-click_in_action.gif