How to Add a Customer Referral Link to your Shopify Store's Order Confirmation Receipts

In our lead referral setup guide, we talk about setting up touch points. Touch points are places where you ask you customers for referrals. One of those place is the email order conformation receipt that your customer receives when they make a purchase.

Our wonderful customers have asked us for advice on how to add a referral touch point in the email receipts Shopify sends to customers. So here's the how-to article!

First we are going add a nice friendly banner at the bottom of the email receipt to encourage our customers to refer their friends. I managed to easily build a banner by using the tool provided by our friends at Canva. If you don't have a Canva account, head there, and familiarise your self with how it works. Canva has ready made, professionally designed, banners you can use and edit. Of course you can also you use your favourite image editing tool.

For my banner, I chose to build a 600px by 200px landscape banner.

With you banner at hand, follow the following instructions. If you are a customer of Gather, and you encounter ,problems or something doesn't work as a result of the instructions below, don't hesitate to contact us on hello@gathercustomers.com.

All the best!

REQUEST A FREE DEMO

Copy of 1. Add your banner image to the themes editor

a) Click on Online Store

b) Click on Themes

c) Under Actions, click on Edit Code

d) In the Code Editor (as shown), locate Assets and upload your banner image by clicking on ‘Add a new asset.’

e) This will bring up your file uploader where you can upload the banner image. The banner image will be saved in your Assets folder.

f) When the image is uploaded, locate it within the Assets folder. It will appear in the preview area. Extract the web address (or URL) of the image. On a Mac, you can do so by right clicking on the image and selecting Copy Image Address. You will need this address in the next step.

Copy of 2. Go to the Notification Settings in your Shopify Backend

a) In your Shopify Admin, click on Settings.

b) In Settings, click on Notifications.

Copy of 3. Select the Order Confirmation Notification

In the Notifications section, click on Order conformation

Copy of 4. Add the Banner Image code in the Order Confirmation template

a) Scroll all the way to the bottom of the order confirmation notification code.

b) above the closing body tag, which looks like this:

</body>

paste the following code:

————————————————————

<div style="text-align: center;">

<a href="PUT YOUR GENERIC REFERRAL LINK HERE">

<img src="PUT YOUR BANNER’S IMAGE LINK HERE " style="width: 80%;"/>

</a>

</div>

—————————————————————-

Where you see: PUT YOUR GENERIC REFERRAL LINK HERE. This is the generic referral link that you can get from your Gather account. I will show you this in the image below.

Where you see: PUT YOUR BANNER’S IMAGE LINK HERE, this is the image link you copied from the code editor as in the previous steps.

c) Once you have that done, save the Notification.

d) Once saved, you can preview the email by clicking on Preview on top of the page.

Copy of To get the Generic Referral Link

a) Head to your Gather account.

b) Head to the Integrations section

c) Copy the link under Generic Link.