--- title: "Creating a Referral Page on Shopify" slug: "creating-a-referral-page-on-shopify" updated: 2024-04-02T10:25:05Z published: 2024-04-02T10:25:05Z canonical: "support.yotpo.com/creating-a-referral-page-on-shopify" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.yotpo.com/llms.txt > Use this file to discover all available pages before exploring further. # Creating a Referral Page on Shopify Products Loyalty & Referrals ###### Supported plans Free, Pro, Premium, Enterprise ###### eCommerce Platform Shopify, Shopify Plus 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](/v1/docs/refer-friends-module), follow these four steps to set it up onsite: 1. Create a new page on Shopify. 2. Copy the module's unique code snippet. 3. Embed code to your new page. Add the new page to your Shopify storefront **We support Shopify Online Store 2.0** 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: 1. Open your Shopify store admin. 2. Click **Online Store.** 3. Click **Themes.** 4. Under **Actions**, click **Edit code** to find all the HTML and CSS of your theme. **![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image-1684841335672.png?sv=2026-02-06&spr=https&st=2026-10-31T10%3A04%3A12Z&se=2026-10-31T11%3A04%3A12Z&sr=c&sp=r&sig=cjMyRAA%2BofTk%2FFEBa7r3dsyB75F8mWKvcE7RS2HgmWw%3D)** 5. **Click Add a new template.** **![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image-1684841382638.png?sv=2026-02-06&spr=https&st=2026-10-31T10%3A04%3A12Z&se=2026-10-31T11%3A04%3A12Z&sr=c&sp=r&sig=cjMyRAA%2BofTk%2FFEBa7r3dsyB75F8mWKvcE7RS2HgmWw%3D)** 6. **Select page from the dropdown.** 7. **Choose the liquid option.** 8. **Name the template. You’ll need to remember this name to access it later.** ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/2d69d73d-3685-4501-8493-78bf8724c7d3.png?sv=2026-02-06&spr=https&st=2026-10-31T10%3A04%3A12Z&se=2026-10-31T11%3A04%3A12Z&sr=c&sp=r&sig=cjMyRAA%2BofTk%2FFEBa7r3dsyB75F8mWKvcE7RS2HgmWw%3D) Click **Create template.** For a more detailed explanation of page templates on Shopify, refer to [Shopify's help center article](https://help.shopify.com/en/manual/online-store/legacy/pages). 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](https://help.shopify.com/en/manual/online-store/themes/theme-structure/pages) ## 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:**** 1. Log in to your Loyalty admin. 2. Click **On-site Modules > Rewards Page Builde**r. 3. Click **Edit** on the page you want to publish. 4. Click **Publish** and a popup will appear. 5. Click the **Section snippets** tab. 6. Copy the code for your referral section. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image-1684843029509.png?sv=2026-02-06&spr=https&st=2026-10-31T10%3A04%3A12Z&se=2026-10-31T11%3A04%3A12Z&sr=c&sp=r&sig=cjMyRAA%2BofTk%2FFEBa7r3dsyB75F8mWKvcE7RS2HgmWw%3D) 7. Click **Publish changes.** 8. 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 Builder](/v1/docs/getting-started-with-the-rewards-page-builder)to create your Refer Friends module, then do the following:  Log in to Yotpo Loyalty & Referrals admin 1. Log in to Yotpo **Loyalty & Referral****s** admin 2. Go to the **On-site Modules** tab. 3. Click on **Refer Friends**. 4. Click the module you want to publish 5. Click **Publish** 6. 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.** ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/95edb569-66bb-418d-a51e-f8d0180805ec.png?sv=2026-02-06&spr=https&st=2026-10-31T10%3A04%3A12Z&se=2026-10-31T11%3A04%3A12Z&sr=c&sp=r&sig=cjMyRAA%2BofTk%2FFEBa7r3dsyB75F8mWKvcE7RS2HgmWw%3D) 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. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/aa08cdb4-36fc-4ec5-8dcc-dcc3be937c5a.png?sv=2026-02-06&spr=https&st=2026-10-31T10%3A04%3A12Z&se=2026-10-31T11%3A04%3A12Z&sr=c&sp=r&sig=cjMyRAA%2BofTk%2FFEBa7r3dsyB75F8mWKvcE7RS2HgmWw%3D) ### Add the page to your store navigation menu The final step is to add the page to your navigation: 1. Under Online Store, click **Navigation.** 2. Click **Main menu** to add your referrals page to your main navigation menu. 3. Click **Add menu item.** **![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image-1684843223100.png?sv=2026-02-06&spr=https&st=2026-10-31T10%3A04%3A12Z&se=2026-10-31T11%3A04%3A12Z&sr=c&sp=r&sig=cjMyRAA%2BofTk%2FFEBa7r3dsyB75F8mWKvcE7RS2HgmWw%3D)** 4. Under "Link" click "**Pages**" and select your new referrals page. 5. Click **Save.** ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image-1684843300628.png?sv=2026-02-06&spr=https&st=2026-10-31T10%3A04%3A12Z&se=2026-10-31T11%3A04%3A12Z&sr=c&sp=r&sig=cjMyRAA%2BofTk%2FFEBa7r3dsyB75F8mWKvcE7RS2HgmWw%3D) 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