Skip to main content
Where to find this: Shopify admin → Apps → Yuko Loyalty → Referral → Widgets → Friend Welcome Popup

​
Introduction

The Friend Welcome Popup is what a friend sees after clicking a referral link. In two steps, it asks for their details, then reveals their friend reward code with a button to apply it.

​
What problem this solves

This popup is how friends claim their reward. Without it, a friend who opens a referral link gets no discount code, and the referrer can’t be rewarded. That’s why turning it on is a Quick Start step (Enable referral popup).

​
Where it appears

  • On any storefront page opened from a referral link (a URL that contains yuko_referral). It opens on the landing page set in Referral → Program → Referrals Landing URL.
  • It loads through the Yuko App embed. There’s no block to add.

​
Overview

  • Step 1: Input Screen collects the friend’s details.
  • Step 2: Reward Screen shows the discount code and an apply button.
  • A Styles tab with colours, sizes and Custom CSS.
  • An optional hero image (desktop only).

​
Before you start

The referral program is enabled and a friend reward is set in Referral → Program. The popup doesn’t open without a friend reward.
The Yuko App embed is turned on in your theme. See Theme App Embed.

​
Setup guide

​
1. Configure the content

1

Open the widget

Go to Referral → Widgets and open Friend Welcome Popup. The Configuration tab opens first.
2

Content - Step 1: Input Screen

For each form field you can edit the Label and Placeholder, mark it as a Required field, show or hide it, and drag fields into a new order.
3

Content - Step 2: Reward Screen

4

Success & Feedback

Set Success message (toast), shown after the friend clicks the apply button and the discount is applied. Default: Your discount code has been revealed! Use it at checkout.
Headings and messages accept {{friend_reward}} and {{referrer_reward}}, which are replaced with your reward titles. The default Step 2 text uses {{friend_reward}}, so it stays accurate when you change the reward.

​
2. Style the popup

On the Styles tab, set the font size and weight, heading and label font sizes, padding, border radius, border width and colour, background and text colours, button colours, success and error colours, and optional Custom CSS.

​
3. Save and enable

Click Save, then switch the toggle next to the widget title on.

​
4. Verify

Copy a customer’s referral link and open it in a private window. The popup should open. Enter a new email address and check that a discount code appears and that Apply at checkout applies it.

​
How it works

  1. A friend opens a referral link. The Yuko App embed sees the referral code in the URL and opens the popup.
  2. The friend fills in the form and clicks the Step 1 button.
  3. Yuko checks the claim against your fraud rules and confirms the friend is a new customer, then creates their discount code.
  4. Step 2 shows the code. Clicking the apply button adds the code to the cart and shows the success message.
  5. When the friend places a paid order with that code, the referrer is rewarded.
If the claim fails (for example, a self-referral, or a friend who already has orders), the popup shows an error and no code is issued.

​
Best practices

Use {{friend_reward}} in the heading so the popup always matches the real reward.
Ask only for what you need. Email is required. Every extra field lowers completion.

​
FAQs

No. Friends must have no previous orders, and each customer can receive only one friend reward.

Program Setup

Rewards, landing URL, sharing, fraud prevention and UTM tracking.

Reward Types

Pick the right reward for the referrer and the friend.

Referral Widgets

Post-Purchase Widget, Referral Landing Page and Friend Welcome Popup.

Referral Emails

The emails sent to referrers and friends.

Book a Free Setup Call

Talk to our team for personalised setup help.Time: 30 minutes

Contact Support

Visit our support hub for help articles, live chat and ticket submission.

Browse the Guides

Documentation across loyalty, referrals, memberships and more.

Install Yuko

Add Yuko to your Shopify store from the Shopify App Store.