# 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. {% hint style="info" %} **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 ensures 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. {% endhint %} ## 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 followed by going 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 `` and `` tags, ensuring it’s just before the closing `` 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. ## Adding a ReferralHero Widget to a Content Page 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 `
`. **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 non-referrals, 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. ```javascript 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); }); } } }; ``` {% hint style="info" %} **Note:** * You can find more information on available customer events and data value variables by checking this [link](https://shopify.dev/docs/api/web-pixels-api/standard-events). * If you want to track ordinary subscriber & referrals both you can use this method`RH_MFxxxxxxxxxx.organicTrackReferral(uniqueIdentifier);`For more methods and detailed usage, refer to the [javascript methods](https://support.referralhero.com/integrate/javascript-web-api/track-multi-step-conversion-events#track-referral-conversion-event-or-add-an-organic-subscriber). {% endhint %} **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 any of those events. {% hint style="danger" %} Please be aware if you're currently using additional scripts in the checkout section to add scripts to the Thank You and Order Status pages, this feature will be deprecated and removed after August 28, 2025. Therefor to ensure your tracking continues to function correctly, you should switch to using [web pixels](https://berylsystems.gitbook.io/referral-hero-documentation/integrations/platform-specific-integration/shopify#using-custom-events-and-pixels-for-tracking). {% endhint %}