How to set up a referral program

Recharge's Referrals feature lets you leverage word-of-mouth marketing to help scale your business and attract new customers. Use Recharge to build enticing referral programs, encouraging your current customers to share their favorite products with their favorite people.

This guide provides step-by-step instructions to seamlessly implement a referral program as part of your customer acquisition strategy.

Before you start

• This feature is available through Rewards. Access to Rewards depends on your plan. Check the Loyalty tab in your merchant portal to confirm whether this feature is available in your store.

How it works

Build custom referral programs using Recharge’s flow canvas and provide your existing customers, also known as advocates, with a unique referral link to share with their customers.

There are two key components to building a robust referral program:

1. Build the incentive for advocates to share with friends and family: Existing customers can access a referral link in their customer portal to share with friends and family. When a potential customer clicks on the referral link, they’re sent to a landing page where they can provide their basic contact information and receive a discount on their first checkout order.
2. Build the reward advocates receive when someone uses their referral link: Provide store credit to your existing customer advocates when their friends convert into subscribers.

Depending on what you want to offer in your referral program, you can also:

• Remind customers to share their referral code with friends
• Display a referral link on the Thank You page so new customers can earn incentives for their referrals

Your existing customers, also known as advocates, access the referral link in the Affinity customer portal under Refer a friend which they share with their friends and family members.

Advocates earn credits for future orders each time a referred friend places an order using their referral link, and their friends get a discount on their first purchase. When an advocate’s friend clicks on the referral link, they’re directed to a landing page where customers can enter their basic contact information, and view their referral discount code.

Recharge applies the discount code to the referred customer’s cart at the checkout. Customer advocates receive Credits once their friends and family members convert into customers.

Step 1 - Create the incentivize friends flow

Create the flow potential customers interact with when your customer advocates share referral links. 

Step 1 - Build the Referral program

Build your Referrals program directly in Recharge:

1. In the Recharge merchant portal, under Loyalty select Referrals.
2. Click Create from template.
3. Click Incentivize friends offer.
4. Click Manage settings to add a title, description, and duration for the flow. You can also limit the number of times the flow executes for all customers, or for a single customer, to prevent overuse. See Flow settings for more details.

The Incentivize friends template uses a Trigger node configured to trigger when a potential customer clicks the referral link. At this time you cannot change the trigger, or add conditions.

Step 2 - Review the Discount node

By default, the incentivize friends template offers new customers a 10% discount on their first order. Use the Discount node to change the one-time discount:

1. Click the Discount node to open the settings panel.
2. Specify the discount amount:
   • Use the first dropdown to choose Percentage or Fixed amount.
   • Enter the discount value in the adjacent field (e.g., 10).
3. Set the purchase type. Use the dropdown to choose whether the discount applies to:
   • Subscription purchases only
   • One-time purchases only
   • Both, subscription and one-time purchases
4. Define any minimum purchase requirements. Select one of the following options:
   • No minimum requirements
   • Minimum purchase amount
   • Minimum quantity of items
5. Choose how the discount applies to recurring payments. Select one of the following:
   • Limit discount to first payment
   • Limit discount to multiple recurring payments
   • Discount applies to all recurring payments
6. Choose how the referral discount can be combined. Enable or disable combinations with:
   • Product discounts
   • Order discounts
   • Shipping discounts
7. Click Apply to save your changes.

Step 3 - Customize the Landing page node

Click on the Landing page node to customize what potential customers see to receive the discount.

You can display a customized landing page or a storefront modal to your advocate’s friends. You can either display the referral link to potential customers through a:

• Landing page (Recommended method)
• Modal on your storefront

Landing page

Send potential customers to a landing page to collect basic contact information, such as their first and last name, and email.

Easily update the look and feel of the landing page for potential customers using the Landing Page Site Builder:

1. Click Customize landing page on the Landing page node.
2. Customize your landing page to match the look and feel of your brand. Edit the landing page text, add videos or images, and edit the style, color, and layout.
3. Translate your content to deliver a localized customer experience using manual or smart translations.
4. Click Done, then select Apply to save your changes.

You can use the following variables when building your landing page:

Modal on your storefront

Display a pop-up with your referral link to potential customers on your storefront’s home page.

If you select the Modal on storefront option on the Landing page node, you must update your Shopify theme to display the modal correctly:

1. Navigate to your Shopify admin and click Online store.
2. Under Themes click Customize next to your live theme.
3. On the home page click Add section under Template and select Custom Liquid.
4. Click Custom Liquid under Template to load the Custom Liquid editor on the right side of the page.

