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

• Referrals are available to Pro and Custom merchants as part of the Retain package.

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 experience

Create the experience potential customers interact with when your customer advocates share referral links. Recharge automatically creates the incentive discount directly in Shopify after you activate the experience.

Step 1 - Build the Referral program

Build your Referrals program directly in Recharge:

1. Select Referrals under the Loyalty menu in the Recharge merchant portal.
2. Click Create from template under Incentivize friends.
3. Click Manage settings to add a title, description, and duration for the experience. 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 on the Discount node.
2. Use the drop-down menu to specify the discount type. You can set a percentage or fixed amount discount.
3. Enter the discount amount.
4. Click Apply to save your changes

Configure these discount settings in Shopify:

• Discount stacking
• Minimum purchase amounts
• Discounts limitations for specific purchase types

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. Click Done, then select Apply to save your changes.

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 experience 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 experience 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 experience ends after Recharge sends the final notification.

Step 5 - Save and activate the experience

Save and activate the experience:

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 experience

Reward your existing customers for their word-of-mouth referrals with credits they can apply to their upcoming orders.

Step 1 - Build the experience

Build your Referrals experience directly in Recharge:

1. Select Referrals under the Loyalty menu in the Recharge merchant portal.
2. Click Create from template under Reward advocates.
3. Click Manage settings to add a title, description, and duration for the experience. 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 experience 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 credit type, amount, and expiration settings.

Step 3 - Review the Notification node

Recharge notifies advocates when they earn credit for referrals. 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 experience

Save and activate the experience:

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 experience

Build your Referrals experience directly in Recharge:

1. Select Referrals under the Loyalty menu in the Recharge merchant portal.
2. Click Create from template under Send reminder to friends.
3. Click Manage settings to add a title, description, and duration for the experience. 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 experience

Save and activate the experience:

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 experience 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.

Step 1 - Build the Referral program

Build your Referrals experience directly in Recharge:

1. Select Referrals under the Loyalty menu in the Recharge merchant portal.
2. Click Create from template under Referral after checkout.
3. Click Manage settings to add a title, description, and duration for the experience. 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 experience triggers when a customer reaches the Thank You page after a successful checkout. You cannot change the trigger.

Step 2 - Customize the experience

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 experience

Save and activate the experience:

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 Referral related translations

Update existing copy and translations to reflect your Referrals program:

1. Select Storefront from your Recharge merchant portal and click Copy & translations.
2. Click 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.

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: The date the referred friend used their referral discount and completed an order.
• 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: Displays converted if the friend completes a checkout with the referral discount

Considerations

Consider the following when using Referrals: 

Resources

• Getting started with Referrals