Skip to main content
Referral extension for Shopify
Adam avatar
Written by Adam
Updated over 2 weeks ago

The referral checkout extension is available only to Shopify. This enables Shopify merchants to easily embed a referral extension block on the "Thank you" page at checkout.

The referral extension block shows the referral link and sharing options for enrolled customers, or a referral signup form if the customer is unqualified to enroll in your campaign.


Add the referral extension app

To add the referral extension app to your "Thank you" page:

  1. From your Shopify admin, go to Settings > Checkout.

  2. In the Configurations section, find the store associated with your referral program and click Customize.

  3. Click the Apps tab in the sidebar.

  4. Find the Referral Extension app under Referral Candy and click the + icon. Under Add to, select Thank you. Customize the order of the app on the "Thank you" page.

  5. Click Save.

Set up the referral extension

Turn on referral extension

After the referral extension app is added, customize how and when the block appears on the "Thank you" page at checkout.

  1. From your Shopify admin, go the the Referral Candy app > Campaigns > Select your campaign. In the Promote campaign section, click Widgets.

  2. Find the Referral extension section and check Show this campaign's content.

  3. A popup warning appears letting you know that the referral extension will be enabled only for this campaign. Click Continue to proceed.

  4. Check Allow signup/waitlist for unqualified customers to show a signup form for contacts who are unqualified to enroll in your campaign.

  5. Click Save.

Allow signup or waitlist for unqualified customers

When an unqualified contact signs up for the referral program via the Shopify referral extension, they are waitlisted in your campaign. To be enrolled, they must meet your campaign's segment criteria. Learn more

Note: The referral extension can be enabled for only one live campaign at a time. Checking Show this campaign's content turns off the referral extension for your other campaigns.

Configure the referral extension

  1. Click Add image to upload a banner image for the referral extension. Here are the recommended image sizes depending on the placement of the image:

    • Left or right: Use a square image with a recommended width of 220px

    • Top or bottom: Use an image with a recommended width of 528px

  2. If you're using multiple languages, select a Language.

  3. Set the referral extension Header and Body.

  4. Click Save.

Customize the referral extension app

Customize the referral extension app to set the text color, show or hide sharing options, and edit the banner image alignment.

  1. From your Shopify admin, go to Settings > Checkout.

  2. In the Configurations section, find the store associated with your referral program and click Customize.

  3. Click the Apps tab in the sidebar.

  4. Find the Referral Extension app under Referral Candy and click the check icon and select your "Thank you" page.

  5. Under App block settings, you can customize the following:

    • Choose a Text color. Select Info (default black), Accent, or Decorative (default blue). The Accent option follows the accent color you set on your Checkout's Settings page.

    • Set the Image alignment to left, right, top or bottom

    • Show or Hide your customers' social media sharing options for email, Facebook, Messenger, WhatsApp, X (formerly Twitter), and Telegram

  6. Click Save in the upper right corner.

Tips on customizing the referral extension

  • Add text such as “Refer friends, get rewards” into your image to promote the campaign

  • Use the Top image alignment to make the referral extension more eye-catching and mobile-friendly

  • Use graphic design tools such as Canva to create a custom image, or browse sites with free stock images such as Unsplash

  • Remember to preview your image on smaller devices such as mobile or tablet

  • If you want the image to be aligned on the right or left, use a square image. Note that on a mobile device, the image will appear cropped

Sample banner images

Desktop: Top or bottom alignment (Graphic)

Desktop: Top or bottom alignment (Photo)

Desktop: Left or right alignment (Graphic)

Desktop: Left or right alignment (Photo)

Mobile: Right or left alignment (Graphic)


💬 Need help? Click the chat widget on the right to start a conversation. Learn more


Did this answer your question?