Upcoming Order Cross-sell Subscription Experiences provide customers with cross-sell offers depending on specific criteria. Use Klaviyo to notify customers about product offers available on upcoming orders, and encourage customers who receive incentive products to purchase those products as subscriptions with Recharge Quick Actions.

This guide provides a video walkthrough explaining how to configure an Upcoming Order Cross-sell A/B Test experience in Recharge that uses Klaviyo to notify customers about the incentive product, and detailed instructions to replicate the experiences in your store. 

Before you start

• Review the Klaviyo overview guide to understand how Klaviyo works with Recharge
• See A/B testing Subscription Experiences for more information on creating A/B tests
• See Grow and Retain Subscription Experiences overview for additional information on getting started with Subscription Experiences
• See Upcoming Order Cross-sell for details on this Subscription Experience 
• See Recharge metrics and Klaviyo flows for detailed information on how Klaviyo flows work with Recharge. 
• See Recharge Quick Actions to learn more about magic links and using them in your Klaviyo notifications
• See Using Klaviyo with Subscription Experiences for instructions on how you can use metrics to send branded notifications about flow events to customers with Klaviyo flows

Video walkthroughs

Note: Your Recharge merchant portal may appear different than what is visible in the following videos.  Additionally, "Upsell" has been renamed to "Upcoming order" and any new flows you create will be called "Upcoming order cross-sell". While the UI has slightly changed, the concepts outlined in the video are still relevant.

In the following videos, a member of the Recharge Product team walks you through how to build a Subscription Experience in Recharge that uses Klaviyo nodes and flows to cross-sell to customers. These videos explain how to build:

• A Recharge Subscription Experience that adds a complimentary product to a customer's next order after they purchase a specific product
• A Recharge Subscription Experience that utilizes A/B testing to determine what complementary product results in higher conversion rates
• A Klaviyo flow that sends customers who accepted the cross-sell offer an email offering the incentive product as a subscription

Video 1: Configuring the Recharge Subscription Experience

Watch the video below for instructions on creating the experience in Recharge:

Video 2: Configuring the Klaviyo flow

Watch the video below for a detailed walkthrough on how to configure a Klaviyo flow using Recharge metrics:

Video 3: Adding the Recharge Quick Action

Watch the video below for a walkthrough on adding a Recharge Quick Action URL to your Klaviyo flow:

Build the Upcoming Order Cross-sell A/B test experience and Klaviyo notifications

Create the Upcoming Order Cross-sell A/B test experience in Recharge, and use the Klaviyo nodes to send notifications through Klaviyo:

Step 1 - Create a cross-sell A/B test experience using the flow canvas

Create the Upcoming Order Cross-sell A/B test experience in Recharge:

1. Click Grow in your merchant portal and select Upcoming order.
2. Click Create New and select Get started.
3. Add a Trigger Filter in the Trigger node so that the experience only triggers if a specific product is selected, and the order does not contain the complimentary product.
4. Drag the AB Test node into the canvas between the Trigger and the initial Cross-sell offer to build multiple paths.
5. Drag the Cross-sell node to Path B to add the incentive. Set the cross-sell offer for both Path A and Path B.
6. Delete the Recharge notification node from Path A.
7. Drag the Klaviyo node to both the A and B paths to create notifications for both branches.

Design your Klaviyo notifications after you finish configuring your Subscription Experience.

Step 2 - Customize the Klaviyo notification metric nodes

Metric sends event properties from Recharge to Klaviyo that allow you to reference aspects of the customer's order.

Click on the Klaviyo notification in each path to add custom event properties to send any relevant information that you may want to reference in Klaviyo that is not already included in existing properties.

For example, use rc_flows_cross-sell_product as a custom event property to identify the notifications by the name of the cross-sell product. Alternatively, you could also use the existing incentive variant ID to identify the cross-sell product. 

Save any custom event properties you add before moving on to step 3.

Step 3 - Build the flow in Klaviyo

Build the flow in Klaviyo using Recharge metrics:

Step 1 - Save the Recharge Subscription Experience 

Save the flow in Recharge to send a mock metric and corresponding data to Klaviyo automatically under the name Test Jane Doe. Use this test customer to preview properties in Klaviyo emails.

Step 2 - Build the flow in Klaviyo

Get started by creating the flow in Klaviyo:

1. Open the Klaviyo app.
2. Select flows from the navigation menu.
3. Select Create flow and then Create From Scratch.
4. Add a name to your flow and click Create flow.

Step 2 - Set the flow trigger and trigger filter

Create the flow trigger to trigger the flow so that customers receive the notification.

1. Select Metric from the Trigger Setup menu.
2. Choose the flow triggered on Recharge metric. The metric is the customer action that occurs to send out the notification automatically.
3. Click Done to save the trigger.

Add a trigger filter to ensure that only customers who entered the Recharge Subscription Experience created in step one can trigger this Klaviyo flow.

