Using the Post-Checkout Referral Extension on Shopify’s Thank You Page
- DarkLight
Using the Post-Checkout Referral Extension on Shopify’s Thank You Page
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
Goals and Outcomes
Engaging customers at the right moment is key to a successful referral program. Research shows that customers are most likely to refer others right after placing an order. That’s why adding a referral prompt on your Shopify store’s Thank You page is a powerful way to grow your program.
Yotpo’s post-checkout referral extension is a customizable app block you can easily add to your store theme, no coding required. In this article, you'll learn how to set up and configure the Yotpo Referrals extension on Shopify’s Thank You page.
Available for:
Shopify Plus merchants with Checkout Extensibility. Learn how to upgrade to extensible checkout here.
Post-Checkout Referral Extension Overview
How It Works
The extension works with both Shopify’s Legacy and New Customer Accounts and supports both program opt-in strategies:
All customers
Only members who signed up
Once a customer completes a purchase, either as a logged-in member or through guest checkout, they are directed to Shopify’s Thank You page. With the Yotpo Referrals extension enabled, they’ll also see a referral prompt encouraging them to share their personal referral link with friends in exchange for a reward.
This high-engagement moment is a great opportunity to promote referrals and boost program participation.
Here’s what before and after adding the extension would look like for your customers:
How to Set Up the Extension
To add the post-checkout extension to your Thank You page in Shopify, follow these steps:
In your Shopify admin, go to Online Store > Themes > Customize.
From the page selector dropdown at the top, click Checkout and customer accounts.
.png)
From the Checkout dropdown, select Thank you.
In the upper left corner, click the Apps icon.
Click to add the Yotpo Referrals extension to your Thank you page. This will add the app block to your store theme and you can start customizing it.
Customize the App block settings to match your brand.
When done, click Save in the upper right corner to publish your changes.
.png)
Extension Placement
There are several options where you can place the app block:
Within the Order details section
Within the Order summary
The available placement options are mandated by Shopify. To change the placement of the app block, drag and drop it to the respective section or click the arrow icons when configuring the app block settings.
Tip
We recommend placing the app block directly below the order confirmation message for maximum impact.
Extension Settings
You can customize every element of the extension, including the default text, and use dynamic placeholders to pull values directly from your referral program settings.
Dynamic Placeholders
The Yotpo Referrals extension supports dynamic placeholders that automatically display personalized values based on your referral program settings or Shopify admin configuration, ensuring consistency with your on-site referral widgets.
Important
Be sure to copy and paste the placeholders exactly as shown. Typos or changes can prevent them from working correctly.
##referring_customer_reward##
Displays the reward the referring customer will receive after a successful referral. The value is pulled from your referral program settings and it depends on the reward type:
Points: The points value is automatically pulled from Referrals Program > Referring customer reward > Points and you need to manually add the word “points” after the placeholder.
Fixed amount and percentage discounts: The value is pulled from Referrals Program > Program requirements > More settings > Rewards history text > Customer reward text:
Custom discount: The value is pulled from Referrals Program > Referring customer reward > Coupon setup > Reward text*
##friend_reward##
Displays the reward the friend will receive after completing their first purchase through the referral link. The value is pulled from your referral program settings and it depends on the reward type:
Points: The points value is automatically pulled from Referrals Program > Friend reward > Points and you need to manually input the word “points” after the placeholder.
Fixed amount and percentage discounts: The value is pulled from Referrals Program > Program requirements > More settings > Rewards history text > Friend reward text:
Custom discount: The value is pulled from Referrals Program > Friend reward > Coupon setup > Reward text*
##program_minimum_purchase##
Displays the minimum purchase amount a friend must spend on their first purchase for the referring customer to earn a reward.
The value is pulled from Referrals Program > Program requirements > Minimum purchase amount.
If you choose not to set a minimum purchase amount for the friend to use their coupon, this placeholder isn’t needed. We recommend updating the default text to avoid showing “$0” in the minimum amount value.
##store_name##
Displays your store name as you’ve configured it in the Shopify admin (Settings > General > Store details).
Important
To ensure customization flexibility for points-based rewards, the ##referring_customer_reward## and ##friend_reward## placeholders only take the numeric value of the reward. For example, if the referring customer reward is 50 points, you must manually add the word “points” after the placeholder. If you’re using another term for points, e.g. coins, stars, diamonds, etc., add that word instead.
You can use these placeholders in the title, subtitle, referral message template, and email subject line.
Configuring Your Settings
Note
If you leave a setting field empty, the system will use the default text. The preview will update in real time as you make changes.
Title
This is the headline of the referral section within the Thank You page. You can use dynamic placeholders, such as the ##referring_customer_reward##, to pull values from your referral program settings.
Example: “Get $10 off for referring a friend!”
Subtitle
This is the text under the title where you can add more details about the referral rewards for the customer and their friend. You can use any of the dynamic placeholders here if you want.
Example: “Your friend gets $10 off their first order of $30. You get rewarded. Easy!”
Copy button text
The label for the button that copies the referral link.
Example: “Copy link”
“Share with” text
Intro text for the sharing options.
Example: “Share with”
Share icons
Remove or display social sharing icons. Select True if you want to remove any of the icons.
Remove WhatsApp share
Remove email share
Remove SMS share
Use dark icons: Select True to change the color of the icons to black.
Tip
All colors and background design elements, including those in the extension, are configured in the settings of the Thank You page. If you want to change the design of the Thank You page, go to Shopify admin > Online Store > Themes > Customize > Checkout and customer accounts > Thank you > Settings.
Referral message template (all channels)
This is the default message customers will see after they select a referral channel. You can customize it, and shoppers can edit it before sending the referral. You can use dynamic placeholders here as well, including the ##store_name##.
Example: “I love Store X! Use my link to get $10 off!”
This is what the referral message would look like for customers when sharing referrals via:
.jpg)
Subject line (email only)
This is the default subject line customers see when they click to share their referral link via email. Customers can edit it before sending the email.
Example: “Get $10 off on your first order!”
Fallback message
This is the default message that will appear if the customer’s referral link fails to load due to a low internet connection. You can also add a link to your website by entering the full URL in parentheses followed by the relevant term in square brackets: (http://example.com/rewards)[website]
Example: “There was a problem loading your referral link. Visit our website to complete the referral and earn rewards.”
Hide Yotpo Referrals extension for specific countries
You can hide the Yotpo Referrals view from customers in specific countries. To do that, enter a comma-separated list of country codes in an ISO 3166 format. The extension will be hidden for customers from those countries based on the delivery country selected at checkout.
Setup Considerations
Shopify Configuration
Due to Shopify’s interface:
Styling: The extension styling (e.g. buttons, icon colors, etc.) is controlled by Shopify and follows the store’s checkout design and your store’s settings.
App block placement: You can move the app block, but only within predefined areas on the Thank You page set by Shopify.
Untranslatable text: The "Copied" confirmation text cannot be translated.
Checkout via phone number only: To ensure the referral extension appears for all shoppers, we recommend requiring an email address at checkout. This allows us to generate a personalized referral link. If checkout is completed with a phone number only, the extension may not display. You can manage this in Shopify Admin > Settings > Checkout > Customer contact method.
Your Yotpo Account Configuration
Depending on your Yotpo Loyalty account configuration, you may need to take additional steps to be able to use the extension:
Free plans: If you’re on a free plan, you have to upgrade it to gain access to the Yotpo Referrals extension.
Inactive programs: If you haven’t activated your referral and loyalty programs, you’ll be prompted to activate them before configuring the extension.
Outdated referral program version: If you haven’t migrated to the new referral program, you’ll be prompted to switch to the latest version.
Loyalty Program Opt-In Settings: “Only members who signed up” Eligibility
Depending on your loyalty program’s opt-in eligibility, you need to consider the following scenarios:
Legacy accounts with “Only members who signed up” eligibility: The referring customer must have a store account to earn referral rewards. They can still share their referral link, but won’t earn a reward unless signed in.
New customer accounts with “Only members who signed up” eligibility: The referring customer must check the opt-in box during checkout to earn rewards. If they haven’t agreed to be opted into your loyalty program, they can still share a referral link, but will not be eligible to get the reward without opting in.
To ensure all referring customers are eligible to get their referral reward, you can enable a checkbox in the Yotpo admin to automatically opt in referring customers to your program. You’ll find it under Yotpo Admin > Settings > Program > Eligibility.
The extension won’t appear to shoppers if:
They’re excluded from your referral program
Their referral link is blocked
You can opt customers in and activate their links directly from the Yotpo admin.
Was this article helpful?
