Configure Dedicated Referral Page

Configuring a Referral Page

Introduction

Your Referral Page is one of the most powerful tools for viral growth. It gives customers a quick way to share your brand, earn rewards, and invite friends—all while creating a seamless experience that aligns with your store’s theme.
In this guide, you’ll learn how to:
✔ Customize the branding and banners
✔ Configure logged-in/logged-out text
✔ Control sharing options
✔ Embed the referral page into Shopify using Liquid
Let’s walk through each step!

Step 1 - Open Dedicated Pages

Navigate to your Nector Dashboard, click Onsite Display, and then select Dedicated Pages.

Step 2 - Access the Referral Page

Inside Dedicated Pages, locate and click on Referral Page.

Step 3 - Open Page Configuration

Click Configure to reveal all available referral page settings.

Step 4 - Adjust Brand Settings

The Brand Setting section automatically inherits your store’s styling.
If needed, update:
• Brand colors
• Font styles
Next, scroll to Banner Image Setting.

Step 5 - Upload Banner Images

Upload banner images for both Desktop and Mobile.
You may paste an image URL or upload a file directly.

Step 6 - Desktop Banner Size

Use an image sized 1920 × 450 px for optimal desktop display.

Step 7 - Mobile Banner Size

Use a 575 × 480 px image for mobile devices.

Step 8 - Preview Banner Placement

Your banner will appear in the gray highlighted area of the referral page preview.
Now move to the Controls section.

Go to the Sharing Section at the bottom.
Here, you can disable individual sharing channels such as:
• WhatsApp
• Facebook
• Others as needed
Click Save after making adjustments.
Next, configure Logged In / Logged Out settings.

Step 10 - Set Logged-In and Logged-Out Views

This section allows you to customize what customers see based on login state.

Step 11 - Customize Logged-Out Messaging

When logged out, customers will see a prompt encouraging them to refer friends for rewards.

Step 12 - Modify CTAs

Edit both Sign-Up and Login CTAs to match your brand voice.

Step 13 - Configure Logged-In Text

Logged-in customers will see their referral link along with a message such as a 15% coupon offer.
Make use of variables like referral mode for dynamic text.

Step 14 - Set Referral Text Snippets

Add phrases such as “with a friend” and “15% coupon off.”
Next, proceed to Sharing & Sharing Settings.

These settings control the message automatically copied when customers click a sharing icon (e.g., WhatsApp, Facebook).

This is the exact text customers will share via the selected platform.

Step 17 - Open the Code Section

Scroll to the Edit Code section.
This snippet needs to be added to your Shopify theme.

Step 18 - Copy the Snippet

Copy the full code block provided.

Step 19 - Create a New Liquid File in Shopify

In Shopify Admin:

Click the three dots on your theme
Select Edit Code
In Templates, right-click → Create a New File
Name the file (e.g., “quid”)

Step 20 - Paste the Code

Press Enter, paste the copied code snippet into the new Liquid file.

Step 21 - Save Your File

Click Save.

Step 22 - Create a Page in Shopify

Return to Shopify → Pages → Add Page
• Enter a name (e.g., Referral Page)
• Set visibility to Visible
• Choose the new template (e.g., nectar-referal)
• Click Save

Step 23 - Assign the Theme Template

Ensure the newly created template is applied to the page for correct rendering.

Step 24 - Make It Discoverable

Add your Referral Page to your store’s:
• Navigation menu
• Header
• Footer
This improves accessibility for customers.

Step 25 - Setup Complete

Your Referral Page is now successfully configured and ready for customers to use.
Thank you for following along! 🎉

Wrap-Up

You’ve successfully:
✔ Customized referral banners and branding
✔ Configured sharing logic and referral messaging
✔ Set up logged-in and logged-out customer experiences
✔ Embedded the referral page into Shopify using Liquid
Your store now has a polished, user-friendly referral experience that encourages customers to share, engage, and grow your brand. 💚

Updated on: 16/12/2025

Was this article helpful?

Thank you!