5. Add the following code under Liquid code. Make sure to update the copy and any styling elements of the modal based on your desired referral offer and storefront branding.

   Click to expand code

   <!-- Modal HTML Structure -->
   <div id="referralModal" class="popup" style="display: none;">
   <!-- Set display to none initially -->
   <div class="popup-content">
   <span class="close">&times;</span>
   <p>Here's 10% off from your friend</p>
   <div class="discount-code">
   <strong id="discountCode">RC-XXXXXX</strong>
   <button onclick="copyReferralCode()" class="copy-button" style="background: none; border: none; cursor: pointer; margin-left: 8px;">
   <!-- New SVG icon -->
   <svg width="21" height="24" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M6.84614 19.1469C6.28715 19.1469 5.81466 18.9538 5.42867 18.5674C5.04267 18.1811 4.84967 17.7081 4.84967 17.1487V2.99828C4.84967 2.43879 5.04267 1.96587 5.42867 1.57952C5.81466 1.19318 6.28715 1 6.84614 1H18.0035C18.5625 1 19.035 1.19318 19.421 1.57952C19.807 1.96587 20 2.43879 20 2.99828V17.1487C20 17.7081 19.807 18.1811 19.421 18.5674C19.035 18.9538 18.5625 19.1469 18.0035 19.1469H6.84614ZM6.84614 17.5311H18.0035C18.099 17.5311 18.1866 17.4913 18.2662 17.4116C18.3458 17.3319 18.3856 17.2443 18.3856 17.1487V2.99828C18.3856 2.90266 18.3458 2.815 18.2662 2.73531C18.1866 2.65563 18.099 2.6158 18.0035 2.6158H6.84614C6.7506 2.6158 6.66303 2.65563 6.58343 2.73531C6.50381 2.815 6.46399 2.90266 6.46399 2.99828V17.1487C6.46399 17.2443 6.50381 17.3319 6.58343 17.4116C6.66303 17.4913 6.7506 17.5311 6.84614 17.5311ZM2.99647 23C2.4375 23 1.96501 22.8068 1.57901 22.4205C1.193 22.0341 1 21.5612 1 21.0017V5.23558H2.61436V21.0017C2.61436 21.0974 2.65416 21.185 2.73376 21.2647C2.81338 21.3444 2.90095 21.3842 2.99647 21.3842H15.7682V23H2.99647Z" fill="#191D48"/>
   <path d="M6.46399 17.5311V2.6158M6.84614 19.1469C6.28715 19.1469 5.81466 18.9538 5.42867 18.5674C5.04267 18.1811 4.84967 17.7081 4.84967 17.1487V2.99828C4.84967 2.43879 5.04267 1.96587 5.42867 1.57952C5.81466 1.19318 6.28715 1 6.84614 1H18.0035C18.5625 1 19.035 1.19318 19.421 1.57952C19.807 1.96587 20 2.43879 20 2.99828V17.1487C20 17.7081 19.807 18.1811 19.421 18.5674C19.035 18.9538 18.5625 19.1469 18.0035 19.1469H6.84614ZM6.84614 17.5311H18.0035C18.099 17.5311 18.1866 17.4913 18.2662 17.4116C18.3458 17.3319 18.3856 17.2443 18.3856 17.1487V2.99828C18.3856 2.90266 18.3458 2.815 18.2662 2.73531C18.1866 2.65563 18.099 2.6158 18.0035 2.6158H6.84614C6.7506 2.6158 6.66303 2.65563 6.58343 2.73531C6.50381 2.815 6.46399 2.90266 6.46399 2.99828V17.1487C6.46399 17.2443 6.50381 17.3319 6.58343 17.4116C6.66303 17.4913 6.7506 17.5311 6.84614 17.5311ZM2.99647 23C2.4375 23 1.96501 22.8068 1.57901 22.4205C1.193 22.0341 1 21.5612 1 21.0017V5.23558H2.61436V21.0017C2.61436 21.0974 2.65416 21.185 2.73376 21.2647C2.81338 21.3444 2.90095 21.3842 2.99647 21.3842H15.7682V23H2.99647Z" stroke="black" stroke-width="0.5"/>
   </svg>
   </button>
   </div>
   <p id="copyMessage" style="display:none; color: gray; font-size: 12px; margin-top: -10px;">Discount code copied!</p> <!-- Adjusted style -->
   <button class="shop-button">Shop now</button> <!-- Button text updated to "Shop now" -->
   <p class="offer-expiry">* This offer expires in 3 days</p>
   </div>
   </div>
   
   <style>
   .popup {
   position: fixed;
   z-index: 1000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
   }
   
   .popup-content {
   background-color: white;
   padding: 20px;
   border-radius: 12px;
   text-align: center;
   width: 320px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   position: relative;
   font-family: Arial, sans-serif;
   }
   
   .close {
   position: absolute;
   top: 10px;
   right: 10px;
   color: #aaa;
   font-size: 18px;
   cursor: pointer;
   }
   
   .close:hover,
   .close:focus {
   color: black;
   }
   
   .discount-code {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 15px 0;
   }
   
   .discount-code strong {
   font-size: 18px;
   font-weight: bold;
   color: #3e3e3e;
   }
   
   .copy-button {
   background: none;
   border: none;
   cursor: pointer;
   margin-left: 8px;
   font-size: 16px;
   }
   
   .shop-button {
   background-color: #467C99; /* Button color */
   color: white;
   padding: 10px 20px;
   border: none;
   cursor: pointer;
   border-radius: 12px;
   font-size: 16px;
   }
   
   .shop-button:hover {
   background-color: #3a657d; /* Darker shade on hover */
   }
   
   .offer-expiry {
   margin-top: 10px;
   font-size: 12px;
   color: gray;
   }
   
   #copyMessage {
   font-size: 12px; /* Match font size */
   color: gray; /* Match color */
   margin-top: -10px; /* Reduce the spacing */
   }
   </style>
   
   <script>
   // Function to get UTM parameter from the URL
   function getUTMParameter(param) {
   let urlParams = new URLSearchParams(window.location.search);
   return urlParams.get(param);
   }
   
   // Function to copy the discount code and show the "Discount code copied!" message
   function copyReferralCode() {
   const discountCodeElement = document.getElementById('discountCode');
   const discountCode = discountCodeElement.innerText;
   
   // Copy the discount code to the clipboard
   navigator.clipboard.writeText(discountCode).then(function() {
   // Show the copied message
   document.getElementById('copyMessage').style.display = 'block';
   }, function(err) {
   console.error('Failed to copy text: ', err);
   });
   }
   
   document.addEventListener("DOMContentLoaded", function() {
   var popup = document.getElementById("referralModal");
   var closeBtn = document.getElementsByClassName("close")[0];
   var shopBtn = document.getElementsByClassName("shop-button")[0];
   
   // Show the modal only if the 'showReferralModal' UTMd parameter is set to 'true'
   const discountCode = getUTMParameter('rc_code');
   if (discountCode) {
   popup.style.display = "flex"; // Only show if the parameter is true
   document.getElementById('discountCode').innerText = discountCode;
   }
   
   // Close the modal when the user clicks on the close button
   closeBtn.onclick = function() {
   popup.style.display = "none";
   }
   
   // Close the modal when the user clicks the Shop now button
   shopBtn.onclick = function() {
   popup.style.display = "none";
   // Optionally, redirect the user to the shop page after closing the modal
   // window.location.href = '/shop'; // Uncomment this line if you want to redirect
   }
   
   // Close the modal when clicking outside of it
   window.onclick = function(event) {
   if (event.target == popup) {
   popup.style.display = "none";
   }
   }
   });
   </script>

