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

​
Introduction

Referral widgets are the storefront surfaces of your referral program. They let customers get and share their referral link, and let friends claim their welcome reward when they open a link.

​
The widgets

The Widgets tab lists three widgets. Each card has a toggle to turn it on or off, and opens its own editor. Referral links can also be shared from the referral section of the Floating Rewards launcher and the customer account page. Those are configured with the loyalty widgets.

​
Storefront blocks

​
Yuko: Referral Signup (theme app block)

The theme app block behind the Referral Landing Page. Add it to any page template in the theme editor. It has its own theme-editor settings:
  • Content: Show Banner Image, Banner Image, Image Position (Desktop) (Top, Left, Right; default Left), Text Alignment (Left, Center, Right; default Center).
  • Colors: Background, Text, Button Background, Button Text, Border, Error Text.
  • Typography: Heading Size (16 to 48, default 28) and Text Size (12 to 24, default 16).
  • Spacing & Shape: Border Width (0 to 5, default 1) and Corner Radius (0 to 24, default 8).
  • Custom CSS.
The text lives in Yuko, under Referral → Widgets → Referral Landing Page.

​
Yuko Referral Signup (checkout and customer account block)

The extension block behind the Post-Purchase Widget. It has two targets:
  • The Thank you page in the checkout editor.
  • The Order status page in the customer accounts editor.
Its text lives in Yuko, under Referral → Widgets → Post-Purchase Widget. Its look follows Shopify’s checkout and customer account styling.

​
Before you start

The referral program is enabled and both rewards are set in Referral → Program. Widgets stay hidden until a friend reward exists.
The Yuko App embed is turned on in your theme. See Theme App Embed.

​
Common editor features

  • Editing language: each widget editor has a language picker, so you can enter text for every language published in your Shopify store.
  • Reward shortcodes: text fields accept {{friend_reward}} and {{referrer_reward}}. They’re replaced with the Title of the friend and referrer rewards.
  • Form fields: the Referral Landing Page and Friend Welcome Popup let you choose which fields the form collects (First Name, Last Name, Phone, Marketing Consent; Email is always included).
  • Preview: each editor shows a live preview of the widget’s states.
1

Turn on the Friend Welcome Popup

Without it, friends who open a referral link can’t claim their reward. It’s the Enable referral popup step in the Program tab’s Quick Start.
2

Give customers a way to get their link

Turn on the Post-Purchase Widget, the Referral Landing Page, or both.
3

Test as a customer and as a friend

Get a link as a customer, open it in a private window, and claim the friend reward.

​
FAQs

Check that the referral program is enabled, a friend reward is set, the widget’s toggle is on, and its block (or the Yuko App embed) is added to your theme, checkout or customer accounts.
The Friend Welcome Popup has a Styles tab in Yuko. The Referral Landing Page is styled in the theme editor through the Yuko: Referral Signup block. The Post-Purchase Widget follows Shopify’s checkout styling.

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.