Adding Referral Widgets to Your Shopify Store (New)

Goals and Outcomes

Yotpo’s referral widgets allow you to easily build a customized and intuitive customer experience, without adding code. In this article, you’ll learn how to customize and add the widgets to your store.

How It Works

The referral program includes two main on-site elements:

1. The Referral widget: Prompts customers to refer their friends.

2. The Referral Welcome popup: Greet referred friends after they click the referral link.

The Referral Process

1. A customer sees your referral widget. They are prompted to refer a friend and receive a reward.

2. The referred friend then receives a referral link offering a reward for their first purchase.

3. Clicking the link brings the friend to your defined landing page.

4. A welcome popup shows the friend’s reward - a discount code that’s auto-applied at checkout or the number of points they’ll earn.

5. If the friend completes a purchase, the referring customer also receives a reward:

   1. Points as a reward: They can see them in the Sticky bar or under their rewards history.

   2. Discount as a reward: They get an email with the discount code. They can also see the code in their rewards history.

Before You Start

Before going live with your Refer Friends widget, set up your Referrals Program settings. To learn more about setting up your program, see Configuring Your Referral Program.

Step 1: Customizing Your Referral Widget

The widget editor includes the following sections:

Layout

Choose which Referral widget layout you'd like to use.

Note

Currently, the popup layout isn’t supported.

Text & Share Settings

Configure the text elements for each referral step as well as the referral share configurations you'd like to set on your widget.

Use the dynamic placeholders to ensure that the rewards reflect your referral program settings:

In Step 2, you'll be able to configure the share settings available to both desktop and mobile customers visiting your store. You can also edit the messages sent via those different sharing methods.

The share methods include:

• Copy link

• SMS

• WhatsApp

• Personal email

Choose the main share method that your customers will see:

• For desktop users, your main method can be either personal email or copy link.

• For mobile users, your main method can be either personal email, SMS, WhatsApp, or copy link.

The messages sent to the referred friend should include the following dynamic placeholders:

General Look & Feel

Customize the widget’s colors, fonts, and images to match your brand aesthetics.

If you'd like to make further customizations, use our CSS editor.

If you'd like to make any overriding changes to the referral widget CSS, use this class name before the class you want to override:

.yotpo-widget-referral-widget.yotpo-widget-override-css {

}

Important

We recommend using our CSS editor instead of hardcoding directly onto your storefront to ensure compatibility with future updates. This allows our development team to recognize if any changes we push in the back end will affect the front end of your module. We will not update a specific widget instance if we detect that it will impact your site. Our team can only detect these issues if the CSS is in our editor.

To learn more about the module versions, see Updating Your Module's Version.

Now you can go ahead and add the widget to your store.

Adding the Widget to Your Store

Adding as a standalone widget

To learn how to add the widget code to your store, see this guide for Creating a Referral Page on Shopify.

Adding the widget to your Rewards Page

If you are building your Refer Friends section with the Rewards Page builder, follow the steps for publishing your Rewards page on Shopify.

Advanced Customizations

Some additional customizations can be made to the module. The following attributes can be added to your module's code snippet, right after your instance ID.

For example, if your module's code snippet looks like this:

<div class="yotpo-widget-instance" data-yotpo-instance-id="0000"></div>

Then add the attribute here:<div class="yotpo-widget-instance" data-yotpo-instance-id="0000" add-attribute-name=value> </div> If you want to add multiple attributes, add them one after the other, separated by spaces.

Step 2: Customizing the Referral Welcome Popup

The Referral Welcome popup is the first thing new customers see when they arrive at your store after clicking a referral link. The popup will display a coupon code or the number of points customers earn and can use with their purchases.

This is your brand’s way of greeting and enticing them to explore your store and make a purchase.

To customize your Referral Welcome popup:

1. In your Yotpo Loyalty & Referrals main menu, go to Display On-site > Referrals.

2. Hover over the Referral welcome popup and click Edit.

The popup editor includes the following sections:

General Appearance

Customize the popup colors, fonts, and images to match your brand aesthetics.

You can also click Preview Brand Kit design to preview how the pop will look with your brand kit settings.

Important

Similar to our Referral Widget, we recommend using our CSS editor instead of hardcoding to avoid update issues. To learn more about the module versions, see Updating Your Module's Version.

Text Design

Edit the content, size, and color of the popup text elements.

Use the dynamic placeholders to ensure that the rewards reflect your referral program settings:

Data Collection Disclaimer

Add an optional disclaimer linked to your privacy policy to inform the referred friend of how their data will be used to complete the referral successfully, you can include a mandatory checkbox to obtain the customer's explicit consent. There are 3 options:

1. No disclaimer (default)

2. Text only

3. Text with checkbox (requires explicit consent before proceeding by enabling the checkbox)

Note

Compliance with all applicable laws, including privacy regulations, remains the merchant's responsibility. This update provides merchants the tools to support legal recommendations but does not constitute legal advice.

Error messages

• Not eligible: This message will appear if the referred friend is not eligible to receive a reward. For example, if the referred friend’s details match those of the referrer.

• Used this offer: This message will appear if the friend already used their referral reward.

• General error: This error will appear if there’s a general problem with the site or referral program. This error will appear if the coupon code can’t be displayed for any reason.

Once you’re done customizing your popup, you can save it by clicking the save icon in the top right corner.

Note

If you make changes to a widget instance that’s live on your site, you will not see the save option. All the changes will be immediately pushed to the live version on your site.

Adding the Popup to Your Store

Unlike the other modules, the Referral welcome popup can only have one instance. This means that only one popup design can be created and then redesigned as you see fit.

To publish your popup and make it available to referred friends, go to the top right corner of the preview window and click Publish. 

When a friend clicks a referral link, they will be taken to the URL you defined as the Landing URL in your Referral Program settings, and the popup will automatically appear on the page.

Launching Your Program

Once your program settings and widgets have been configured and styled, make sure to activate the program and make it available on-site for customers to engage with.

To activate your referral program, go to Manage Program > Referrals Program and set the status on top to Active.

Next Steps

Once your referral program is set up, you can see the referral details for each referral made. Simply go to your Customers page and search for the referring customer. Under Referral link activity, click View referral activity to see all their referrals.

To learn more about referral link activity, see Monitoring and Managing Customer Referrals.