1. Click Trigger Filters and select Add a Trigger Filter.
2. Select flow_id from the Dimension dropdown list. 
3. Set the Dimension value to the Recharge flow ID. You can locate the flow ID on the Klaviyo notification node in the Recharge Subscription Experience.
   • If you cannot see the flow ID as an option, use the flow name as the filter. You can find the name in your flow settings under Flow title.
4. Optional: Add any additional Trigger Filters or flow Filters.
5. Click Save to save your Trigger Filter. 
6. Click Done to save the flow trigger.

Step 3 - Add a conditional split

Add a conditional split to send different emails to customers based on the cross-sell product they receive. You will need to reference the custom event properties configured to identify one of your cross-sell products:

1. Drag the conditional split logic node to your flow.
2. Set the following conditions under the configuration options: 
   1. Use the what someone has done (or not done) property.
   2. Choose the flow triggered on Recharge from the Person has metric dropdown menu.
   3. Use your custom event property to target the cross-sell product in the where field. Alternatively, you can use the existing incentive_variant_id property.
   4. Save the conditional split.

You can now create two separate notifications for each branch, and customize them as necessary. See Incorporating event metrics in your Klaviyo email notifications for additional ways to use event metrics. 

Step 4 - Build the notification

Use the Actions on the side to build the notification:

1. Drag the email action node to your flow.
2. Click Configure Content to create your email.
3. Update the flow content, including the email name and subject line, and then use the drag-and-drop builder to add content to your email. Review Klaviyo’s guide How to create flow email content to learn more.
4. Use the Preview and Test button to review the content of the notification. This allows you to review the content and see the structure of your email, however, the variable data is not included in the preview.
5. Click Save to save the flow.

Step 5 - Activate the Klaviyo flow

Activate the flow in Klaviyo so that you can test the experience before enabling the Recharge Subscription Experience: 

1. Set the flow message to live so customers can start receiving your notification:
2. Click on the message in the flow.
3. Click the Send Status dropdown from the left-hand configuration sidebar.
4. Change the status to Live.

You can change the status of your email at any time if you need to make changes, or want to pause notifications while you review their performance. See Klaviyo’s guide to enable a flow for more information.

Optional - Add a time delay

Consider adding a time delay to send your notification at a later date. If you do add a time delay, make sure to use the following flow filters when designing your Klaviyo flow to ensure that the customer hasn't already added the cross-sell product and is an active subscriber:

• What someone has done (or not done): Use the One-time product added on Recharge metric. Set the values to at least once in the last X days (with X matching the time delay period)
• Properties about someone: rc_active_subscriber is true

Step 6 - Test both A/B paths in Recharge

Navigate back to the Subscription Experience in Recharge to test both paths in the experience:

1. Open the experience in your merchant portal, and click the pencil icon for the Paths to configure the percentages for each path. 
2. Set the percentage for Path A to 100%.
   
3. Save your changes.
4. Perform a test order to trigger the experience to enter Path A using a test customer account configured to accept marketing. Review the Klaviyo email sent to confirm all variables and links work correctly. Ensure Path A works as expected.
5. Access the experience again and set the percentage for Path B to 100%.
   
6. Save your changes.
7. Perform a test order to trigger the experience to enter Path A using a test customer account configured to accept marketing. Review the Klaviyo email sent to confirm all variables and links work correctly. Ensure Path A works as expected.
8. After testing both paths, update your A/B Test flow back to the 50/50 split. Save your changes and activate your Subscription Experience.
   

Step 7 - Activate the Recharge Subscription Experience

Activate the Recharge Subscription Experience to offer the incentive to customers.

Create a post cross-sell Klaviyo flow using Quick Actions

Create a flow in Klaviyo to offer the cross-sell product as a subscription to customers who accept the cross-sell offer. Using a segment ensures that: 

• The customer received the cross-sell product through a Subscription Experience
• The customer had a successfully processed order containing the cross-sell product

Step 1 - Create a customer segment in Klaviyo to target customers who added the cross-sell product

1. Log in to Klaviyo and select Lists & segments under the Audience navigation menu. 
2. Select Create List/Segment. 
3. Click Segment. 
4. Add a name for your segment. 
5. Add the following definitions:
   • What someone has done (or not done): Choose the One-time product added on Recharge metric. Set the values to at least once in the last X days, or another timeframe depending on when you plan on sending the cross-sell product.
   • What someone has done (or not done): Choose the flow triggered on Recharge metric. Set the values to at least once in the last X days where rc_flows_cross-sell_product equals the name of your cross-sell product.
   • What someone has done (or not done): Choose the Order placed successfully on Recharge metric. Set the values to at least once in the last X days where variant_ids contains the variant ID of your cross-sell product.
6. Save your segment.

After creating your segment, follow the instructions in step 2 to use a Quick Actions link to target customers who receive an cross-sell product.

Step 2 - Create the Quick Action link

Use the Recharge Quick Action Builder to create the Quick Action link for your notification:

