Adding Referral Widgets to Your Shopify Store (New)
Adding Referral Widgets to Your Shopify Store (New)
Article summary
Did you find this summary helpful?
Thank you for your feedback
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 shop.
How it works
The referral program includes two main on-site elements:
The Referral widget: Prompts customers to refer their friends.
The Referral Welcome popup: Greet referred friends after they click the referral link.
The referral process
Online customers see your referral widget that offers a reward for referring their friends to your shop. They are prompted to refer a friend and receive a reward.
Your customer's friends receive a message with a referral link offering them a reward with their first purchase. They click the referral link and land on a URL of your choice.
The friends are met with a welcome popup that shows the reward they received: a discount code that’s auto-applied at checkout or the number of points they received.
If the friend completes a purchase, the referring customer will also receive a reward:
Points as a reward: They can see them in the Sticky bar or under their rewards history on your site.
Discount as a reward: They will receive an email with the discount code and they can see the code under their rewards history on your site.
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
Editing a standalone widget
To edit the widget:
In your Yotpo Loyalty & Referrals main menu, go to Display On-site > Referrals.
Click Create referral module.
Editing via the Rewards Page Builder
Available for:
Yotpo Loyalty & Referrals Pro, Premium, and Enterprise plans.
To edit the referrals section in your Rewards Page Builder:
In your Yotpo Loyalty & Referrals main menu, go to Display On-site > Rewards Page Builder.
Create a new rewards page or click an existing page you want to edit.
Under Edit Sections select Refer Friends.
The widget editor includes the following sections:
Layout
Choose which Referral widget layout you'd like to use.
Please 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:
Dynamic placeholder | Description |
|---|---|
{{friend_reward}} | The referred friend’s reward |
{{min_spent}} | The minimal amount of money the friend must spend on their purchase to use the reward |
{{customer_reward}} | The referring customer’s reward |
{{referral_link}} | The referral link the customer can share with their friends |
In Step 2, you'll be able to configure the share settings available to both desktop and mobile customers visiting your shop. 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:
Dynamic property | Description |
|---|---|
{{company_name}} | Your company name as defined in Yotpo under General Settings |
{{referral_link}} | The referral link associated with the referring customer |
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 {
}Please note:
We recommend using our CSS editor instead of hardcoding directly onto your storefront.
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 shop.
Adding the widget to your shop
Adding as a standalone widget
To learn how to add the widget code to your shop, 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.
Advanced attributes
Attribute | Description | Default setting |
|---|---|---|
height= | The height of the widget element | 100vh |
min-height= | Minimum height of the widget element | 100% |
customer-email-view-label-text= | This is the text of the label above the email input field on the 1st screen | "Enter your email address:" |
customer-email-view-input-placeholder= | This is the text of the placeholder for email input | “example@example.com” |
referral-email-view-label-text= | This is the text of the label above the email input field on 2nd screen | |
referral-views-friends-input-placeholder= | This is the text of the placeholder for email input | “email1@example.com', email2@example.com” |
share-copy-link-text= | This is the text of the copy link share button | "Copy Link" |
share-link-copied-text= | This is the text that is shown after clicking on the copy link button | "Copied" |
Step 2: Customizing the Referral Welcome popup
The Referral Welcome popup is the first thing new customers see when they arrive at your shop 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 shop and make a purchase.
To customize your Referral Welcome popup:
In your Yotpo Loyalty & Referrals main menu, go to Display On-site > Referrals.
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:
We recommend using our CSS editor instead of hardcoding directly onto your storefront.
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.
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:
Dynamic placeholder | Description |
|---|---|
{{reward}} | The referred friend’s reward |
{{min_spent}} | The minimum amount of money the friend must spend on their purchase to use the reward |
{{referral_link}} | The referral link the customer can share with their friends |
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.
Please 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 shop
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 Set Up Program > Referral 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.
Was this article helpful?
