Add Referrals Page On Shopify
This article shows you how to add a dedicated referrals page to your Shopify store.
For the referrals page to be shown on your website, make sure Nector is enabled (in the Account Settings page) and the referral program is also active.
Follow the below steps to add the referrals page to your Shopify store.
Login to your nector dashboard.
Go the Referrals Page under On-Site Displays in Referrals Program.
Switch to the Code Snippet tab
Scroll to the Shopify section.
Copy the code by clicking on the copy button. See below image for reference.
Open your shopify admin dashboard
Go to Themes under Online Store in Sales Channels
Click on Edit Code for the current live theme. See the below image for reference.
Click on the Add a new template button as shown in the below image.
In the popup the appears, make sure to fill it up as shown in the below image.
And click on the Done button.
Paste the copied code snippet in the newly created file. And click on the Save button in the top right.
Now, you can exit from the code editor by clicking on the exit button in the top left corner of the page.
Open your shopify admin dashboard
Go to Online Store under Sales Channels
Click on Pages under the Online Store in the left side menu.
Click on Add Page button in the top right corner.
Add a title to the page and select the theme template to nector-referrals as shown in the below image
Click on the Save button in the bottom.
To see a preview of the page, click on the View Page button at the top.
Open your shopify admin dashboard
Go to Online Store under Sales Channels
Click on Navigation under the Online Store in the left side menu.
Select the appropriate menu, and add the newly created page to the menu
All done! The referrals page will now be live on your store.
Login to your nector dashboard.
Go the Referrals Page page under On-Site Displays.
Switch to the Code Snippet tab
Look for the Shopify section.
Click on the Referrals Section (Order Status Page) section on the right side.
Copy the code by clicking on the copy button. See below image for reference.
Login to your nector dashboard.
Click on Settings in the bottom right corner.
Click on the Checkout tab. See the image below for reference.
Scroll to very bottom of on this page to find the Order status page section.
Paste the copied code snippet in the Additional scripts. If there are already some code snippets present, paste the nector code snippet at the very end. See the below image for reference.
All done! The referrals page will now be visible on your order status page.
Customizing the Referrals Page & Other Referral Sections
For the referrals page to be shown on your website, make sure Nector is enabled (in the Account Settings page) and the referral program is also active.
Add a Standalone Referrals Page
Follow the below steps to add the referrals page to your Shopify store.
1. Getting the code snippet on nector dashboard
Login to your nector dashboard.
Go the Referrals Page under On-Site Displays in Referrals Program.
Switch to the Code Snippet tab
Scroll to the Shopify section.
Copy the code by clicking on the copy button. See below image for reference.
2. Adding the code snippet on shopify
Open your shopify admin dashboard
Go to Themes under Online Store in Sales Channels
Click on Edit Code for the current live theme. See the below image for reference.
Click on the Add a new template button as shown in the below image.
In the popup the appears, make sure to fill it up as shown in the below image.
And click on the Done button.
Paste the copied code snippet in the newly created file. And click on the Save button in the top right.
Now, you can exit from the code editor by clicking on the exit button in the top left corner of the page.
3. Creating the page on Shopify
Open your shopify admin dashboard
Go to Online Store under Sales Channels
Click on Pages under the Online Store in the left side menu.
Click on Add Page button in the top right corner.
Add a title to the page and select the theme template to nector-referrals as shown in the below image
Click on the Save button in the bottom.
To see a preview of the page, click on the View Page button at the top.
4. Adding the page to the navbar on your store
Open your shopify admin dashboard
Go to Online Store under Sales Channels
Click on Navigation under the Online Store in the left side menu.
Select the appropriate menu, and add the newly created page to the menu
All done! The referrals page will now be live on your store.
Add it to the Order Status Page (Thank You Page)
1. Getting the code snippet on nector dashboard
Login to your nector dashboard.
Go the Referrals Page page under On-Site Displays.
Switch to the Code Snippet tab
Look for the Shopify section.
Click on the Referrals Section (Order Status Page) section on the right side.
Copy the code by clicking on the copy button. See below image for reference.
2. Adding the code snippet on shopify
Login to your nector dashboard.
Click on Settings in the bottom right corner.
Click on the Checkout tab. See the image below for reference.
Scroll to very bottom of on this page to find the Order status page section.
Paste the copied code snippet in the Additional scripts. If there are already some code snippets present, paste the nector code snippet at the very end. See the below image for reference.
All done! The referrals page will now be visible on your order status page.
Related Articles
Customizing the Referrals Page & Other Referral Sections
Updated on: 28/03/2024
Thank you!