1. Select Quick Actions under the Storefront menu item in the Recharge merchant portal.
2. Select Add subscription to the next order from the What would you like to do dropdown menu. 
3. Select the flow trigger from the options listed under Will your quick actions be sent via metric trigger or via campaign.
4. Copy the code block to paste it into your Klaviyo source code. Update the VARIANTID, CHARGEFREQUENCY, and ORDERUNIT variables to match the corresponding subscription product.

Step 3 - Create a Klaviyo flow to send subscription cross-sell email

Create a new flow in Klaviyo using the segment you created in step 1 as the flow trigger.

In the cross-sell email template, edit the source code and paste the Quick Actions code block with the updated variant ID, charge frequency, and unit.

Test the Quick Action to confirm that everything is working as expected. Note that the Quick Action will only work for customers who meet the segment criteria. To correctly test the Quick Action, ensure that an order was successfully processed for your test customer and that they have accepted an cross-sell flow. 

Incorporating event properties in your Klaviyo email notification

Use the following event properties in your Klaviyo email notification to provide customers with information specific to their order: 

Expand the dropdown below to use Recharge's source code as a starting point for your notifications. Make sure to update the messaging to match your brand image and product offerings:

<div style="text-align: center; letter-spacing: 3px;"><span style="color: #1e3030; font-size: 14px; font-family: Questrial, Helvetica, Arial, sans-serif; font-weight: 400;">Hi {{ first_name|default:'there' }}!</span></div>
<div style="text-align: center; line-height: 100%; color: #3e3e3e; font-weight: bold; font-size: 47px;"><span style="color: #1e3030; font-family: 'Inknut Antiqua', 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif; font-weight: 400; font-size: 40px;">&nbsp;Unlock 10% off our moisturizer!</span></div>
<div style="text-align: center;">&nbsp;</div>
<div style="text-align: center;"><span style="color: #1e3030; font-size: 18px; font-family: Questrial, Helvetica, Arial, sans-serif; font-weight: 400;">Take advantage of this exclusive subscriber-only offer and add our award-winning moisturizer to your next order scheduled on <span style="font-weight: bold; color: #1a494f;">{{ event.scheduled_at|format_date_string|date:'F d, o' }}</span>.</span></div>

<div style="letter-spacing: 0px;">
<h2 style="text-align: left;"><span style="font-family: Questrial, Helvetica, Arial, sans-serif; font-weight: 400; color: #1e3030; font-size: 22px;">Our Moisturizer</span></h2>
<div><span>Formulated with premium birch sap and designed to hydrate and plump the skin while locking in moisture, this moisturizer is a perfect addition to your skincare routine</span></div>
<div><span style="font-family: Questrial, Helvetica, Arial, sans-serif; font-weight: 400; color: #1e3030; font-size: 14px;">&nbsp;</span></div>
<div><a style="text-decoration: underline; font-family: Questrial, Helvetica, Arial, sans-serif; font-weight: 400; color: #1e3030;" href= “{{ event.onsite_experience_link|default:''}}">Add Moisturizer &rarr;</a></div>
</div>

<div style="text-align: center;"><span style="color: #1e3030; font-size: 18px; font-family: Questrial, Helvetica, Arial, sans-serif; font-weight: 400;"><span style="font-size: 16px;"><a href="{{ event.customer_portal_link}}" style="background-color: #1a494f; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 100px; font-family: Questrial, Helvetica, Arial, sans-serif; font-weight: 400; display: inline-block;">View Offer and Manage Upcoming Order</a></span></span></div>
<div style="text-align: center;"><span style="color: #1e3030; font-size: 18px; font-family: Questrial, Helvetica, Arial, sans-serif; font-weight: 400;">&nbsp;</span></div>
<div style="text-align: center;"><span style="color: #1e3030; font-size: 18px; font-family: Questrial, Helvetica, Arial, sans-serif; font-weight: 400;"><span style="font-size: 22px; font-weight: bold;">Your upcoming order includes: </span></span><span style="color: #1e3030; font-size: 18px; font-family: Questrial, Helvetica, Arial, sans-serif; font-weight: 400;">&nbsp;</span></div>
{% for line_item in event.line_items %}
<div style="text-align: center;"><span style="color: #1e3030; font-size: 18px; font-family: Questrial, Helvetica, Arial, sans-serif; font-weight: 400;">{{ line_item.title|default:'' }}</span></div>
<div style="text-align: center;"><span style="color: #1e3030; font-size: 18px; font-family: Questrial, Helvetica, Arial, sans-serif; font-weight: 400;"><img src="{{ line_item.images.medium|default:'' }}" alt="" /></span></div>
{% endfor %}
<div style="text-align: center;"><span style="font-size: 16px;">
<div style="text-align: center;"><span style="color: #1e3030; font-size: 18px; font-family: Questrial, Helvetica, Arial, sans-serif; font-weight: 400;">Love,&nbsp;</span></div>
<div style="text-align: center;"><span style="color: #1e3030; font-size: 18px; font-family: Questrial, Helvetica, Arial, sans-serif; font-weight: 400;">&nbsp;</s>

Use the Preview & Test option in Klaviyo to view other available properties that you can include in your notification.