Shopify Thank You Page Referral CTA Banner

Samantha Brown Updated by Samantha Brown

Overview

The Shopify Thank You Page Referral CTA enables you to display a high-visibility referral prompt to customers immediately after they complete a purchase - one of the highest-intent moments in the shopping journey.

This feature uses a native Shopify Announcement Bar that appears at the top of the Thank You page. When a customer clicks the call-to-action button, a modal opens and renders your Friendbuy Referral Widget, making it easy for customers to share your brand and earn rewards.

βœ…Β  Why This Matters

Post-purchase is the highest-intent moment to ask for referrals - customers are happy and engaged.

The Announcement Bar is native to Shopify Checkout Extensibility, ensuring compatibility and performance.

No page redirects - the Referral Widget loads in a modal, keeping customers in the flow.

Fully customizable banner text and colors to match your brand.

How It Works

The feature follows a simple, frictionless visual flow:

πŸ›

Thank You Page Loads

β†’

πŸ“’

Announcement Bar Appears

β†’

πŸ‘†

Customer Clicks CTA

β†’

πŸ’¬

Modal Opens

β†’

🎁

Referral Widget Loads

Announcement Bar

A compact banner appears at the top of the Thank You page as soon as the customer lands on it. The bar contains a short message and a CTA button (for example, "Refer a Friend"). Customers can dismiss the bar if they choose.

Referral Widget Modal

When the customer clicks the CTA, a modal opens and loads your Friendbuy Referral Widget in full. The widget allows customers to share their unique referral link via email, social media, or copy-to-clipboard β€” without leaving the page.

Setting Up the Referral CTA

Follow the steps below to add and configure the Announcement Bar on your Shopify Thank You page. This is a one-time setup.

Prerequisites
  • Your store must be on Shopify's new checkout extensibility (not the legacy checkout).
  • You must have an active Friendbuy referral campaign with a Campaign ID ready.
  • You need Shopify Admin access with permissions to customize the checkout.

Configuration Steps

Log in to your Shopify Admin and navigate to Settings in the left-hand sidebar.

Select Checkout from the Settings menu.

Click the Customize button to open the Checkout Editor.

In the Checkout Editor, select Thank You Page from the page selector at the top.

Click Add app block in the left-hand panel.

Find and select Post-purchase referral banner from the list of available app blocks.

In the configuration panel on the right, enter your Campaign ID. This is the Friendbuy campaign you want to display in the referral modal.

(Optional) Customize the Banner Text β€” the message that appears in the announcement bar.

(Optional) Customize the Banner Color β€” the background color of the bar. Use a hex color code (e.g., #5C6AC4).

Click Save to publish your changes.

Configuration Field Reference

Field

Description

Required?

Campaign ID

The unique ID for the Friendbuy referral campaign you want to display in the modal widget.

Yes

Banner Text

The message displayed in the announcement bar (e.g., "Share & Earn β€” Refer a Friend!").

Yes

Banner Color

Background color of the announcement bar. Accepts hex color codes.

No - defaults to brand color

Your Campaign ID can be found in your Friendbuy dashboard under Campaigns β†’ [Campaign Name] β†’ Settings.

Testing Your Setup

After completing setup, verify everything is working correctly by placing a test order and walking through the customer experience.

You can update the look and feel of the Announcement Bar at any time by revisiting your Checkout Editor and selecting the app block.

The default text prompts customers to participate in your referral program. You can customize this to match your brand voice or specific campaign messaging. Keep the message short and action-oriented β€” the bar is compact.

Examples:

  • "Share the love β€” give $20, get $20"
  • "Refer a friend and earn store credit"
  • "Love your order? Share it and get rewarded!"

Frequently Asked Questions

Can I show the Announcement Bar on a specific campaign only?

Yes β€” each instance of the Post-purchase referral banner app block is tied to a specific Campaign ID. You configure the campaign directly in the block settings.

Can I have multiple Announcement Bars on the Thank You page?

Shopify's app block configuration limits mean only one instance of this block is recommended per page. Using multiple blocks may result in unexpected layout behavior.

Can I turn off the Announcement Bar temporarily?

Because the bar is implemented as a permanently enabled extension (not a feature flag), you will need to remove the app block from the Thank You page in your Checkout Editor to stop displaying it.

Does this work on mobile?

Yes. The Announcement Bar and modal are fully responsive and designed to work across desktop, tablet, and mobile browsers.

Will this affect my checkout performance or page load speed?

The Announcement Bar extension is built to Shopify's Checkout Extensibility standards and is designed to have minimal impact on page performance. The Friendbuy Referral Widget only loads when the modal is opened by the customer.

How did we do?

Contact