Skip to main content

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 powerful tool to increase customer engagement and stimulate word-of-mouth marketing for your business. This comprehensive guide will walk you through creating and customizing your referral landing page, configuring social sharing options, and troubleshooting common issues to maximize your referral program's effectiveness.

✨ 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!

Customization Options

Custom Landing URL Settings

You can customize where your referral links redirect customers to create a branded experience:

  1. From your referrals dashboard, navigate to the settings section

  2. Under Referrals Redirection URL, you can set:

    • Landing URL Domain: Use a custom domain (e.g., shop.example.com) instead of your default Shopify domain

    • Landing URL Path: Specify the page path (e.g., /refer-friends) where customers will land when they click referral links

  3. If left blank, customers will be redirected to your homepage by default

Social Sharing Configuration

Enable customers to share their referral links across multiple social platforms:

  1. From your referrals dashboard, scroll to Share via Social Media

  2. Enable the platforms you want to support:

    • Twitter: Customize the tweet message with placeholders like #{{shop_name}}

    • Facebook: Allow sharing to Facebook feeds

    • Email: Enable email sharing with personalized messages

    • WhatsApp: Customize WhatsApp messages for mobile sharing

  3. Use dynamic variables in your messages to personalize the sharing experience

Campaign Display Options

Your referral campaigns can be displayed in different ways:

  • Inline: Embedded directly on the page using the div method described above

  • Popup: Triggered by buttons or links - learn how to set up popups →

  • Post-purchase: Automatically shown to returning customers after they make a purchase

Troubleshooting

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

If the referral campaign doesn't appear, systematically check these common issues:

Campaign Configuration:

  • The correct Campaign ID was added to the div (found in your campaign URL: /campaigns/xxx/edit)

  • The Referrals program is toggled ON in the main dashboard

  • The specific Referral Campaign status is set to Active

  • The campaign hasn't expired (check the expiration date if set)

Page Setup:

  • The div was added to the correct page template

  • The template selected for your Page contains the referral div

  • The Page visibility is set to Visible

  • The page template file was saved properly

Rewards Configuration:

  • Both advocate (referrer) and friend rewards are properly configured

  • Reward conditions and minimum cart requirements are set appropriately

Referral links may be blocked due to fraud prevention measures. Common reasons include:

  • Same IP Address: The advocate and friend are using the same internet connection

  • Self-Referral: Someone is trying to refer themselves using the same or similar email addresses

  • Existing Customer: The friend has already made purchases from your store

  • Email Variations: Using email variations with "+" symbols (e.g., [email protected])

  • Browser Cookies: The same browser was used for both advocate and friend signup

These protections help prevent fraud - learn more about fraud prevention →

Rewards aren't being issued

Rewards are only issued after specific conditions are met:

  • The friend's order must be marked as fulfilled in Shopify

  • The order must meet any minimum cart requirements you've set

  • The order must include eligible products (if collection restrictions apply)

  • The referral must pass all fraud prevention checks

Can I have multiple referral campaigns?

Yes! You can create multiple campaigns for different purposes:

  • Use different campaign IDs in your div elements

  • Specify campaign IDs in popup triggers: data-referral-campaign-id="1234"

  • Each campaign can have unique rewards, designs, and settings

Advanced Integration Options

Multiple Page Placements

You can add the referral campaign div to multiple locations:

  • Dedicated landing pages (as described in this guide)

  • Account pages for logged-in customers

  • Thank you pages after purchase

  • Footer or sidebar sections across your site

  • Blog posts or content pages to increase visibility

Simply add the same <div id="rivo-referral-campaign-[ID]"> code to any liquid template where you want the campaign to appear.

Popup Integration

Instead of inline display, you can trigger referral campaigns as popups:

  • Add open-rivo-advocate-campaign class to any button or link

  • Customers can access referrals without leaving their current page

  • Perfect for navigation menus, account pages, or promotional banners

Learn how to set up referral popups →

Adding to Site Navigation

Promote your referral program by adding it to your main navigation:

  1. Go to Online Store > Navigation in your Shopify admin

  2. Click Add menu item in your Main menu

  3. Use an engaging title like "Refer Friends" or "Get $5"

  4. Link to your dedicated referral page

Email Campaign Integration

Your referral campaigns work seamlessly with email marketing:

  • Customers can share referral links directly via email from your landing page

  • Automated emails are sent when rewards are earned

  • Use referral landing pages as destinations in your email campaigns

Best Practices

  • Clear Value Proposition: Make sure customers understand what they and their friends will receive

  • Easy Access: Place referral links in multiple locations (navigation, account page, footer)

  • Mobile Optimization: Test your referral pages on mobile devices where most sharing happens

  • Social Proof: Show how many customers have participated or rewards earned

  • Regular Testing: Test the complete referral flow from sharing to reward redemption

  • Monitor Performance: Track referral metrics and adjust rewards or placement as needed

Common Questions

Can I add the code snippet on multiple pages?

Yes! You can use this code snippet anywhere on your site, and even trigger it as a popup if you want. See all our embed options →

How do I track referral performance?

Visit your referrals dashboard to see detailed analytics including:

  • Number of referrals generated and completed

  • Total revenue from referred customers

  • Conversion rates and popular sharing methods

  • Individual customer referral activity

Can customers refer friends without creating an account?

This depends on your "Referrals Customer Account" setting. When enabled, customers must create an account to claim referral rewards. When disabled, they can participate using just their email address.

What happens if a referral link expires?

If you've set an expiration date for your campaign, the referral page will show an error message after that date. Make sure to update or extend campaign dates as needed to maintain a good customer experience.

Related Articles
Create your first referral campaign
Referral Program Integrations
Referral inspiration Pages
Referral embed and sharing options overview
Create & Customize a Loyalty Landing Page
Did this answer your question?