Shopify

To complete this process, you must have access to your website source code and be relatively comfortable with HTML (or have a developer that can help you).

Installing your Integration Code

SmartPixel

The SmartPixel handles all of the communication between your website and your Friendbuy account. This should be installed on every page of your website to enable referral tracking and widget functionality.

⚠️ Before saving the code, replace 'xxxxx' on line 3 of the SmartPixel with what's displayed on the SmartPixel inside your account (you can find it here). Make sure to keep the single quotes around the value that replaces the x's.

After saving the code, you can move to the next step.

Conversion Tracker

The Conversion Tracker monitors conversions which are completed transactions as the result of a referral (a friend makes a purchase). In order to track this data, the Conversion Tracker code snippet will be placed on the checkout page.

If your conversion event is not a purchase, then disregard the following instructions and install the Conversion Tracker code on the page where the conversion would take place.

Navigate to Settings > Checkout:

Scroll down to the Order Processing section and find the "Additional Scripts" section. Paste the following code at the bottom of the text box. Note that you'll need to repeat the process of replacing 'xxxxx' in the code with what's displayed in the SmartPixel of your Friendbuy account. You'll also notice that the code here looks slightly different than what's shown in your account - we've made tweaks to accommodate the variables and additional pieces of code needed for Shopify.

Installing your widgets

⚠️ Before installing your widgets, make sure you've installed the integration code via the steps above - your widgets will not work without it.

Site-wide Overlay

This widget is preconfigured to appear as a ribbon on the side of your website that triggers a popup of the widget. Since the display setting for this widget uses the SmartPixel code, all you need to do is publish the widget in your Friendbuy account for it to show up on every page of your website.

Refer-a-Friend Landing Page

This widget is preconfigured to be embedded on a page of your site and will appear in line with your website's content. To install it, you'll first need to copy the Refer-a-Friend Landing Page widget code.

Now that you've copied the widget code, it's time to create a new page in your Shopify store. To do this, Navigate to Online Store > Pages and click on "Add Page" in the upper right hand corner. Toggle the "Show HTML" button under the content section and paste the widget code in the editor:

Once the page has been saved, the widget will appear on this page once it's been published inside your Friendbuy account! Now you can use this page to promote your referral program by linking to it via banners in your newsletters and transactional emails, as well as Facebook and Twitter posts.

Post-Purchase Overlay

This widget is preconfigured to pop up immediately when someone lands on your "Order Confirmation" or "Thank You" page. To install it, you'll first need to copy the Post-Purchase Overlay widget code.

Now that the widget code has been copied, you'll need to install it in the Checkout section of your store - just below the Conversion Tracker code you installed earlier. After saving the code, the widget will start popping up on your Thank You page once the widget is published in your Friendbuy account.