6. Optional - Reduce the top and bottom padding to 0 to ensure the Custom Liquid block is invisible.
7. Click Save to save your changes.
8. Optional - Test the modal. Navigate to your storefront after saving and add the following to the web address: /?rc_flow_id=35835&rc_advocate_id=167035631&rc_code=RC-4EU2RBIJ&utm_source=referral&utm_campaign=recharge_35835
   • eg. www.[yourdomain].com/?rc_flow_id=35835&rc_advocate_id=167035631&rc_code=RC-4EU2RBIJ&utm_source=referral&utm_campaign=recharge_35835

Step 4 - Review the Wait for Action node

The Wait for Action node checks if the advocate’s friend completed the action and converted to a customer. By default, this node is set to check if the customer completed the action two days after the initial time a potential customer opens the landing page. The flow ends if the friend turns into a customer.

If the potential customer does not use the referral code, Recharge sends them a reminder. Click on the Notification node to update the messaging, or keep it as is to use Recharge’s default notification template.

An additional Wait for Action node follows the Notification node to check if the potential customer converted within seven days of receiving the notification. If the friend purchases within seven days, the flow ends immediately.

If the potential customer does not purchase after seven days, Recharge sends a final reminder notification. Click on the Notification node to edit the reminder or keep the default messaging. The flow ends after Recharge sends the final notification.

