What this article covers
This guide is for Shopify merchants who want to use ReferralCandy's legacy floating referral widget (also called the Referral Widget).
Important:
This is a script-based (legacy) widget and is installed by pasting a snippet into your Shopify theme code.
With Shopify 2.0, script-based widgets may not be supported the same way as before. If you're not sure whether this widget will work for your setup, reach out to our support team and we'll confirm what's possible.
Recommended alternative for Shopify 2.0 themes: If you're setting up your program now (or you're on a Shopify 2.0 theme), we recommend using our newer Shopify app block/extension widgets where possible. They're easier to install, supported going forward, and don't require editing theme code.
You can still use this floating referral widget if it's compatible with your setup, but it's considered a legacy script widget.
Before you start
Your referral program should already be set up in ReferralCandy.
You may need a developer, since this involves editing theme code (
theme.liquid).
Add the floating referral widget to your Shopify storefront
Reach out to our support team and we'll share the floating referral widget (Referral Widget) code snippet.
In Shopify admin, go to Online Store → Themes.
Find your active theme → click Customize.
Click the three-dot menu → Edit code.
Under Layout, open theme.liquid.
Paste the snippet just before the closing
</body>tag.Click Save.
Visit your storefront and confirm the widget is showing (it typically appears in the lower corner of the page).
Note: Adding the snippet to theme.liquid typically makes the widget load across your storefront, since it's the main layout file for most pages.
Configure the widget's position (left/right) and overlap behavior
By default, the widget appears in the lower-right corner.
To change the position or fix overlap issues, you'll need to edit the widget snippet that was added to your Shopify theme (the same snippet you pasted into theme.liquid).
The snippet supports:
Moving it to the lower-left by setting
data-locationto"left"(default"right").Starting minimized by setting
data-minimizedto"yes"(default"no") — the widget shows as a small button until clicked.Adjusting z-index (
zIndex) if it overlaps (or sits behind) other sticky elements like cookie banners or chat bubbles.
If you're unsure what to change, share a screenshot (and the snippet you were given) with our support team and we'll tell you exactly what to update.
Customize the widget's text and styling (ReferralCandy Theme editor)
Once the floating widget is installed on your Shopify theme, you'll customize what it says (and how it looks) in ReferralCandy's Theme editor.
Open the Theme editor for the Referral Widget
From your Shopify admin, open Apps → Referral Candy.
Go to Referral campaigns and open your campaign.
Under Customize campaign, click Themes.
On your active (selected) theme, click Customize to open the Theme editor.
In the Theme editor, expand Theme Assets → Entry, then click the Referral Widget card.
Edit the widget content
The left panel opens with Page Design by default. To edit per-section text and labels, click directly on the widget section you want to edit in the center preview — the left panel switches to show the editable fields for that section.
Use the Preview Options panel on the right to switch between widget states — Sign-up, Referral, Waitlist, Ineligible — and friend-offer variants (With offer / Without offer). Use the Desktop / Mobile toggle at the top of the preview to check each layout.
Available fields by section
Page Design (widget-level)
Primary Color — applies to buttons and interactive elements throughout the widget.
Sign-up Form (Sign-up screen — click on the form area)
Minimized button label (the small button shown when the widget is collapsed)
Header with offer (visible when "With offer" is selected) — supports a Reset to default option
Header without offer (visible when "Without offer" is selected) — supports a Reset to default option
Email field label and Email field subtitle
Name field label and Name field subtitle
Submit button label
Referral Page (Referral screen — click on the welcome/offer message area)
Welcome message
Offer message (single purchase) — supports a Reset to default option
Link copied alert (the toast shown when an advocate copies their referral link)
Social Sharing (Referral screen — click on the social share icons)
Social link preview instruction
To change the messages sent through each share channel (Facebook, X, WhatsApp, Telegram, Email, Messenger), edit them under the Social Media Messages section in the Theme editor (separate from the Referral Widget).
Status Messages (Waitlist and Ineligible screens — click on the message)
Waitlist welcome message, Waitlist offer message, and Waitlist button label
Ineligible welcome message and Ineligible offer message (no button on this screen)
Note:
The Theme editor controls the widget's text and styling.
Your Shopify theme code (the
theme.liquidsnippet) controls where the widget is loaded/displayed on your storefront.
Troubleshooting
If the widget doesn't appear:
Confirm you edited the active Shopify theme.
Try an incognito window (theme/script caching can affect testing).
If you're using a Shopify 2.0 theme and the widget isn't behaving as expected, it may be best to move to our newer Shopify app block/extension widgets where possible.