Shopify

The ReferralHero integration with Shopify enhances your referral program by providing multiple ways to engage customers and accurately track referrals. This guide will walk you through the essential steps to ensure a seamless setup:

Add the ReferralHero Global Tracking Script: Install the global tracking script in the header of your Shopify site to activate your referral program and capture referral data.
Add a ReferralHero Widget to a Content Page: Embed the widget on a content page to make it easy for users to engage with your referral program.
Sign Up Customers and Track Referrals After Purchase: Ensure that customers are signed up for tracking after they complete a purchase, enabling accurate referral tracking.
Track Referrals and Their Transactions: Monitor referrals and their transactions to measure the effectiveness of your referral program and gather insights on customer behavior.

IMPORTANT! Regardless of your chosen setup for the referral program, installing the ReferralHero Global Tracking Script in the header of your Shopify website is crucial. This script is the foundation for tracking referrals and ensuring your referral program functions correctly across all pages of your site. Without this step, your referral tracking and engagement features will not operate as intended.

Add the Global Tracking Script

The ReferralHero Global Tracking Script is essential for tracking referral data and powering your ReferralHero campaigns. Here’s how to get it up and running on your Shopify site:

STEP 1 -> Log into Your Shopify Account: Start by accessing your Shopify dashboard. Go to Online Store and then Themes.

STEP 2 -> Edit Your Theme: Click the Actions button in the top right corner and select Edit Code.

STEP 3 -> Locate the Theme File: Under Layout, find and select theme.liquid. This is where you'll add your tracking script.

STEP 4 -> Copy Your Tracking Code: In ReferralHero, navigate to Campaign Overview > Edit Campaign > Launch Instructions. Copy the Tracking Code provided.

STEP 5 -> Paste the Code: In the theme.liquid file, paste the ReferralHero Tracking Code between the <head> and </head> tags, ensuring it’s just before the closing </head> tag.

STEP 6 -> Save Your Changes: Hit Save to apply the changes. Your ReferralHero Global Tracking Code is now installed and ready to go!

By following these steps, you ensure that ReferralHero can effectively track referral data across your Shopify store, setting the stage for a successful referral program.

Want to boost your referral program with a dedicated 'Refer a Friend' page? Here's how you can easily add a ReferralHero Widget to any content page in your Shopify store.

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

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

Step 3: Copy and paste the ReferralHero Widget script into the text area. For example, to use the ReferralHero Advocate Dashboard Widget, add <div id='referralhero-dashboard-MFxxxxxxxxxx'></div>.

Step 4: Save your changes, and voilà! The ReferralHero Widget will now appear on your page.

If you're setting up a campaign with a custom event like a purchase, follow through with the next steps for a seamless integration.

Using Custom Events and Pixels for Tracking

Leverage Shopify's Custom Events and Web Pixels to track organic subscribers, referrals, and transactions effortlessly. Let's say you want to track referrals and their transactions on the post-checkout page or thank you page. Follow these steps

Step 1: Navigate to Settings > Customer Events in your Shopify dashboard.

Step 2: Click on the Add a Custom Pixel button.

Step 3: Copy the Global Tracking Script from your ReferralHero campaign and paste it into the custom pixel field.

Step 4: Copy the following snippet to track referrals and transactions on the post-checkout event.

window.RHConfig = {
  callbacks: {
    ready: function() {
        analytics.subscribe("checkout_completed", async(event) => {
  
          const data = {
            email: event.data?.checkout?.email,
            transaction_id: event.data?.checkout?.order?.id,
            amount: event.data?.checkout?.totalPrice?.amount,
            product_id: event.data?.checkout?.lineItems[0]?.variant?.product?.id,
          };

          RH.trackReferral(data.email);
          RH_MFxxxxxxxxx.trackTransaction(data);  
        });
      }
    }
};

Note:

You can find more information on available customer events and data value variables by checking this link.
If you want to track ordinary subscriber & referrals both you can use this methodRH_MFxxxxxxxxxx.organicTrackReferral(uniqueIdentifier);For more methods and detailed usage, refer to the javascript methods.

Step 5: Once you've configured everything, click the Save button.

Step 6: After adding the custom pixel and configuring the necessary code, you’ll need to connect the pixel to your online store.

Your pixel is now linked to the event, and ReferralHero will begin tracking the referral data and transactions associated with that event.

If you're currently using additional scripts in the checkout section to add scripts to the Thank You and Order Status pages, please be aware that this feature will be deprecated and removed after August 28, 2025. To ensure your tracking continues to function correctly, you should switch to using web pixels.