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.

In your Shopify account, navigate to Online Store > Themes > Edit HTML/CSS of the active theme:

Click on the theme.liquid file:

Copy the following code and paste it just before the closing </head> tag:

<script>
          window['friendbuy'] = window['friendbuy'] || [];
          window['friendbuy'].push(['site', 'xxxxx']);
          window['friendbuy'].push(['track', 'customer',
              {
                  id: '{{ customer.id }}',
                  email: '{{ customer.email }}',
                  first_name: '{{ customer.first_name }}',
                  last_name: '{{ customer.last_name }}'
              }
          ]);
          (function (f, r, n, d, b, y) {
              b = f.createElement(r), y = f.getElementsByTagName(r)[0];b.async = 1;b.src = n;y.parentNode.insertBefore(b, y);
          })(document, 'script', '//djnf6e5yyirys.cloudfront.net/js/friendbuy.min.js');
 </script>

⚠️ 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.

<script>
          window['friendbuy'] = window['friendbuy'] || [];
          window['friendbuy'].push(['site', 'xxxxx']);
          window['friendbuy'].push(['track', 'customer',
              {
               id: '{{ customer.id }}',
               email: '{{ customer.email }}',
               first_name: '{{ customer.first_name }}',
               last_name: '{{ customer.last_name }}'
              }]);
          window['friendbuy'].push(['track', 'order',
              {
               id: '{{ order_number }}',
               amount: '{{ total_price | money_without_currency }}',
               coupon_code: '{% if order.discounts|length > 0 %}{{order.discounts[0].code}}{% endif %}',
               email: '{{ customer.email }}',
               new_customer:  {% if order.customer.orders_count == 1 %}true{% else %}false{% endif %}
              }
              ]);
          window['friendbuy'].push(['track', 'products',
              [
            {% for line in line_items %}
            {
               sku: '{{ line.sku or line.product.id }}',
               price: '{{ line.price | money_without_currency }}',
               quantity: '{{ line.quantity }}'
            }
            {% unless forloop.last %},{% endunless %}
            {% endfor %}
              ]
          ]);
          (function (f, r, n, d, b, y) {
              b = f.createElement(r), y = f.getElementsByTagName(r)[0];b.async = 1;b.src = n;y.parentNode.insertBefore(b, y);
          })(document, 'script', '//djnf6e5yyirys.cloudfront.net/js/friendbuy.min.js');
</script>

After saving the code, you're ready to install your widgets!

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.  

In your Friendbuy account, navigate to Referral & Sharing > Widgets > Refer-a-Friend Landing Page.  On the widget detail page, click "Widget Installation Code" to view and copy your 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.  

In your Friendbuy account, navigate to Referral & Sharing > Widgets > Post-Purchase Overlay.  On the widget detail page, click "Widget Installation Code" to view and copy your 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.

Next Steps

Now that all of your integration and widget code has been installed, all you have left to do is style your widgets and configure your rewards before launching your referral program. 

Did this answer your question?