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

Introduction

The Referral Landing Page is a dedicated page for your referral program. Visitors can sign up for a referral link, and logged-in customers can copy and share theirs. On the storefront, it’s rendered by the Yuko: Referral Signup theme app block.

What problem this solves

Customers can’t refer friends if they can’t find their link. A dedicated page gives you one URL to promote in emails, ads and your navigation, and it works for both guests and logged-in customers.

Where it appears

  • A Shopify page Yuko creates for you: Referral Program, at /pages/referral-info-page.
  • Any other page template where you add the Yuko: Referral Signup block.

Overview

  • Guest View and Logged In View, each with its own text.
  • A configurable sign-up form for guests.
  • Optional social share buttons.
  • No Styles tab in Yuko. Colours, fonts, banner image and Custom CSS are set on the theme block.

Before you start

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

Setup guide

1. Create the page

1

Open the widget

Go to Referral → Widgets and open Referral Landing Page.
2

Create the landing page

If your store has no referral landing page yet, Yuko opens a Create referral landing page dialog. Click Create to add a Shopify page titled Referral Program at /pages/referral-info-page.
Once the page exists, a Check landing page button appears next to the widget title. Use it to confirm the page is still in Shopify, for example if someone may have deleted it.

2. Edit the content

1

Guest View

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.
2

Logged In View

3

Social Sharing

Turn on Enable Social Share to show share buttons, and set Or share via text (default Or share via:). Only the channels enabled in Referral → Program → Social Sharing Settings appear on the storefront. The preview always shows every channel.
4

Save and enable

Click Save, then switch the toggle next to the widget title on.
Titles and subtitles accept {{friend_reward}} and {{referrer_reward}}, which are replaced with your reward titles.

3. Add or style the block in your theme

The page Yuko creates is ready to use. To add the widget to another page, or to style it, click Add block in the widget editor, or follow these steps:
1

Turn on the Yuko App embed

Theme blocks get their content from Yuko’s storefront script, which loads through the Yuko App app embed. If you haven’t already, enable it in Online Store → Themes → Customize → App embeds. See Theme App Embed.
2

Open the Theme Editor

In your Shopify admin, go to Online Store → Themes, find your active theme, and click Customize.
3

Pick the right template

Use the template selector at the top to open the page where this widget should appear (Product, Cart, a page template, and so on).
4

Add the Yuko app block

Click Add block in the section where you want the widget. Under Apps, select the Yuko block named for this widget (block names start with Yuko:).
5

Position and save

Drag the block to your preferred position and click Save.
Choose the Yuko: Referral Signup block. Its theme-editor settings cover the banner image and position, text alignment, colours, heading and text size, border width, corner radius and Custom CSS. See Referral widgets.

4. Verify

Open /pages/referral-info-page in a private window and sign up with a test email. Then log in as a customer and check that the Logged In View shows a referral link.

How it works

  1. A guest fills in the form and submits it. Yuko enrolls them as a referrer and shows their link.
  2. A logged-in customer clicks Get referral link (or sees their existing link) and copies it.
  3. If social sharing is on, customers can share through your enabled channels.

Best practices

Link to the page from your navigation and emails. A dedicated URL is easy to promote.
Keep the form short. Email alone is enough to create a referral link.

FAQs

Open the widget in Yuko. If the page no longer exists, the Create referral landing page dialog appears again.
This widget is styled in the Shopify theme editor, through the Yuko: Referral Signup block settings.

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.