Step-by-Step Guide to Integrate Shift4Shop with Genius Referrals

Learn how to easily integrate your Shift4Shop online store (formerly 3dcart) with Genius Referrals. Follow our step-by-step guide to unlock powerful referral marketing capabilities—perfect for e-commerce businesses aiming to boost customer engagement and drive sales with customizable templates and robust features.
Please Note: Shift4Shop 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 starting the installation of your referral program on Shift4Shop, ensure you have the following:
  • Genius Referrals Account: Sign up for Genius Referrals to access and manage your referral program.
  • Advocate Portal Setup: Choose and customize a Genius Referrals template tailored for your advocates—whether they’re Prospects, Agents, Affiliates, or Influencers.
  • Active Shift4Shop Store: Access to a live Shift4Shop store is necessary to add the code snippets for seamless integration of 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 install 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 capture 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 > 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 that you want to install.
  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 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 -->
Modal Window Example
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 Example
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 using the Embedded Code option

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 "Platforms".
  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 Example
<!-- 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 -->

Step 5: Install the Tracking Code Snippet

  1. Log in to Your Store Manager.
  2. Navigate to Site Content.
  3. Go to Content > Site Content > Edit Other Sections > Header & Footer.
  4. Paste the tracking code in the Global Footer field with WYSIWYG mode off.
  5. Click Save.
Step6: 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 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 7: 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 products.

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.

Scenario: How the Referral Program Works

In this scenario, consider the following assumptions:

You operate a Shift4Shop store specializing in selling T-shirts online. A referral program has been established with Genius Referrals, allowing customers and visitors to refer your products to their network. The referral campaign rewards customers with $10 for each qualified referral, defined as a referral who completes a purchase. John Smith, a loyal customer, is excited to share your products with friends and family. His details are as follows:

John referred his friend Matt to your store to purchase T-shirts. Matt's details are as follows:

When Matt completes a purchase, John receives a $10 bonus according to the terms of the referral program. Refer to the provided image for a visual representation of the referral program flow we will be testing.
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 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