---
title: "Using the Post-Checkout Referral Extension on Shopify’s Thank You Page"
slug: "using-the-post-checkout-referral-extension-on-shopifys-thank-you-page"
description: "Yotpo's referral extension for Shopify's order confirmation (Thank You) page is an app block that lets you grow your referral program. Here's how!"
tags: ["Referral Program", "Shopify Plus", "Yotpo Extension", "Loyalty and Referrals", "Order Confirmation", "Shopify Thank You page"]
updated: 2025-05-09T08:25:08Z
published: 2025-05-09T08:25:08Z
canonical: "support.yotpo.com/using-the-post-checkout-referral-extension-on-shopifys-thank-you-page"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.yotpo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Using the Post-Checkout Referral Extension on Shopify’s Thank You Page

Products

  

Loyalty & Referrals

###### Supported plans

Pro, Premium, Enterprise

###### eCommerce Platform

Shopify Plus

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

> [!NOTE]
> Available for:
> 
> Shopify Plus merchants with Checkout Extensibility. Learn how to [upgrade to extensible checkout here](https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations/plus-upgrade-guide).

## Post-Checkout Referral Extension Overview

### How It Works

The extension works with both Shopify’s **Legacy** and [**New Customer Accounts**](https://support.yotpo.com/docs/using-yotpo-loyalty-referrals-with-shopifys-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:

![The before and after adding the extension](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/before-and-after-extension.png?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)

### How to Set Up the Extension

To add the post-checkout extension to your Thank You page in Shopify, follow these steps:

![Adding the Yotpo Referrals extension visual walkthrough](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/adding-yotpo-referrals.gif?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)

1. In your Shopify admin, go to **Online Store > Themes > Customize**.
2. From the page selector dropdown at the top, click **Checkout and customer accounts**.

![Home page dropdown](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/home-page-dropdown(1).png?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)
3. From the Checkout dropdown, select **Thank you**.

![Checkout dropdown, Thank you page](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/checkout-thank-you-page-dropdown.png?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)
4. In the upper left corner, click the **Apps** icon.
5. 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.

![Add extension to Thank you page](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/add-yotpo-referrals-to-thank-you-page.png?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)
6. Customize the **App block settings** to match your brand.
7. When done, click **Save** in the upper right corner to publish your changes.

### Extension Placement

There are several options where you can place the app block:

- Within the **Order details** section
- Within the **Order summary**

![Possible extension placement options](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/extension-placement.gif?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)

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]
> Tip
> 
> We recommend placing the app block directly below the order confirmation message for maximum impact.
> 
> ![Recommended extension placement](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/recommended-extension-placement.png?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)

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

> [!WARNING]
> 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**:

![Customer reward text placeholder](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/customer-reward-text-placeholder.png?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)
- **Custom discount**: The value is pulled from **Referrals Program > Referring customer reward > Coupon setup > Reward text***

![Referring customer reward - Reward text](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/referring-customer-reward-custom-discount.png?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)

****##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**:

![Friend reward text placeholder](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/friend-reward-text-placeholder.png?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)
- **Custom discount**: The value is pulled from **Referrals Program > Friend reward > Coupon setup > Reward text***

![Friend reward, custom discount reward text](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/friend-reward-custom-discount.png?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)

****##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.

![Minimum purchase amount settings](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/minimum-purchase-amount-second-option.png?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)

****##store_name##****

Displays your store name as you’ve configured it in the Shopify admin (**Settings > General > Store details**).

![Shopify admin settings for store name](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/store-name-shopify-settings.png?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)

> [!WARNING]
> 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

> [!WARNING]
> 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]
> 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:

EmailWhatsAppSMS

![Email referral share message template](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/email-referral-share-message(1).jpg?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)

![WhatsApp referral share message](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/whatsapp-referral-share.jpg?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)

![SMS referral share message template](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/SMS-referral-share.jpg?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)

#### 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

![Fallback message example](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/fallback-message-example.png?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)

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]](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](https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes). 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](https://shopify.dev/docs/apps/build/checkout/styling#limitations) 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.

![Checkout form settings](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/checkout-form-settings.png?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)

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

![Inactive program message](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/inactive-program-state.png?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)
- **Outdated referral program version**: If you haven’t [migrated to the new referral program](https://support.yotpo.com/docs/migrating-to-the-new-referral-program), you’ll be prompted to switch to the latest version.

![Old program version message](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/old-program-version.png?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)

### 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](https://support.yotpo.com/docs/using-yotpo-loyalty-referrals-with-shopifys-new-customer-accounts#%E2%80%9Conly-members-who-signed-up%E2%80%9D-optin-flow) 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.

![Program eligibility settings](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/program-eligibility-settings.png?sv=2026-02-06&spr=https&st=2026-11-04T19%3A00%3A48Z&se=2026-11-04T20%3A00%3A48Z&sr=c&sp=r&sig=odPmER9vUOFIHwRURNsMQ396VgNgkKdxvDsznqm4zME%3D)

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](https://support.yotpo.com/docs/configuring-your-referral-program-settings-for-shopify#fraud-prevention).