Step 5 - Save and activate the flow

Save and activate the flow:

1. Save the changes made to the flow template.
2. Click Activate when you are ready to go live with your referral program.

Step 2 - Build the Rewards advocate flow

Give your existing customers a fixed credit reward they can use on future orders when someone purchases through their referral link.

Step 1 - Build the flow

Build your Referrals flow directly in Recharge:

1. In the Recharge merchant portal, under Loyalty select Referrals.
2. Click Create from template.
3. Select Reward advocates.
4. Click Manage settings to add a title, description, and duration for the flow. You can also limit the number of times the flow executes for all customers, or for a single customer, to prevent overuse. See Flow settings for more details.

This flow triggers when an existing customer’s friend successfully completes a checkout order. At this time you cannot change the trigger, or add conditions.

Step 2 - Review the Credit node

By default, existing customers receive a $10 credit when their friends and family use their referral link. 

Click on the Credit node to update the amount, and expiration settings. You can only offer fixed credit amounts to existing customers. 

Step 3 - Review the Notification node

Recharge notifies advocates when they earn referral credit. You can keep the notification as is, or click on the node to translate the notifications or update the:

• Sender name and email
• Subject line
• Email messaging

Step 4 - Save and activate the flow

Save and activate the flow:

1. Save the changes made to the flow template.
2. Click Activate when you are ready to go live with your referral program.

Optional - Automatically remind advocates to share their referral link

Use Recharge notifications or Klaviyo flows to remind customer advocates about their referral links.

Option 1- Klaviyo

Create a flow in Klaviyo to remind existing customers about the referral link:

1. Backfill your customer properties to send the referral property to Klaviyo.
2. Build the flow in Klaviyo using a Recharge metric as the flow trigger. Keep in mind that customers receive a notification every time they trigger the flow.
3. Set additional filters to target your reminder emails to your most loyal customers. For example, you could use the Order placed successfully metric as a profile trigger and set the condition to at least five over all time to ensure that only customers who had at least five successful orders receive your referral code.
4. Add the rc_referral_link custom property to your email notifications to include the referral link in your emails when building your email notification.
5. Save the flow, and then test it to ensure it works as expected.
6. Activate the flow when ready.

Alternatively, if you already use Klaviyo to replace Recharge notifications, you can simply edit an existing flow to include the rc_referral_link. For example, you could update an existing “Order placed successfully” flow and share the referral link with customers every time you notify them that you processed their order.

Option 2 - Recharge

Step 1 - Build the flow

Build your Referrals flow directly in Recharge:

1. In the Recharge merchant portal, under Loyalty select Referrals.
2. Click Create from template .
3. Select Send reminder to friends.
4. Click Manage settings to add a title, description, and duration for the flow. You can also limit the number of times the flow executes for all customers, or for a single customer, to prevent overuse. See Flow settings for more details.

Step 2 - Edit the Trigger node

Customer advocates receive the referral reminder before their next upcoming charge. You must set conditions within the Trigger node to specify how many days before their upcoming order that a customer should receive the reminder:

1. Click on the Trigger node to open the node and make changes.
2. Under When will this flow be triggered, specify how many days before the customer's upcoming order they should receive the notification.
3. Set an additional trigger condition to ensure your most loyal customers receive the referral reminder. For example, you could use the Streak count for subscription orders condition so that only existing customers who have received five orders in a row can send referral links to their friends and family.

Step 3 - Review and update the Notification node

Recharge provides a standard notification template that reminds customers to share their referral links and incentives. You can keep the template as is, or edit the existing Recharge notification template to fit your brand’s voice and styling.

Click on the Notification node to update the sender name and email, plus the notification’s subject line.

1. Click on the notification node and select Edit email body.
2. Update the existing template, or use CSS and HTML to completely create your own template. See Using the Notification node for a list of variables you can include in your notification.
3. Make sure to use the {{customer.referral_url}} variable to add an advocate referral link to a Recharge email notification, so you can remind your customers to refer their friends and receive credit towards their next order.
4. Click Add an image to upload an image to the notification.
5. Enter your email in the Send test email box to test the notification from the customer’s perspective.
6. Click Done to save the notification template.
7. Click Apply to save your changes.
8. Optional - Translate your notifications into multiple languages.

