Integrating Shift4Shop with Genius Referrals: A Step-by-Step Guide

Learn Step by Step How to Integrate Shift4Shop (3dcart) with Genius Referrals.

Please Note: Shift4Sho Program Integration Integration is only available on certain Genius plans. See our plans and pricing here.
Shift4Shop is an e-commerce platform for building and managing online stores, offering customizable templates and powerful features for seamless selling experiences.

Requirements

Before you begin the installation process for your referral program on Shift4Shop, ensure you have the following:

  • Advocate Portal Template: This is a template that allows your customers and visitors to access the referral program. It caters to various user types, including prospects, agents, affiliates, and influencers.
  • Shift4Shop: An active shop on the Shift4Shop platform where you plan to integrate the referral program.

Optional Requirements:

  • A Post-Purchase Template: This template can be integrated into the order confirmation page, enabling your customers to seamlessly share your products immediately after completing a purchase.

To install the Advocate Portal on Shift4Shop, first, you must generate the script in Genius Referrals and then install it in Shift4Shop.

Initiating Shift4Shop Integration with Genius Referrals

To integrate the Genius Referrals program into your 3dcart store, you'll need to embed three specific code snippets across various pages. These include:

  1. A code snippet enabling installation of the advocate portal template.
  2. The tracking code snippet is placed on your landing page to monitor referrals.
  3. The conversion code snippet is implemented on the thank-you purchase page.
Please refer to the subsequent section for detailed instructions and examples for each scenario relevant to your store.

Generating the Advocate Portal Installation Script

In the installation section, you'll encounter four options for installing the program:

  • Embedded Code
  • Modal Window
  • Floating Bubble
  • Slider
Each option offers unique features to suit various store requirements. Consider your store's layout and functionality to determine the best fit for your needs. Once you've selected the appropriate option, you'll gain access to the corresponding code snippet to install the Program Template.

The Modal Window, Floating Bubble, and Slider options provide additional customization settings, allowing you to tailor the referral program's appearance and behavior to align with your store's branding and user experience. You can adjust parameters such as style and location to integrate the referral program seamlessly into your website and enhance engagement with your audience.
Installation options.
To generate the embeddable code snippet:

1. Click on the Embedded Code option.
2. Choose the template you want to install in 'Step 1: Select template'.
3. Choose 'No' for 'Step 2: Member Access'. The system will display the embeddable code snippet and instructions on how to install it on your store.
Embedded Code Example

