Shopify

The ReferralHero/Shopify integration is very powerful and allows you to introduce customers to your referral program and track referrals in several ways. It is a good idea to fully read this support document so that you know the various options for adding ReferralHero to Shopify. Here is what we will cover:

• Add the ReferralHero Global Tracking Script.

• Add a ReferralHero Widget to a content page.

• Add a ReferralHero Widget to the post-purchase, 'Thank You Page' or 'Order Status Page'.

• Sign up customers and track Referrals after they successfully purchase.

• Track Referrals after they successfully purchase.

Regardless of how you set up your referral program. You must install the ReferralHero Global Tracking Script in the header of your Shopify website as a first step.

Add the Global Tracking Script

The ReferralHero Global Tracking Script allows ReferralHero to track referral data across your website. You will need to install this script to power any kind of ReferralHero campagin.

Step 1: Log into your Shopify account and go to Online Store > Themes

Step 2: Click on the Actions button on the top right and choose Edit Code

Step 3: Under layout, select theme.liquid

Step 4: In ReferralHero go to your campaign dashboard > Installation instructions and copy your Tracking Code.

Step 5: Paste the ReferralHero Tracking Code in the theme.liquid file between the [head] and [/head] tag but just before the [/head] tag.

Note

Some themes will use the tag, {/head}, [/header], or other variations of [/head]. These will work in the same way.

Step 6: Save the changes. Your ReferralHero Global Tracking Code is now installed.

Add a ReferralHero Widget to a Content Page

Let's say that you have created a dedicated 'Refer a Friend' page where people can sign up and get information about your referral campaign. You will want to add the ReferralHero Widget to this specific page.

Step 1: Go to the page where you want the widget to appear.

Step 2: In the editor, click on the top right icon Show HTML.

Step 3: Copy and paste the ReferralHero Widget script you'd like to appear, for example, if you want to use the ReferralHero Combo Widget add <div id="maitre-widget"></div> in the text area.

Step 4: Save your changes and the ReferralHero Widget will appear on the page.

Step 5: Please continue on if you are setting up a campaign with a custom event, such as a purchase.

Add a ReferralHero Widget to The Post Purchase Page

Let's say you want to add a ReferralHero Widget to the Shopify Thank You or Order Status Page where people can sign up and/or immediately start sharing your brand with a friend. You have two options for how people will interact with your referral campagin:

1. Ask customers to sign up after they purchase.

2. Automatically sign up customers after they purchase (see the next section "Sign Up Customers and Track Referrals").

Ask Customers to Sign Up

Step 1: In your Shopify account and to go Settings > Checkout

Step 2: Find Additional scripts > Order status page

Step 3: Add your ReferralHero Global Tracking Script into the top most portion of the text area as shown.

Step 4: Add <br><br> and the ReferralHero Widget Script into the bottom-most portion of the text area as shown.

Ex. If you want to add the ReferralHero Combo Widget add:

<br><br>
<div id=”maitre-widget”></div>

This is an example of what your Addition Script section might look like with the ReferralHero scripts and others.

Step 5: Check to make sure the ReferralHero Widget is displayed on the Shopify post-purchase Order Status Page.

Sign Up Customers and Track Referrals

If you want to sign up all customers to your referral program AND track and confirm a referral post-purchase, you will want to follow these steps. Here are a few use cases that can all be accomplished:

1. You want to sign up all customers post-purchase and introduce the referral program via Klaviyo.

2. You want to automatically sign up and show the ReferralHero Share Screen immediately post-purchase (with no manual signup requirement), so customers can start sharing your brand with their friends.

3. You want to track successful purchases by customers who have been referred via a ReferralHero unique referral link (and trigger a reward for the referrer).

Step 1: In your Shopify account and to go Settings > Checkout

Step 2: Find Additional scripts > Order status page

Step 3: Add your ReferralHero Global Tracking Script into the top most portion of the text area as shown.

Step 4: Add the ReferralHero RH.organicTrackReferral() Script into the bottom-most portion of the text area as shown.

<script type="text/javascript">
  window.RHConfig = {
    callbacks: {
        ready: function() {
        var data = {
        email: "{{checkout.email}}",
        }
            RH.organicTrackReferral(data)
        }
    }
}
</script>

Step 5: If you also want to immediately show the ReferralHero Share Screen add <br><br> and the ReferralHero Widget Script into the bottom-most portion of the text area as shown.

Ex. If you want to add the ReferralHero Combo Widget add:

<br><br>
<div id=”maitre-widget”></div>

Custom Event

If you're setting up a ReferralHero campaign with a custom event, such as a purchase, you'll want to follow through with these additional steps. You would do this if you want a successful referral to count only after a purchase has taken place.

As an example, your ideal user journey would look similar to this:

1. User subscribes to ReferralHero campaign via ReferralHero Widget or other method

2. Subscriber shares referral link to friend

3. Friend visits website

4. Friend completes a purchase

5. Original referrer is rewarded for the friend referral

Step 1: In your Shopify account and to go Settings > Checkout

Step 2: Find Additional scripts > Order status page

Step 3: Add the two below scripts into the text area as shown:

Copy this script:

<script type="text/javascript">
  window.RHConfig = {
     callbacks: {
       ready: function() {
           RH.trackReferral('{{checkout.email}}');
       }
    }
 }
</script>

Note: This script will only capture the email address from the Shopify checkout page to the created ReferralHero subscriber profile. If you want to capture additional data points, such as Name, Conversion Value, etc you will need to reference this page and add additional Shopify Checkout Objects.

In your ReferralHero account copy the Tracking Code (your ReferralHero Tracking Code will look slightly different):

Paste the scripts into your Shopify text area as shown:

Step 4: You're done. Now, the referred friend and related relationship will not show in your ReferralHero subscriber list until a purchase takes place.