Configuring a Referral Page with Nectar Dashboard

This document provides detailed instructions on configuring a referral page using the Nectar dashboard and integrating it with Shopify. The steps outlined will guide you through setting up brand and banner settings, modifying sharing options, and editing code to ensure seamless functionality.

 

Step 1

To begin configuring the referral page, navigate to the Nectar dashboard. Click on "Onsite Display" and then select "Dedicated Pages."

 

Step 2

Within "Dedicated Pages," locate and click on "Referral Page."

 

Step 3

Click on "Configure" to display the settings for the referral page.

 

Step 4

The first section is "Brand Setting." This section inherits details from your store. To modify the color and font, navigate to the "Brand Setting" and make the necessary adjustments. Next, configure the "Banner Image Setting."

 

Step 5

Set up both the desktop and mobile banners. You can paste a URL image link or choose an image from your device.

 

Step 6

For optimal display, ensure the desktop banner has a resolution of 1920x450 pixels.

 

Step 7

For the mobile banner, use a resolution of 575x480 pixels.

 

Step 8

The appearance of your referral page will display the banner within the designated gray area. Next, configure the "Controls" settings.

 

Step 9

To manage sharing settings, find the "Sharing Section" at the bottom of the referral page. Here, you can disable sharing options on platforms like Facebook and WhatsApp if desired. Remember to click "Save" after making changes. Proceed to adjust the "Logged In and Logged Out" settings.

 

Step 10

Configure what customers see when logged in and when logged out. These settings are accessible here.

 

Step 11

For "Logged Out" settings, customers will see a message encouraging them to refer friends for rewards, as noted in this section.

 

Step 12

Customize different Call-to-Actions (CTAs) for sign-up and login. The text can be modified accordingly for both options.

 

Step 13

In the login settings, customers will be prompted to share a referral link that offers a 15% coupon. Utilize variables such as referral mode to personalize text here.

 

Step 14

The phrase "With a friend" and "15% coupon off" should be set. Navigate to "Sharing and Sharing Setting" to proceed.

 

Step 15

This section defines the message automatically copied when clicking on the Facebook or WhatsApp icons.

 

Step 16

Customers will be able to share the pre-set message via the selected channel.

 

Step 17

Proceed to the "Edit Code" section. This code snippet is required for integration with the Shopify page.

 

Step 18

Copy the code snippet and proceed to your Shopify dashboard.

 

Step 19

Click the three dots, select "Edit Code," and navigate to "Templates." Right-click and choose "Create a New File." You can name this file "quid."

 

Step 20

Press "Enter" and paste the copied code snippet into the new file.

 

Step 21

After pasting the code, click on "Save."

 

Step 22

Close the code editor and return to Shopify. Click on "Pages," then add a new page. Name this page as desired for customer visibility.

 

Step 23

For example, name it "Referral Page," set its visibility to "visible," select the recently created page "nectar-referal," and click "Save."

 

Step 24

After saving, the settings are now live. You can add this page to the navigation bar or header menu for customer access.

 

Step 25

This concludes the setup process. Thank you for following along.