All Collections
Referrals Campaigns
Referral Page Customization
Add your dedicated referrals landing page to your website
Add your dedicated referrals landing page to your website

Add a referrals page to your website in minutes with just one line of code

James Dohm avatar
Written by James Dohm
Updated over a week ago

Introduction

A dedicated referral page is a great way to increase customer engagement and stimulate word-of-mouth marketing for your business. In this article, we will walk you through how to add your referral page to your website.

✨ Referrals campaigns are available on the Scale and Plus plans.


Creating the dedicated referrals landing page

Step 1: Get your referral campaign unique div

The Referral Campaign div is found

  1. From your referrals dashboard, click Edit on the referral campaign

  2. Copy the number string included in the URL (e.g. /campaigns/xxx/edit)

Step 2: Add your referral page code to a Shopify page template

The next step is to add your Referrals code snippet to a page template. This div will contain the content for your referral campaign.

  1. Go to your Shopify admin panel and navigate to Online Store > Themes

  2. Click on the ... button and click Edit code

  3. Under Template, click Add a new template and select a page template

  4. Create a liquid template called page.rivo-refer.liquid

  5. Add in the code snippet below

    <div id="rivo-referral-campaign-727">
  6. Remember to replace 727 with your actual referral campaign ID

  7. Save the changes when you're done.

Step 3: Create a new Page

In this step, you're going to create a new page that will serve as your referrals landing page.

  1. From your Shopify admin panel, go to Online Store > Pages and click Add page - or click here

  2. Give your page a relevant title, such as "Refer" or "Share"

  3. Under Theme template, select rivo-refer in the dropdown - or just click on the name of the template where you added the referral campaign div

  4. Once you have edited the Content, website SEO, and Visibility, save your changes.

Step 4: Review the Page

Finally, you need to check if your referral campaign is displayed on the new page. Visit the URL of your new page and you should see the referral program there!


Common questions

My referral program isn't appearing. Can you help me?

If the referral campaign doesn't appear, double-check your steps and make sure that:

  • The correct Campaign ID was added to the div

  • The div was added to the right page template, and the template selected for your Page contains the div

  • The Page visibility is set to Visible

  • The Referrals program is toggled ON in the dashboard

  • The Referral Campaign is toggled ON

Can I add the code snippet on multiple pages?

Yes! You can use this code snippet anywhere, and even trigger it as a popup if you want. See all our embed options β†’

Did this answer your question?