Creating a Referral Page on Shopify
- DarkLight
Creating a Referral Page on Shopify
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
This article will walk you through creating a referral page on your Shopify store. Having a dedicated page for referrals is a great way to skyrocket your word-of-mouth traffic and sales. Once you're done creating a Referral module, follow these four steps to set it up onsite:
- Create a new page on Shopify.
- Copy the module's unique code snippet.
- Embed code to your new page.
Add the new page to your Shopify storefront
The following steps are compatible with the new Shopify online store theme.
1. Create a new store page
Create a new page in Shopify with the following steps:
- Open your Shopify store admin.
- Click Online Store.
- Click Themes.
- Under Actions, click Edit code to find all the HTML and CSS of your theme.
- Click Add a new template.
- Select page from the dropdown.
- Choose the liquid option.
- Name the template. You’ll need to remember this name to access it later.
Click Create template. For a more detailed explanation of page templates on Shopify, refer to Shopify's help center article.
You’ve now created a new template for a page in your store code. This template is currently inaccessible since it is not linked to your navigation menu yet. We will do that as the final step of your setup process when you’re ready to launch.
For a more detailed explanation of pages on Shopify, refer to Shopify's help center article
2. Copy the module's code snippet
There are two ways to get your module's unique code.
If you used the Rewards Page Builder to create your Referral section, then do the following:
- Log in to your Loyalty admin.
- Click On-site Modules > Rewards Page Builder.
- Click Edit on the page you want to publish.
- Click Publish and a popup will appear.
- Click the Section snippets tab.
- Copy the code for your referral section.
- Click Publish changes.
- Proceed to the next step of embedding the code on your site.
If you are not using the Rewards Page Builder
If you did not use the Rewards Page Builderto create your Refer Friends module, then do the following:Log in to Yotpo Loyalty & Referrals admin
- Log in to Yotpo Loyalty & Referrals admin
- Go to the On-site Modules tab.
- Click on Refer Friends.
- Click the module you want to publish
- Click Publish
- Copy the second code only
You only need to add this snippet of code once per module, or once per location where you want it to populate. In this case, we will paste the code on a new, dedicated referrals page.
7. Proceed to the next step of embedding the code on your site.
3. Add code to your Shopify page
Paste the Referral Module code snippet you copied earlier here on your new page. We recommend adding the code after the page header. This will ensure your Referral Module takes up the length of the page, which it was designed to do.
Don't forget to click save!
4. Add the new page to your storefront
Now you have created a new page and embedded your Referral Module code on it, you need to connect the backend page to a frontend page.
1. Under Online Store click Pages.
2. Click Add page.
3. Under Template, select the template suffix of the page you just made. 
Add the page to your store navigation menu
The final step is to add the page to your navigation:
- Under Online Store, click Navigation.
- Click Main menu to add your referrals page to your main navigation menu.
- Click Add menu item.
4. Under "Link" click "Pages" and select your new referrals page.
5. Click Save. 
Your referrals page is now live on your site!
Tip!
If your module is not populating to your new page, make sure it is set to active in Yotpo Loyalty & Referrals
Was this article helpful?
