Understanding your referral branding surfaces
Your referral programme has no single home. It appears in several places on your storefront and in your customers’ inboxes, and each surface catches a different person at a different moment. A theme sets the look across all of them; the individual surfaces decide where the programme shows up at all.
The surfaces
Section titled “The surfaces”| Surface | Who it reaches | When to reach for it |
|---|---|---|
| Branding themes | Everyone | First. A theme is the complete look applied across every surface below |
| Widget panel, launcher and referee popup | Any visitor | Your always-on placement, and the one most customers actually meet |
| Referral page | Anyone you send a link to | When you need a permanent URL for a newsletter, menu item or social bio |
| Post-purchase widget | A customer who just bought | The highest-intent moment you get — enthusiasm peaks on the thank-you page |
| Customer account extension | Logged-in repeat buyers | Steady, long-tail referrals from the people most likely to refer |
| Sharing channels | Referrers about to share | Once a referrer is ready to share, this decides where the referral travels |
| Referral Share Button | Shoppers on a product page | When you want a referral to start from the product someone is already looking at |
Where to start
Section titled “Where to start”Set the theme first — everything else inherits it. Then turn on the widget and the post-purchase widget: together they cover the always-on case and the peak-intent case, which is most of the value. Add the rest when you have a specific reason.
Relying on one placement is the most common reason a programme underperforms — see making your referral program visible.
Add the Referral Share Button to product pages
Section titled “Add the Referral Share Button to product pages”A shopper looking at a product is already thinking about who else would like it. The Referral Share Button puts a small share link on your product pages. It opens the referral popup, and the link a referrer shares sends friends straight to that product.
To add it:
- Open the campaign, go to Branding, pick your theme and choose Customize.
- Under Pages and integrations, open the Referral Share Button card and select Add to product page. Shopify’s theme editor opens on your product template with the block added.
- Position the block and save. The card lists your product templates as Added or Not added, so you can see which ones still need it. A newly added block can take up to 15 minutes to show as Added.
The block works only while the BLOOP Refer & Aff app embed is on. If it is off, the card warns you and offers Turn on app embed; see how to enable the app embed block.
Style the block in the theme editor:
| Setting | What it does |
|---|---|
| Button text | Your own wording. Leave it blank to use Bloop’s default, shown in the shopper’s language |
| Show share icon | Shows or hides the small share icon beside the text |
| Text color | Colour of the text and icon |
| Font size | 10 to 24 px |
| Alignment | Left, center or right |
The button appears on a product only when your friend’s reward (the referee reward) applies to it. A reward limited to specific products, collections or variants hides the button on every other product, and the reward’s one-time or subscription setting must fit the product too. A free-product reward shows it on every product. If you run several campaigns, the popup offers the ones whose friend reward covers the product.
In the theme editor the button always shows so you can place it. On your live storefront it stays hidden until a product qualifies.
Related
Section titled “Related”- How to create and configure a referral campaign — the campaign each theme belongs to.
- How to control how a reward reads to customers — the words the reward renders as on every surface.