> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.nector.io/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Configure Dedicated Referral Page # Configuring a Referral Page ${frame}[](https://www.youtube.com/embed/R_PTsDNYJoI) ### 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image1_sh0iig.jpg) ###### Step 2 - Access the Referral Page Inside Dedicated Pages, locate and click on Referral Page. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image2_jwopbp.jpg) ###### Step 3 - Open Page Configuration Click Configure to reveal all available referral page settings. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image3_ix2kci.jpg) ###### 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image4_10zw9sa.jpg) ###### Step 5 - Upload Banner Images Upload banner images for both Desktop and Mobile. You may paste an image URL or upload a file directly. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image5_15ikl83.jpg) ###### Step 6 - Desktop Banner Size Use an image sized 1920 × 450 px for optimal desktop display. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image6_11bkk1q.jpg) ###### Step 7 - Mobile Banner Size Use a 575 × 480 px image for mobile devices. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image7_2y2vip.jpg) ###### 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image8_1jda1a7.jpg) ###### 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image9_13l6kwr.jpg) ###### Step 10 - Set Logged-In and Logged-Out Views This section allows you to customize what customers see based on login state. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image10_btk1uq.jpg) ###### Step 11 - Customize Logged-Out Messaging When logged out, customers will see a prompt encouraging them to refer friends for rewards. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image11_tcaanm.jpg) ###### Step 12 - Modify CTAs Edit both Sign-Up and Login CTAs to match your brand voice. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image12_us1op7.jpg) ###### 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image13_1huorwa.jpg) ###### Step 14 - Set Referral Text Snippets Add phrases such as “with a friend” and “15% coupon off.” Next, proceed to Sharing & Sharing Settings. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image14_ogjlif.jpg) ###### Step 15 - Set Auto-Copy Share Message These settings control the message automatically copied when customers click a sharing icon (e.g., WhatsApp, Facebook). ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image15_1inmp1m.jpg) ###### Step 16 - Test the Share Message This is the exact text customers will share via the selected platform. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image16_1ub23lk.jpg) ###### Step 17 - Open the Code Section Scroll to the Edit Code section. This snippet needs to be added to your Shopify theme. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image17_1kuzecw.jpg) ###### Step 18 - Copy the Snippet Copy the full code block provided. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image18_1g13dwc.jpg) ###### 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”) ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image19_157c3ye.jpg) ###### Step 20 - Paste the Code Press Enter, paste the copied code snippet into the new Liquid file. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image20_1cnru0o.jpg) ###### Step 21 - Save Your File Click Save. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image21_1i7q5lh.jpg) ###### 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 ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image24_1x37rqa.jpg) ###### Step 23 - Assign the Theme Template Ensure the newly created template is applied to the page for correct rendering. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image25_1lipewy.jpg) ###### Step 24 - Make It Discoverable Add your Referral Page to your store’s: • Navigation menu • Header • Footer This improves accessibility for customers. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image26_ytfmd0.jpg) ###### Step 25 - Setup Complete Your Referral Page is now successfully configured and ready for customers to use. Thank you for following along! 🎉 ![](https://storage.crisp.chat/users/helpdesk/website/-/d/9/9/4/d9947dc4cf2ed000/image27_1m71dp4.jpg) ###### 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. 💚