How to Manually Install Friendbuy On Shopify

Samantha Samuels Updated by Samantha Samuels

How to Manually Install Friendbuy On 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). Note we strongly recommend installing our Shopify app, which automates this process.

Installing your Integration Code

Merchant SDK

The Merchant SDK 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.

  1. In your Shopify account, navigate to Online Store > Themes > Actions > Edit Code of the active theme:

 

  1. Create a new snippet under Snippets > Add a new snippet

Call this new snippet friendbuy.liquid.

  1. Copy the following code and paste it into the snippet:

<script type="text/javascript" async="" src="https://static.fbot.me/shopify/friendbuy-shopify.js?merchantId=REPLACE_WITH_YOUR_MERCHANT_ID"></script><script type="application/javascript">  window["friendbuyAPI"] = friendbuyAPI = window["friendbuyAPI"] || [];  friendbuyAPI.merchantId = "REPLACE_WITH_YOUR_MERCHANT_ID";  friendbuyAPI.shopify = {    page: "{{ page_title }}",    {% if customer and customer.id and customer.email %}    {% assign fbtMessage = "now" | date: "%s" | append: ":" | append: customer.email | append: ":" | append : customer.id %}    {% assign fbSignature = fbtMessage | hmac_sha256: "REPLACE_WITH_YOUR_SECRET_KEY" %}    authMessage: "{{ fbtMessage }}",    authSignature: "{{ fbSignature }}",    customer: {      id: "{{ customer.id }}",      email: "{{ customer.email }}",      firstName: "{{ customer.first_name }}",      lastName: "{{ customer.last_name }}",    },    {% endif %}  }</script>

  

⚠️ Before saving the code, replace REPLACE_WITH_YOUR_MERCHANT_ID on lines 1 and 5 of the JavaScript snippet with what's displayed in the MerchantId on the Developer Center > Friendbuy Code page inside your account (you can find it here). Make sure to keep the double quotes around the value that replaces the REPLACE_WITH_YOUR_MERCHANT_ID. Additionally, replace REPLACE_WITH_YOUR_SECRET_KEY on line 10 with the Secret Key from your account, found next to the Merchant ID on the Friendbuy Code page. 

 

  1. After saving the code, you need to add this snippet to your main theme. In the editor, click on Layout > theme.liquid.

Right before the closing </head> tag, add this line:

{% include 'friendbuy' %}

 

  1. Save your changes and move onto 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.

  1. Navigate to Settings > Checkout and accounts:

  1. Scroll down to the Order Status Page section and find the "Additional Scripts" field.  

  1. Include the same code you added to your theme here:

<script type="text/javascript" async="" src="https://static.fbot.me/shopify/friendbuy-shopify.js?merchantId=REPLACE_WITH_YOUR_MERCHANT_ID"></script><script type="application/javascript">  window["friendbuyAPI"] = friendbuyAPI = window["friendbuyAPI"] || [];  friendbuyAPI.merchantId = "REPLACE_WITH_YOUR_MERCHANT_ID";  friendbuyAPI.shopify = {    page: "{{ page_title }}",    {% if customer and customer.id and customer.email %}    {% assign fbtMessage = "now" | date: "%s" | append: ":" | append: customer.email | append: ":" | append : customer.id %}    {% assign fbSignature = fbtMessage | hmac_sha256: "REPLACE_WITH_YOUR_SECRET_KEY" %}    authMessage: "{{ fbtMessage }}",    authSignature: "{{ fbSignature }}",    customer: {      id: "{{ customer.id }}",      email: "{{ customer.email }}",      firstName: "{{ customer.first_name }}",      lastName: "{{ customer.last_name }}",    },    {% endif %}  }</script>

 

  1. Don’t forget to add your Merchant Id and Secret Key!

 

Uninstalling Friendbuy

Note: if you are using the Friendbuy Shopify App, uninstallation will happen automatically when you remove the app in Shopify.

To manually uninstall Friendbuy, you just need to remove the snippets you added previously.

  1. In your Shopify account, navigate to Online Store > Themes > Actions > Edit Code of the active theme:
  2. Remove the following line from theme.liquid under Layout.

{% include 'friendbuy' %}

  1. Next delete the friendbuy.liquid file under Snippets:

  1. Lastly, remove the code you added under Settings > Checkout and accounts > Order Status Page > Additional Scripts.

How did we do?

Contact