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, contact us and we’ll confirm what’s possible and share the correct snippet.
Recommended (Shopify 2.0 widgets): 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
Contact ReferralCandy Support and ask for 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 at the bottom of the file.
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".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 one of our support agents and we can 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.
In your ReferralCandy dashboard, go to Theme and select Referral Widget from the dropdown (this is the same editor used for legacy emails/pages/widgets).
From here, you can typically update:
Widget header text and messages (example: the offer message shown inside the widget)
Button labels (example: “Start sharing” / “Copy link”)
Social share text (Facebook / X / WhatsApp / Telegram)
Brand colors (button color, heading color, text color, background/card color)
Fonts (heading and body font)
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.