Step 4 - Save and activate the flow

Save and activate the flow:

1. Save the changes made to the flow template.
2. Click Activate when you are ready to go live with your referral program.

Optional - Display a referral link after checkout

Build an automated flow that displays a referral code to customers on the Thank You page after a successful checkout order. Customers can share this referral link and receive rewards for their next purchase. 

Enabling this flow prompts Recharge to create a customer record for one-time customers after checkout, allowing them to access and share a referral link. If you don’t enable this flow, Recharge doesn’t create a customer record, and one-time customers don't receive a referral link.

Step 1 - Build the Referral program

Build your Referrals flow directly in Recharge:

1. In the Recharge merchant portal, under Loyalty select Referrals.
2. Click Create from template.
3. Select Refer friends after checkout.
4. Click Manage settings to add a title, description, and duration for the flow. You can also limit the number of times the flow executes for all customers, or for a single customer, to prevent overuse. See Flow settings for more details.

This flow triggers when a customer reaches the Thank You page after a successful checkout. You cannot change the trigger.

Step 2 - Customize the flow

Customers receive the same referral incentives that you set for your customer advocates in Step 2. You can edit the text customers see related to the Referrals program on the Thank you page:

1. Click on the Referral after checkout node.
2. Click Customize refer a friend.
3. Update the text related to your Referral program in the applicable text boxes. Use the{{advocate_firstname}} variable to personalize communication and include the advocate's name.
4. Click Done to save your changes.

Step 3 - Save and activate the flow

Save and activate the flow:

1. Save the changes made to the flow template.
2. Click Activate when you are ready to go live with your referral program.

Step 4 - Add the Referrals app block to your Shopify theme

You must add the Recharge Referrals app block to the Thank you page of your Shopify theme to display the Referral link after checkout. You only need to add the app block once:

1. In your Shopify Admin, click Settings and select Checkout.
2. Click Customize next to your live checkout configuration.
3. Click the Checkout dropdown at the top of the page, and select Thank you.
4. Click Add app block in the section of the thank you page you want the referral block to display, and select Recharge Referrals.
   
5. Save your changes.

Optional - Update the customer portal

Update the customer portal to reflect your Referrals program.

Referral links on the Next order page

Referral links automatically appear when customers access the Affinity customer portal from the Next order page.

Editing Referrals text on the Next order page

You can edit the Referrals text for the Next order page in your Translation settings: 

1. Select Storefront in your Recharge merchant portal, then click Copy & translations.
2. Make sure you're on the Customer Portal - Affinity tab.
3. Locate the Referrals tab, and update the copy to match your branding.
4. Click Save to confirm your changes.

Alternatively, select the Refer friends in the customer portal template under Referrals to access the portal translations.

Adding referral links to the Affinity Home Page Builder

If you use the Affinity Home Page Builder, you can add the Referrals block directly to your home page to promote your referral program. See Set up the Affinity customer portal using the Home Page Builder for detailed instructions.

Editing Referrals text on the Affinity Home Page Builder

Click on the Referrals widget block in the Home Page Builder to update the Referrals text.

Review Referrals data

Referrals Overview tab

View the following three metrics on the Overview tab to understand the high-level performance of your referral programs:

• Total Referral Revenue: The total revenue generated from checkout orders made through any referral offer, including both subscription and non-subscription products.
• Total Referred Orders: The total orders generated from checkout orders made through any referral offer, including both subscription and non-subscription products.
• Experiences Delivered: The total referral traffic from friends who clicked on referral links shared by customers, leading them to view a referral offer.

Referrals Performance tab

Use the Performance tab to review the following key Referrals-related metrics: 

Activity tab

Use the Activity tab to review additional referrals data, including:

• Date:
  • Landing page: The date the referred friend entered their information on the referral landing page and completed a checkout
  • Storefront modal: The date the referred friend used their referral discount and completed a checkout
• Flow ID: ID of the Flow where the referral link originated
• Advocate ID: ID of the customer advocate who referred the friend
• Friend email: Email of the referred friend
• Friend name: First and last name of referred friend
• Friend ID: ID of the referred friend
• Result:
  • Landing page: Displays Converted if the friend completes a checkout after submitting their information on the landing page
  • Storefront modal: Displays Converted only if the friend applies the referral discount code during checkout

Considerations

Consider the following when using Referrals: 

Resources

• Getting started with Referrals