How to Add the Friendbuy Referral Widget and Referral Dashboard to Shopify Customer Accounts

Samantha Brown Updated by Samantha Brown

The Friendbuy Referral Widget is now available directly inside Shopify's native Customer Accounts dashboard. This lets your customers view rewards, share referral links, and track referrals without leaving their account creating a seamless referral experience.

This guide walks you through enabling and customizing the widget on your Shopify store.

What You'll Need

  • The Friendbuy Shopify integration installed
  • Access to Shopify Admin with New Customer Accounts enabled for your store
  • At least one active referral campaign configured in Friendbuy

Step 1: Add the Referral Widgets to Customer Accounts

Shopify lets you add Friendbuy blocks to Customer Accounts just like any other app block. There are two widgets available:

  • Referral Widget — lets customers share their referral link via PURL, email, QR code, and SMS
  • Referral Dashboard — shows reward balance and referral history
To add the widgets:
  1. In Shopify Admin, go to Settings → Checkout → Edit under Configurations
  1. Toggle to the Apps tab
  2. Under the Friendbuy: Loyalty & Referrals blocks click the + button next to the Refer a Friend block then select Add page to Accounts

Step 2: Configure the Campaign ID

Define the campaign ID the widget will be associated with for reward distribution, email sends, and share link generation. The campaign ID you define must be the ID of an active referral campaign in your account. Inputting an inactive campaign ID will result in an error generating share links for users.

Navigate to Referral > Campaigns > Locate the active campaign you wish to tie to the widgets.

Click the campaign to access the settings. Copy the ID of the campaign from the URL.

Enter the campaign ID in the Campaign ID field in the block settings.

Step 3: Design & Brand the Widgets

Once added, each widget appears in the editor with configuration options. Here's what you can customize:

Referral Widget Configuration

Appearance

  • Widget - Hero image — Optional image displayed at the top of the sharing widget.
  • Widget - Header — The widget's main heading. Default: "Refer a Friend".
  • Widget - Subheader — The widget's sub-heading, shown under the header (the "what's in it for me" message).
  • Widget - Primary CTA button label — Default text: "Send".
  • Widget - Hide friend-reminder opt-in — Display or hide the Send my friend a reminder email option.

Referral Dashboard Configuration

Appearance

  • Dashboard - heading — e.g., "Your Rewards"
  • Dashboard - Hero image — optional custom image displayed at teh top of the rewards dashboard.
  • Dashboard - Reward-balance label — Default text: "Reward balance".
  • Dashboard - Resend button label — Default text: "Resend".
  • Dashboard - Hide rewards dashboard — Choose to display or hide the rewards dashboard as part of the widget.
  • Layout - Show rewards dashboard above the sharing widget — Choose to display the rewards dashboard above or below the referral widget.
  • Dashboard - Hide reward balance — Choose to display or hide the reward balance.
  • Dashboard - Hide referral history — Choose to display or hide the referral history details.

Step 3: Place & Publish

  1. In the Customer Accounts editor, drag the block to the position you want on the page amongst other blocks you may manage.
  2. Click Save.
  3. Next add a navigation menu item to your customer accounts page. On the Refer a Friend block click the menu icon to Copy URL.
  4. In Shopify Admin navigate to Content > Menus > Customer account main menu. Click Add menu item.
  5. Add a label for the menu item and the link copied from the Refer a Friend block or search "Refer a Friend". Click Save.
  6. The widgets are now live on your store on the accounts page.

What Customers See

Referral Widget

Customers can:

  • Copy their unique referral link to clipboard
  • Email one or multiple friends with a pre-written invitation
  • View and download a QR code (or save to Apple/Google Wallet on mobile)
  • Send via SMS on mobile, with the offer details pre-filled
  • Opt friends into reminder emails when inviting via email
  • See immediate confirmation after each share and a prompt to share again

Analytics

Measure success of this placement in the Friendbuy platform

Navigate to Analytics > Dashboard > Placements

Referral Dashboard

Customers can:

  • View their current reward balance at a glance
  • See referral history including who they've referred and the status (Completed, Pending, Invited, Cancelled)
  • Resend invitations to friends they've already invited
  • If they have no referrals yet, see an empty state that explains the program and prompts them to use the Referral Widget

Troubleshooting

Widgets don't appear in the add block list
  • Solution: Make sure the Friendbuy Shopify integration is installed and new customer accounts is enabled in your Shopify admin account.
  • Solution: In the Refer a Friend app block settings, make sure the campaign ID entered is the ID of an active referral campaign.
Customers see empty/no data on their referral history
  • Solution: Verify the customer is logged into their Shopify account. If they have no referral history yet, they'll see the empty state — this is normal.
Email invitations not sending
  • Solution: Ensure an Advocate Share Email is configured on your referral campaign
Styling needs adjustments
  • Solution: The widgets use Shopify's native components and respect your store's theme.
Source Attribution & Analytics

Every referral from every channel (link, email, QR, SMS) is tracked and tagged with its source. You can see:

  • Who referred whom
  • The referral status (Completed, Pending, Invited, Cancelled)
  • Reward balance and history in real time

Widget Tips

  1. Use a clear, compelling offer copy
  2. Include a branded header image that matches your store
  3. Test the widget as a logged-in customer before going live

If you have questions contact your Friendbuy Customer Success Manager or email support at support@friendbuy.com.

How did we do?

Shopify Theme App Embed

How Friendbuy Powers Loyalty Point Refunds with Shopify

Contact