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.
The following list of items required on this guide.
- 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.
- 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.
- 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.
Now click on the “Get me the code” button to generate the code snippets.
The image below shows the code snippets needed to get integrated with Genius Referrals.
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:
Code Snippet for genius-referrals.liquid template on your Shopify store
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.
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.
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 installed on the theme.liquid page on your Shopify Store
Installing additional scripts on the theme.liquid file
To track new referrals and bonuses, we also have to install the following script:
The new code theme.liquid file should look like this:
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:
- Open the cart-template.liquid file and find the closing
</form>tag in the code.
- On a new line right above the closing
</form>tag, paste the following cart attributes.
- Click Save
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.
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:
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:
- You have a Shopify store that sells t-shirts online.
- You have implemented a referral program with Genius Referrals to allow your customers and visitors to refer your products to friends, family, colleagues, etc.
- 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.
- 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:
- Name: John
- Lastname: Smith
- Email: email@example.com
- John refers his friend Matt so that he can buy new t-shirts in your store. This is his personal data:
- Name: Matt
- Lastname: Hanks
- Email: firstname.lastname@example.org
- John receives $10 as bonus once Matt has completed a purchase
The following image represents that referral flow that we will be testing:
Testing that John can share services anywhere he want
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.
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.
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.
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.