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 > Actions > Edit Code 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 JavaScript snippet with what's displayed on the Integration Code page 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: '{{ checkout.order_id }}',
               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>

Shopify Integration

In order to add an additional layer of reward validation and program integrity, we recommend adding a Shopify Private Integration to your Friendbuy account.

This will allow our platform to verify orders are real and not cancelled or refunded before rewarding an Advocate. First you will need
to create a Shopify Private app to access the Admin API:

1. Follow these instructions to create a private app in your Shopify store for Admin API use. We only need read access for the Admin API to verify customers and orders. We do not need Storefront API access.

2. Once the private app is created, in your Friendbuy dashboard, add a Shopify Private integration.

3. Copy the API key and Password from your Shopify Private app created in step 1. The Shop Name is the first part of the URL of your store, e.g. if your store URL https://my-store.shopify.com, you would enter my-store as your shop name.

Now you're ready to install your widgets!

Note on Testing
If you plan on testing out new customer reward validation with Friendbuy via Shopify's test purchase gateway, the above script should be temporarily modified. This is required because as Shopify does not include test orders in its calculation for order.customer.orders_count.

You'll want to replace this line:

new_customer:  {% if order.customer.orders_count == 1 %}true{% else %}false{% endif %}
              }

with this line:

new_customer:  } % if order.customer.orders_count <= 1 %}true{% else %}false{% endif %}

Once testing is complete, please revert the back to:

new_customer:  {% if order.customer.orders_count == 1 %}true{% else %}false{% endif %}
              }

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

Email Capture Widget
Distribute an offer to referred friends

Since you’ve just setup referral widgets to reward your Advocates, now you can create an Email Capture Widget to distribute an offer to referred friends that they can use toward their first purchase on your site.

In your Friendbuy account, navigate to Email Capture > Widgets > Click ‘Create Email Capture Widget’ (it’s the green button on the top right).

Next, you’ll want to set the widget display settings so that the widget appears embedded on the page.Navigate to Settings > Widget Display Settings > Embedded. Make sure you save this setting.

Then, 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 redirect referred Friends to an Email Capture Widget to redeem their offer.

Quick Tip: You can display a single use coupon code on the ‘thanks’ state of the Email Capture Widget by inserting the {{coupon_code}} merge variable.You will want to connect the coupon bank you created in the Bulk Discounts App to this widget in order for the coupons to display on the widget.

Navigate to Email Capture > Widgets > Click a widget from the list > Click ‘Thanks’ (option #2)

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.