Install Your Referral Program on Shopify

If you are in this section, we are assuming at this point that you have already personalized a referral template for your referral program our Design Center. If you haven't done this yet, please go to our Design Center and customize your referral template before continuing with this tutorial. 


Who should read this tutorial?

This tutorial is for clients with a Shopify online store. If you want to install a referral program on your Shopify e-commerce website, please continue reading. Otherwise, go to our integration section and find the guide that best fits your needs. 

Referral program shopify store




Requirements

The following list of items required on this guide.

  1. A Full Widget template with the Sign-Up and Login forms. This template is for visitors (advocates, agents, etc.) who want to refer your services but are not your customers, as they are not your clients they need to sign up for the referral program. 
  2. A Full Widget template without the Sign-Up and Login forms. This template is for your customers; they will be able to access the program using single sign-on
  3. A Shopify store

Watch our video and learn step by step how to do this integration 

Beginning Shopify integration with Genius Referrals

To install the Genius Referrals templates and tracking codes on your Shopify e-commerce, you’ll need to install the code snippets on some pages of your website. For instance, to catch new referrals, you need to add a code snippet to your customers/register.liquid file.

In the following sections, we’ll explain in detail some examples for every scenario you may have on Shopify.

To get the codes snippets, we ask Genius Referrals to generate the scripts needed for this integration. Go to the Design Center section, select a template from the list to see the code we need to add on your Shopify pages.


getting the code snippets from the shopify installation



Templates to be used in this integration

Note that we have two template 'Shopify templates with registration forms' and 'Shopify templates without registration forms' we will be using the code snippets of both templates. The idea is to install both templates on one page and loads the template in accordance with the user that is viewing the template. If the customer is logged in on your Shopify store, we will load template 'Shopify templates without registration forms' if not we will load template 'Shopify templates without registration forms'.

Now click on the “Get me the code” button to generate the code snippets.



code snippets for your shopify instalation


The image below shows the code snippets needed to get integrated with Genius Referrals.

List of code snippets to be embeded on your shopify for your referral program


Embedding the Full Widget Templates on your referral program page

To embed the Genius Referrals Templates first, we need to create a new Template on Shopify called genius-referrals and add the Genius Referrals CODE SNIPPET 1 for both templates. Then we’ll create a page on Shopify called 'Referral Program' to load the referral program. 

Creating a new template on Shopify to embed the Genius Referrals templates

Follow the instructions described here and create a template called genius-referrals.liquid and replace the content of the page with the following code: 


Creating a liquid page for your referral program



Code Snippet for genius-referrals.liquid template on your Shopify store

<!-- STARTING GENIUS REFERRALS CODE -->
<div class='page-width'>
   <div class='grid'>                
      <div class='grid__item medium-up--five-sixths medium-up--push-one-twelfth'>                      
           <div class='section-header text-center'>
               <h1>{{ page.title }}</h1>
           </div>
               <div class='rte'>                
                   {{ page.content }}
                   <span class='gr_full_widget_design'> </span>
                  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
                 <script type='text/javascript' src='https://template.geniusreferrals.com/bundles/portal/js/
geniusreferrals-tool-box_1.1.3.min.js'></script>                                  
<script type='text/javascript'>
                    var client = {email: "CUSTOMER_EMAIL",
                                 firstName: "CUSTOMER_NAME",                                                                                         lastName: "CUSTOMER_LASTNAME" };                                        
                    {% if shop.customer_accounts_enabled %}
                    {% if customer %}
                       client.email = "{{ customer.email }}";
                       client.firstName = "{{ customer.first_name }}";
                       client.lastName = "{{ customer.last_name }}";
                    {% endif %}
                    {% endif %}
                    grToolbox.loadTemplate({
                        "grTemplateSlug": 'referral-program-home-page-117',
                        "grCustomerEmail": client.email,
                        "grCustomerFirstname": client.firstName,
                        "grCustomerLastname": client.lastName,
                        "grCustomerCurrencyCode": 'USD',
                        "grLanguage": 'en' });
                 </script>
             </div>
         </div>
    </div>
</div>
<!-- ENDING GENIUS REFERRALS CODE -->


Replacing the example code with your custom code snippets

