How to Integrate Shift4Shop (3dcart) with Genius Referrals

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 that allows businesses to create and manage online stores. It offers tools for store design, product management, payment processing, and marketing. It also provides features to optimize SEO and analyze business performance.

Requirements

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

  • Register on the Platform: Sign up for Genius Referrals.
  • Advocate Portal: Choose and customize a template for your Genius Referrals program. This portal is designed for users like Prospects, Agents, Affiliates, and Influencers.
  • Shift4Shop Store: You need access to an active Shift4Shop store to add code snippets for integrating your referral program.

Step 1: Initiating Shift4Shop Integration with Genius Referrals

To integrate the Genius Referrals program into your Shift4Shop 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.

Step 2: Generating the Advocate Portal Script

Based on your online store's features, choose the installation option that best suits your needs: Embedded Code, Popup Window, or Floating Widget. To view the details for each script, navigate to Genius Referrals: Program Setup > Integrations > Code Snippets > Installation.

For the Popup Window and Floating Widget options, there is a configuration section where you can customize details such as style and positioning.
Installation options.

Generating the Code Snippet

  1. Click on the desired option.
  2. Select the page where you want to install it.
  3. Copy the corresponding code snippet.
  4. Follow the instructions to install it on your store.
This process will provide you with the necessary code to integrate the Advocates Portal into Shift4Shop.
Embedded Code 
<!-- 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 -->
Modal Window
Para instalar el programa de referidos en Shift4Shop con la opción de Ventana emergente utilice el fragmento de código siguiente:
<!-- 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":"modal"
},
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 -->
Floating Bubble
Para instalar el programa de referidos en Shift4Shop con la opción de Burbuja flotante utilice el fragmento de código siguiente:
<!-- 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":"bubble"
},
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 -->

Step 3: Installing Advocate Portal Script in Shift4Shop

Follow these steps to add the Genius Referrals template to your Shift4Shop store:

  1. Log into your Shift4Shop account with your credentials.
  2. Create a new page in Shift4Shop with a blank page design and name it Refer and Earn.
  3. Insert a column block with a 100% variation.
  4. In the column block, add a custom HTML block and set its width to Full width.
  5. Paste the code snippet you selected in Step 2.
  6. Save all changes and load the Refer and Earn page to view the template.
Installing the conversion code snippet in 3dcart

Step 4: Selecting Tracking and Conversion Scripts

  1. Go to the Integrations section on the Genius Referrals platform.
  2. Navigate to the Code Snippets subsection.
  3. Locate the Conversion Tracking section and click on "Platform."
  4. Select Shift4Shop from the platform selector.
  5. Set the cookie expiration time, the duration for which the tracking cookie remains active in browsers to track your referrals (e.g., 180 days).
  6. Click the Next button to generate the code snippet.
Tracking Code Snippet
<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){
const grSetting={
     grCookieLifeTime:"210"
},
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.2.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 -->

Install the Tracking Code Snippet

Log in to Your Store Manager.
Navigate to Site Content:
  • Go to Content > Site Content > Edit Other Sections > Header & Footer.
  • Paste the tracking code in the Global Footer field with WYSIWYG mode off.
  • Click Save.
Install the Conversion Code Snippet
Next, return to the Genius Referrals Portal and click the "Next" button to generate the second conversion script. Copy the tracking code snippet and follow these steps to install it:

  1. Log in to Your Store Manager.
  2. Navigate to Site Content:
  3. Go to Content > Site Content > Edit Other Sections > Titles & Content.
  4. Look for Checkout #4 and click Edit under Actions.
  5. Paste the conversion code in the Footer section.
  6. Click 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 -->
Step 5: Install the Tracking and Conversion Code in Shift4Shop
Step 1: Install the Tracking Code
  1. Log in to your Store Manager.
  2. In the left navigation menu, go to Content → Site Content → Want to edit other sections? → Header and Footer.
  3. Add the script in the Global Footer field with the WYSIWYG mode turned off.
  4. Click the Save button at the top right of the page to save your changes.

Step 2: Generate the Conversion Script
Next, return to the Genius Referrals Portal and click 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 → Want to edit other sections? → Titles and Content.
  3. Search for Pay #4 and click the Actions → Edit button located on the far right of the page list.
  4. Add the script in the Footer section.
  5. Click Save Changes.
Conversion Code Snippet
<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referrals-landing-page-748",
     "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.2.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 -->

Step 6: Final Testing and Validation

Once the installation is complete, your referral program should be functioning correctly. Customers and visitors should be able to access the program and recommend your services.

1 - Ensure the Navigation Link is Added: Look for a new link in the website’s 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 how the program works.
  • Sign up to participate.
  • Refer your products through various promotion channels such as personal links, emails, social media posts, blogs, chats, etc.
  • Monitor the program's performance and adjust strategies based on the referrals generated and bonuses earned.
  • Manage bonuses and payments, redeemable for credits, cash via PayPal, gift cards, products, coupons, and more.
3 - Post-Purchase Action: If you've installed a post-purchase template, customers will find it on the purchase confirmation page. This template encourages customers to refer your products immediately after completing an order, boosting referral potential (highly recommended).

Example Scenario: How the Referral Program Works

Example Scenario: How the Referral Program Works
  • You run a Shift4Shop store selling t-shirts.
  • Your referral program rewards customers with $10 for each qualified referral.
  • John, a customer, refers Matt, who completes a purchase.
  • John receives a $10 bonus.
Testing Steps

  1. Referral Creation:
  • John shares his referral link with Matt.
  • Matt visits the store using the link, makes a purchase, and is listed as a referral in Genius Referrals.
  1. Bonus Allocation:
  • Verify John's bonus by checking the Bonus Section in Genius Referrals.
By conducting these tests, you can verify the proper functioning of your referral program, ensuring advocates are rewarded as expected.
Referral Program process

Testing John's Ability to Share Products:

To successfully refer products, John needs to access the referral program page and use the available referral tools.

John can find these tools under the Share tab. In this scenario, John shares his personalized URL with Matt, allowing 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 his referral link, Matt clicks on it and lands on your store's referral landing page. Matt then browses the products, adds items to his cart, and completes a purchase. After Matt's purchase is complete, a new referral is created in Genius Referrals.

To verify this, go to the Members or Referral section—Matt should now be listed as a referral.
Generating a new referral on your Shift4Shop store

Testing Bonus Allocation:

To ensure John receives a bonus after Matt completes the purchase, follow these steps:

  1. Once Matt completes his purchase and the order status is updated to "Payment accepted," John should receive a $10 bonus in Genius Referrals.
  2. Navigate to the Bonus section to confirm that John's new bonus appears in the list.
By conducting these tests, you can verify that your referral program is functioning smoothly and that advocates like John are rewarded appropriately for successful referrals.

Bonus given to advocate on Shift4Shop Referral Program



Was this page helpful?
Español
LANGUAGE