Skip to main content

Using a floating referral widget for your store (Non-Shopify)

Set up a floating referral widget on your site to get customers to sign up for your referral program

Adam avatar
Written by Adam
Updated over 2 weeks ago

Embed a referral widget anywhere on your website where visitors can sign up for your referral or affiliate campaign.

Before you proceed, take note that:

  • You may need a developer to assist you with this process.

  • Your platform must allow the insertion of an HTML or JavaScript snippet.

  • Steps may vary depending on the store platform you're using.

View this widget live on our official merchandising store!


Embedding the referral widget

ReferralCandy app on Shopify

With Shopify 2.0, apps are no longer advised to use script-based widgets. Because of this, your referral widget snippet code won't appear in Shopify admin and must be requested from the ReferralCandy support team.

To enable the floating referral widget for Shopify merchants:

  1. Contact us to get the code snippet for the referral widget.

  2. On the Shopify Admin page, go to Online Store and click Themes.

  3. Find your active theme and click Customize.

  4. Click the three-dot menu and select Edit code.

  5. In Layout, select theme.liquid and paste the code snippet at the bottom of the page.

  6. Click Save. Visit your site to test if the widget is working.

Other platforms

  1. On the ReferralCandy dashboard, go to Campaigns > Select your campaign.

  2. Go to Widgets.

  3. In the Referral Widget section, click Copy to copy the code snippet to your clipboard. The referral widget contains the refcandy-poprocks script.

  4. Paste the code just before the </body> on your store's page.

  5. Save the changes.

Note: Your campaign must be Live for the referral widget to appear.

Configuring the position of the widget

Switching the location

The widget is located at the lower right-hand side of the page by default. It is possible to move this to the lower left-hand side of the page by specifying the value of the data-location attribute to "left".

Changing the stack order (z-index)

If you have multiple banners or widgets on your store, you can set the z-index value of the referral widget to prevent site elements from overlapping.

For instance, if you have a GDPR consent banner that you want to appear on top of the widget, you can set the zIndex to a lower value.


πŸ’¬ Need help? Click the chat widget on the right to start a conversation. Learn more


Did this answer your question?