Make sure you replace the texts in red with the values that Genius Referrals generated for your templates. If you look closer to the code, you will notice that we are loading the template with slug Shopify-templates-without-registration-forms for customers who are already logged in and the template with slug hopify-templates-with-registration-forms for your visitors. The template with slug Shopify-templates-with-registration-forms is the one with the Signup and Login forms.


The liquid page needed to embed your referral program on shopify


Creating the referral program page to embed the templates 

Now, we are going to create a page called 'Referral Program' to load the genius-referrals.liquid template previously created. Follow the instructions on this page. Make sure that you've selected the genius-referrals template in the Template section.


A new page to load the referral program on your Shopify store 

The next step is to add the navigation link to your main menu or footer to link to the referral program page. Follow the instructions on this page. If everything goes well, you should be able to load the referral program on this new page. 


The referral program is embedded on shopify e-commerce store

Congratulations! You've completed the first part of this tutorial. We must install now the code snippets 2, 3 and 4. 


Installing CODE SNIPPET 2 to catch the referrer data

Installing the code snippet 2 is easier than code snippet 1, we just need to add the code at the very bottom of your theme.liquid file. 

Open the theme.liquid file on your Shopify store, follow these instructions and add the CODE SNIPPET 2 generated by Genius Referrals on one of your Templates.


Code snippet generated by Genius Referral

Code snippet to get the referrer data on your referral program  


<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script type="text/javascript" src="https://template.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.1.3.min.js"></script>
<script type="text/javascript">    
grToolbox.catchReferrer();
</script>



Code snippet installed on the theme.liquid page on your Shopify Store

referral program code snippet 2 installation on Shopify


Installing additional scripts on the theme.liquid file

To track new referrals and bonuses, we also have to install the following script: 

<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
 
<script type="text/javascript">    
jQuery(function () {        
jQuery("body").on("click", '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function () {            
var grAdvocateReferrerToken = grToolbox.readCookie('grAdvocateReferrerToken');            
var grAdvocateReferrerCampaignSlug = grToolbox.readCookie('grCampaignSlug');            
var grAdvocateReferrerReferralOriginSlug = grToolbox.readCookie('grReferralOriginSlug');            

jQuery("#gr_at").val(grAdvocateReferrerToken);            
jQuery("#gr_cs").val(grAdvocateReferrerCampaignSlug);            
jQuery("#gr_ro").val(grAdvocateReferrerReferralOriginSlug);            

grToolbox.deleteCookie('grAdvocateReferrerToken');         
grToolbox.deleteCookie('grCampaignSlug');            
grToolbox.deleteCookie('grReferralOriginSlug');            

var e = !0, r = "Please fill this out and you will be able to check out.";            
return jQuery('[name^="attributes"], [name="note"]').filter('.required, [required]').each(function () {                
jQuery(this).removeClass("error"), e && "" == jQuery(this).val() && (e = !1, r = jQuery(this).attr("data-error") || r, jQuery(this).addClass("error"))            }), e ? void jQuery(this).submit() : (alert(r), !1)        
})    
}), jQuery(window).unload(function () { 
   var e = jQuery('form[action="/cart"]');       
   if (e.size()) {            
    var r = {type: "POST", url: "/cart/update.js", data: e.serialize(), dataType: "json", async: !1};            
jQuery.ajax(r)        
  }    
});
</script>

<!-- ENDING GENIUS REFERRALS TRACKING CODE -->



The new code theme.liquid file  should look like this:


installing referral program code snippets on shopify store



Installing additional cart attributes on the cart-template.liquid file

Now we need to install 3 new attributes on your cart-template.liquid page. Follow these instructions to locate your cart-template.liquid page.  Then:

  1. Open the cart-template.liquid file and find the closing </form> tag in the code.
  2. On a new line right above the closing </form> tag, paste the following cart attributes.
  3. Click Save
  <!-- STARTING GENIUS REFERRALS TRACKING CODE --> 
    <input  id="gr_at" name="attributes[gr_at]" type="hidden" value="">
    <input  id="gr_cs" name="attributes[gr_cs]" type="hidden" value="">
    <input  id="gr_ro" name="attributes[gr_ro]" type="hidden" value="">
  <!-- ENDING GENIUS REFERRALS TRACKING CODE --> 


new attribures for your referral program


Installing CODE SNIPPET 3 to track new referrals and reward advocates

Once a purchase is completed we must try to track the referral and give a bonus to the referrer. This code snippet will be triggered on your checkout status page after a customer has completed a purchase on your website. To do this, use the following code snippet.


