Instructions for building an Upcoming Order Cross-sell Subscription Experience A/B test with Klaviyo notifications
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.
- Shopify Checkout Integration
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
- Contact our Klaviyo Partners if you need help with customizations.
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:
- Click Grow in your merchant portal and select Upcoming order.
- Click Create New and select Get started.
- 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.
- Drag the AB Test node into the canvas between the Trigger and the initial Cross-sell offer to build multiple paths.
- Drag the Cross-sell node to Path B to add the incentive. Set the cross-sell offer for both Path A and Path B.
- Delete the Recharge notification node from Path A.
- 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:
- Open the Klaviyo app.
- Select flows from the navigation menu.
- Select Create flow and then Create From Scratch.
- 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.
- Select Metric from the Trigger Setup menu.
- Choose the flow triggered on Recharge metric. The metric is the customer action that occurs to send out the notification automatically.
- 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.
- Click Trigger Filters and select Add a Trigger Filter.
- Select flow_id from the Dimension dropdown list.
- 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.
- Optional: Add any additional Trigger Filters or flow Filters.
- Click Save to save your Trigger Filter.
- 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:
- Drag the conditional split logic node to your flow.
- Set the following conditions under the configuration options:
- Use the what someone has done (or not done) property.
- Choose the flow triggered on Recharge from the Person has metric dropdown menu.
- 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. - 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:
- Drag the email action node to your flow.
- Click Configure Content to create your email.
- 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.
- 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.
- 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:
- Set the flow message to live so customers can start receiving your notification:
- Click on the message in the flow.
- Click the Send Status dropdown from the left-hand configuration sidebar.
- 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 lastX
days (with X matching the time delay period) -
Properties about someone:
rc_active_subscriber
istrue
Step 6 - Test both A/B paths in Recharge
Navigate back to the Subscription Experience in Recharge to test both paths in the experience:
- Open the experience in your merchant portal, and click the pencil icon for the Paths to configure the percentages for each path.
- Set the percentage for Path A to 100%.
- Save your changes.
- 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.
- Access the experience again and set the percentage for Path B to 100%.
- Save your changes.
- 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.
-
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
- Log in to Klaviyo and select Lists & segments under the Audience navigation menu.
- Select Create List/Segment.
- Click Segment.
- Add a name for your segment.
- 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
.
-
What someone has done (or not done): Choose the One-time product added on Recharge metric. Set the values to
- 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:
- Select Quick Actions under the Storefront menu item in the Recharge merchant portal.
- Select Add subscription to the next order from the What would you like to do dropdown menu.
- Select the flow trigger from the options listed under Will your quick actions be sent via metric trigger or via campaign.
- Copy the code block to paste it into your Klaviyo source code. Update the
VARIANTID
,CHARGEFREQUENCY
, andORDERUNIT
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:
Property |
Purpose |
{{event.scheduled_at|format_date_string|date:'F d, o' }} | Add the next charge date to your email |
{{ event.onsite_experience_link|default:'' }} |
Add the cross-sell link |
{% 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 %} |
Add a list of items in the upcoming order (product title + image)
|
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:
Example source code blocks
Use event properties to announce the cross-sell offer to customers available to them on their next upcoming order:
Announce the cross-sell offer to customers
Announce the subscription product to customers when they open the email:
Source code
<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;"> Unlock 10% off our moisturizer!</span></div>
<div style="text-align: center;"> </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>
Add product button
Use a button and event properties so customers can quickly add the cross-sell product to their next order:
Instructions
- Drag the button block to your email.
- Enter the call-to-action text in the Text field.
- Add the
{{ event.onsite_experience_link|default:'' }}
property to the URL field. - Save the button.
Provide customers with additional product information and a link to the cross-sell product
Source code
<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;"> </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 →</a></div>
</div>
View offer and manage upcoming order
Use event properties to display the products the customer will receive on their next upcoming order, as well as a link to view the cross-sell offer and manage their order:
Source code
<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;"> </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;"> </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, </span></div>
<div style="text-align: center;"><span style="color: #1e3030; font-size: 18px; font-family: Questrial, Helvetica, Arial, sans-serif; font-weight: 400;"> </s>
Use the Preview & Test option in Klaviyo to view other available properties that you can include in your notification.