How to Display the Friendbuy Referral Widget on Shopify’s Thank You Page - Checkout Extensibility

Samantha Brown Updated by Samantha Brown

Overview

Friendbuy is integrated with Shopify’s Checkout UI Extensibility framework, giving you the power to display Referral Widgets directly on the post-purchase Thank You page. This integration ensures seamless experiences for customers and boosts your acquisition via high-converting placements, which can drive up to 35% of all referrals from your customers!

How to Enable the Friendbuy Widget in Shopify

Access Shopify’s Checkout Editor
  1. Log into your Shopify Admin.
  2. Navigate to: Settings → Checkout

  1. Find the “Configurations” section. Click the Customize button.
Add the Widget to the Thank You Page
  1. In the editor, click on the Thank You page section at the top
  1. On the left-hand menu, click the Apps icon and search for Post-Purchase-Referral
  2. Select Post-Purchase-Referral
  1. Click the "+" sign and select Add to Thank You Page
  2. Click Save to publish your changes

Customization Options

Your referral widget will inherit font and colors from your checkout settings
Customization Options

Below is a list of customization options available in Shopify's admin interface:

  1. Preview Screen

• Dropdown menu: Select a screen to preview (e.g., Email Gate, Share Screen, Thanks Screen)

Email Gate: Displayed if a customer checks out as Guest and you are not passing Customer ID through the Friendbuy Merchant SDK. This prompts the customer to enter their Name and Email Address to unlock sharing functionality.

Share Screen: Displayed once sharing is unlocked. A customer can share via their referral link through email or SMS on mobile.

Thanks Screen: Once the customer has successfully shared, you can display information about when they will be receiving their reward, and then prompt them to share again.

  1. Campaign ID
    1. To access your campaign ID in Friendbuy, navigate to Referral > Campaigns > Select the campaign you want to use. The campaign ID is located in the URL bar. Copy / paste this alphanumeric ID in Shopify. (This should be 36 characters long)
    2. Enter the ID of the campaign that this widget should use for link generation and rewards
    This ID is required for the widget to display on the page
  2. Display Mode

• Dropdown menu: Choose how to display the referral widget

• Embedded - Embedded directly into the page. Example below:

• Overlay - Triggered by a link or button. Example below

  1. Button Text Text to display on the button when in overlay mode.

Example: "Refer a Friend, Get $10"

  1. Hero Image URL

• Text field: URL of the hero image to display at the top of the widget on desktop devices.

• Recommended size: 540 x 200 for embedded, 433 x 125 for overlay.

Desktop Embedded: 540 x 200 px

Desktop Overlay: 433 x 125 px

  1. Mobile Hero Image URL

Add the URL for the hero image on mobile devices. Recommended size: 200 x 135 px for embedded, 333 x 135 px for overlay.

  1. Email Gate Header

This is where you will add Header text for the Email Gate Screen. Example: "Get $10 for every friend you refer!"

Email Gate Subheader

This is where you will add Subheader text for the Email Gate Screen. Example: "Give your friends $10 off, and you get $10 when they buy!"

  1. Email Gate Button Text

• Text for the submit button on the Email Gate Screen. Example: "Start Sharing"

  1. Share Screen Header

• Header text for the Share Screen. Example: "Get $10 for every friend you refer!"

  1. Share Screen Subheader

• Subheader text for the Share Screen. Example: Give your friends $10 off and you get $10 when they buy!"

  1. Email Share Description Text

• Text displayed above the email share form. Example: "Send Emails to Your Friends! "

  1. Email Share Button Text

•Text on the Email Share submit button. Example: "Send Email"

  1. Default Email Share Message

• Default message for the email share: Example: "Check out this product and get $10 off your first order!"

  1. SMS Share Button Text

• Text on the SMS Share button.

  1. Default SMS Share Message

• Default SMS message (auto-populated and editable)

  1. Thanks Screen Header

•Header text for the Thanks Screen.

  1. Thanks Screen Subheader

• Subheader text for the Thanks Screen.

  1. Terms & Conditions Link

• There is a "Terms" link on the bottom left where customers can click to read the Terms and Conditions of your referral program. You can input the URL in your Shopify Admin settings.

Preview & Test

After saving your configuration:

  1. Place a test order.
  2. On the Thank You Page, check that the widget displays with the correct styling, campaign, and display behavior.
  3. If using Overlay mode, ensure the trigger button is visible and functioning.

Need Help?

We’re here for you!

Reach out to your Friendbuy Customer Success Manager or contact us at support@friendbuy.com for assistance with campaign setup, styling recommendations, or troubleshooting.

How did we do?

Contact