Heads Up

On this integration, you will need to use only 3 code snippets. If Genius Referrals is generating 4 code snippets, please ensure that you've selected the option 'Once the referral has completed a sign up form or purchase.' on section DesignCenter/YourTemplate/Step2/Integration


<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://template.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.1.3.min.js"></script>
<script type="text/javascript">
   
    document.cookie = setCookie(escape("grAdvocateReferrerToken"), escape("{{attributes.gr_at}}"), 180);
    document.cookie = setCookie(escape("grCampaignSlug"), escape("{{attributes.gr_cs}}"), 180);
    document.cookie = setCookie(escape("grReferralOriginSlug"), escape("{{attributes.gr_ro}}"), 180);

    grToolbox.processCustomerAndBonus({
        "grTemplateSlug": "referral-program-home-page-133",
        "grCustomerFirstname": "CUSTOMER_FIRSTNAME",
        "grCustomerLastname": "CUSTOMER_LASTNAME",
        "grCustomerEmail": "CUSTOMER_EMAIL",
        "grCustomerCurrencyCode": "USD",
        "grCanRefer": false,
        "grReference" : "REFERENCE",  /** could be the order id, timestamp, etc. **/
        "grPaymentAmount" : "PAYMENT_AMOUNT" /** optional (float) **/
    });
</script>
<!-- ENDING GENIUS REFERRALS TRACKING CODE -->




Replacing the example code with your custom code snippets

Make sure you replace the texts in red with the values that Genius Referrals generated for your templates.



On the Shopify admin panel, go to the /admin/settings/checkout page and find the section 'Order processing' and add the following code snippet on the 'Additional content and scripts'. It should look like this:


shopify rewarding bonuses on my referral program 


That's all; we have finished with the configuration process.  


Testing the Referral Program Integration

So far we've been creating and modifying pages to add the code snippets but, how do I know if the whole thing is working as expected? To make sure that everything is working okay we are going to run the following scenario: 


Scenario: Referring new prospects to a Shopify Store  

In this scenario, we are assuming the following: 

  1. You have a Shopify store that sells t-shirts online. 
  2. You have implemented a referral program with Genius Referrals to allow your customers and visitors to refer your products to friends, family, colleagues, etc.
  3. On your referral campaign, you are giving $10 to your customers for every qualified referral. A qualified referral is a referral that completes a purchase. 
  4. John Smith is one of your best customers that loves your products and is happy to share your services with his friends, family, colleagues, etc. This is his personal data: 
    1. Name: John 
    2. Lastname: Smith
    3. Email: john@example.com
  5. John refers his friend Matt so that he can buy new t-shirts in your store. This is his personal data: 
    1. Name: Matt 
    2. Lastname: Hanks
    3. Email: matt@example.com
  6. John receives $10 as bonus once Matt has completed a purchase

The following image represents that referral flow that we will be testing: 

Referral Program Flow


Testing that John can share services anywhere he want

For John to be able to refer products he needs to access the referral program page and use the referrals tools to share the services. John will be able to use all the tools on the 'Referral tools' tab. In this scenario, John sends to Matt his personal URL (referral tool 2) so that Matt can check out the services and become a customer. 


Allowing your customers to refer your services on your referral program




Testing that the referral (Matt) has been successfully created

Once John has shared the services with Matt, Matt will click on John's share link and will land on your store. Matt will browse your product, add some to the cart and finally pay for the products.  Once Matt has completed a purchase, a new referral will be generated on Genius Referrals. To check if the new referral has been created, go to your advocates section on Genius Referrals. You should be able to see Matt on the list. 



generating a new referral on your shopify store


Testing that a bonus is given to John once Matt has completed a purchase

Now we need to check if the advocate (John) receives a bonus once the referral (Matt) completes his purchase. To test this, Matt has to complete a purchase, once a purchase is completed John should receive a $10 bonus on Genius Referrals. Check the images below. 

Checkout confirmation page


To check if the bonus was given to the advocate on Genius Referrals, go to your bonuses section. You should be able to see John's new bonus on this page.  

Bonus given to advocate on Shopify Referral Program

That's all. On this scenario, every time a referral (Matt) completes a purchase on your store, the advocate (John) will receive a new bonus. 



















Resource Extension Size



Please leave your comments/questions below