<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-genius-magpie-template-73">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "your-advocate-portal",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "en",
     "grInstallMethod":"embeddedcode"
},
e=window,t=document;e.addEventListener("DOMContentLoaded",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.6.1.min.js",e.onload=function(){GRToolbox.init(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS CODE SNIPPET -->

Installing Advocate Portal Script in Shift4Shop

To add the Genius Referrals template to your Shift4Shop store, follow these steps:

1- Access Your Shift4Shop Account:
  • Log in to your Shift4Shop account using your credentials.
2- Navigate to Page Creation:
  • Once logged in, locate and click on "Pages" in the left-side navigation menu.
  • Click on "Add New Page" and choose a blank page layout.
3- Title the Page:
  • Provide a title for the page, such as "Refer and Earn."
4- Add a Column Block:
  • Click on the Block Inserter icon (usually represented by a "+" symbol).
  • Choose the Column block and select the 100% variation.
5- Insert Custom HTML Block:
  • Inside the Column block, add a Custom HTML block.
  • Adjust the width of the block to Full width.
6- Paste the Code Snippet:
  • Paste the code snippet obtained from Genius Referrals into the text area of the Custom HTML block.
7- Preview and Save:
  • Click on the "Preview" button to see how the Advocate Portal will appear.
  • Once satisfied, click on the "Update" button to save the changes.
Installing the conversion code snippet in 3dcart

Installing Tracking and Conversion Code Snippets

  1. Navigate to Integrations > Code Snippets > Conversion Tracking > Platforms.
  2. Choose Shift4Shop (3DCart) in the Platforms selector in 'Step 1. Choose your platform'.
  3. Enter the cookie expiration time, which is the time the tracking cookie remains active in the browsers to track your referrals.
  4. Click on the Next button to generate the scripts.
Tracking Code Example

<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){
const grSetting={
     grCookieLifeTime:"180"
},
e=window,t=document;e.addEventListener("DOMContentLoaded",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.6.1.min.js",e.onload=function(){GRToolbox.catchReferrer(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS TRACKING CODE -->
Next, copy the first tracking code and install it using the following instructions:

  1. Log in to your Store Manager.
  2. Using the left-hand navigation, go to Content → Site Content → Looking to Edit Other Sections? → Header & Footer.
  3. Add the script to the Global Footer field with the WYSIWYG mode turned off.
  4. Click the "Save" button at the top right of the page to commit your changes.
Next, go back to the Genius Referrals Portal and click on the Next button to generate the second conversion script. Copy the tracking code snippet and install it using the following instructions:

  1. Log in to your Store Manager.
  2. Go to Content → Site Content → Looking to Edit Other Sections? → Titles & Content.
  3. Look for "Checkout #4" and click its "Actions → Edit" button located to the far right of the page listing.
  4. Add the script to the Footer section.
  5. Click on "Save Changes".
Conversion Code Example

<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "genius-magpie-template-47323",
     "grCustomerFirstname": "[ofirstname]",
     "grCustomerLastname": "[olastname]",
     "grCustomerEmail": "[oemail]",
     "grCustomerCurrencyCode": "USD",
     "grCanRefer": false,
     "grReference" : "Invoice Number: [invoice-prefix] [invoice-number]",
     "grPaymentAmount" : "[total_noformat]"
},
e=window,t=document;e.addEventListener("DOMContentLoaded",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.6.1.min.js",e.onload=function(){GRToolbox.processCustomerAndBonus(grSetting).then(e=>{})};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS TRACKING CODE -->

Test the Referral Program Installation

Once the installation is complete, your referral program should be operational, allowing clients and visitors to engage with it seamlessly. Here's what you can expect to observe in your store:

1- Navigation Link Addition: Look for a new link in the website navigation menu labeled 'Refer and Earn.' Visitors and customers (advocates) can access this link to participate in the referral program.
2- Referral Program Interface: Navigate to the Referral Program page to find a user-friendly interface where advocates can:
  • Learn about program mechanics.
  • Sign up to participate.
  • Refer your products through various channels like personal links, emails, social media posts, blogs, chats, etc.
  • Monitor program performance and adapt strategies based on generated referrals and bonuses.
  • Manage bonuses and payouts, redeemable for credits, cash via PayPal, gift cards, products, vouchers, and more.
3- Post-Purchase Action: Customers will encounter it on the purchase confirmation page if you've installed a Post-Purchase template. This template prompts customers to refer your products immediately after completing an order, enhancing referral potential (highly recommended).

Example Scenario: How the Referral Program Works

In this scenario, consider the following assumptions:

  • You operate a Shift4Shop store specializing in online t-shirt sales.
  • A referral program is established with Genius Referrals, enabling customers and visitors to refer your products to their network.
  • The referral campaign rewards customers $10 for each qualified referral, defined as a referral who completes a purchase.
  • John Smith, a loyal customer, is enthusiastic about sharing your products with friends and family. His details are as follows:
- Name: John.
- Last Name: Smith
- Email: john@example.com
  • John referred his friend Matt to your store so he could purchase t-shirts. Matt's details are:
- Name: Matt
- Last Name: Hanks
- Email: matt@example.com
  • Upon Matt's completion of a purchase, John receives a $10 bonus as per the referral program terms.
Refer to the provided image for a visual representation of the referral program flow we'll be testing.
Referral Program process

Testing John's Ability to Share Products:

For John to successfully refer products, he must access the referral program page and utilize the available referral tools.
John can utilize these tools located within the "Share" tab. In this scenario, John shares his personalized URL with Matt, enabling Matt to explore your products and make a purchase.
Allowing your customers to refer your services on your referral program

Testing Referral Creation:

After John shares your products with Matt, Matt clicks on John's share link and lands on your store's referral landing page.
Matt proceeds to browse products, add some to the cart, and complete a purchase.
Following Matt's purchase, a new referral is generated on Genius Referrals.
To verify the creation of the new referral, navigate to the Members section. Matt should be listed among the referrals.
Generating a new referral on your Shift4Shop store

Testing Bonus Allocation:

To ensure that John receives a bonus upon Matt's purchase completion, follow these steps:
Once Matt completes the purchase and the order status is updated to "Payment accepted," John should receive a $10 bonus on Genius Referrals.
Navigate to the bonus section to confirm whether John's new bonus is reflected in the list.
By conducting these tests, you can verify the seamless functioning of your referral program, ensuring that advocates like John are appropriately rewarded for their successful referrals.

Bonus given to advocate on Shift4Shop Referral Program



Was this page helpful?
Español
LANGUAGE