Creating a Referral Page on Shopify

      Creating a Referral Page on Shopify

        Article summary


        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, 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.
        5. Click Add a new template.
        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. 

        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:
        1. Log in to your Loyalty admin.
        2. Click On-site Modules > Rewards Page Builder.
        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.
        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 BuilderIf you did not use the Rewards Page Builderto create your Refer Friends module, then do the following: 

        Log in to Yotpo Loyalty & Referrals admin

        1. Log in to Yotpo Loyalty & Referrals 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.

        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:

        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.

        4. Under "Link" click "Pages" and select your new referrals page.

        5. Click Save.

        Your referrals page is now live on your site!

        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?