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 places 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 1000px by 400px landscape banner.
With you banner at hand, follow the following instructions.
Add Your Banner Image to the Themes Editor
a) Click on ‘Online Store’
b) Select ‘Themes’ from with ‘Online Store’
c) Within your Theme, click on the three dots (see image) and select ‘Edit Code’
d) in the code editor (as shown above), locate ‘Assets’, and upload your banner image by clicking on ‘Add New Asset’. This will bring up your file uploader where you can upload your banner image. The banner image will be saved in your assets folder.
e) When the image is uploaded, locate it in your assets folder and it will appear in the preview pane. Extract the image URL. On a Mac you can do this by right clicking on the image and selecting ‘Copy Image Address’. You will need the address in the next step.
2. Open Notifications in your Shopify Store Settings
a) Navigate to the Notifications section of your Shopify store, this can be found under ‘Settings’.
b) Click on ‘Order Confirmation’ under the Notification settings.
3. Add the Banner Image Code to the Order Confirmation template
a) To edit the code of the order Confirmation email, click on the ‘Edit Code’ button
b) Scroll to the bottom of the code, 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.
To get the Generic Referral Link
i) Head to your Gather account.
ii) Head to the Integrations section
iii) Copy the link under Generic Link.
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.
When your customers receives their order confirmation email, the banner will appear telling them about your referral campaign. By clicking on the banner this will take them to your sign up form on your site.
Got any questions? First head to your Gather account, then click on the Help & Support menu item on the left hand side or check out the help articles here at academy.