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.

Step 9 - Configure Sharing Options

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.

Step 15 - Set Auto-Copy Share Message

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

Step 16 - Test the Share Message

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:

1. Click the three dots on your theme
2. Select Edit Code
3. In Templates, right-click → Create a New File
4. 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