This article is for Shopify merchants only. If you're using another platform, friend offer landing customization is covered in [Other Platforms] Customizing your referral emails, pages, and widgets.
What this article covers
The friend offer landing is what referred friends see when they click an advocate's referral link. On Shopify, you can show it as either a dedicated landing page (FOLP) or a storefront popup that appears over your homepage (EFOP). Both share the same layout, copy, and styling — you choose which one is active in your campaign's Widgets page, and customize either of them in the ReferralCandy Theme editor.
This article covers:
How the page and popup relate (one surface, two display modes)
Choosing between the page and the popup in Widgets
The 8 available layouts
Editing the design in the Theme editor
Popup-only settings (max width, corner radius, mobile behavior, close button, CTA handoff)
The legacy Friend Offer Popup block — what it is, when to migrate
One surface, two display modes
The page and the popup are two display modes of the same friend-offer-landing surface:
Friend Offer Page — a dedicated landing page at a ReferralCandy URL. The advocate's referral link sends the friend here first; after they accept the offer, they're handed off to your store.
Storefront popup — appears over your Shopify storefront homepage. The friend lands directly on your store and sees the offer in a popup card.
Both modes share the same layout, copy, colors, and typography. Choosing which mode is active is a setting on the Widgets page; designing the look of either one is done in the Theme editor.
Inheritance model: When the popup is active, it inherits everything from the page — layout, copy, colors, fonts. The popup adds a small set of overrides specific to popup behavior (max width, corner radius, mobile behavior, close button style, what happens after a CTA click). You can't give the popup a different layout or different copy from the page.
Choose between the page and the popup
This is set in your campaign's Widgets page, in the Friend offer landing section.
From your Shopify admin, open Apps → Referral Candy.
Open your campaign and go to Widgets.
Scroll to the Friend offer landing section. You'll see two cards: Friend Offer Page (default) and Storefront popup.
To stay on the page: leave Show Friend Offer Page on (default).
To switch to the popup: turn off Show Friend Offer Page. The popup activates only when both of these are true:
Friend Offer Popup activated in your theme — the Friend Offer Popup app embed is enabled on your active Shopify theme. See Enable the Friend Offer Popup app embed in your Shopify theme below for how.
Friend Offer Page above turned off — the two are mutually exclusive.
Headless / custom checkout stores: keep the Friend Offer Page on. The page applies the friend's coupon at checkout via UTM parameters — headless storefronts can lose those parameters when the friend lands directly on the store, so the coupon won't auto-apply. The page handoff preserves the UTM trail and keeps the coupon working.
Friend offer set to "none": if your campaign's friend offer is set to None, the friend offer landing is skipped entirely — referred friends go straight to your store. Anything you set up in the Theme editor for the page or popup won't be shown. To bring the landing back, set a friend offer (a coupon or BXGY).
Enable the Friend Offer Popup app embed in your Shopify theme
For the storefront popup to render, the Friend offer popup app embed has to be enabled on your active Shopify theme. This is one of the two activation conditions covered above (the other is turning off Show Friend Offer Page in your campaign's Widgets page).
Shortcut: while logged into Shopify admin, open admin.shopify.com/admin/themes/current/editor?context=apps — it lands directly on your active theme's App embeds panel. Or follow the manual navigation below.
In your Shopify admin, go to Online Store → Themes.
Find your active theme and click Customize.
In the theme editor's left sidebar, click the App embeds icon.
Find Friend offer popup by Referral Candy in the list.
Toggle it on.
Click Save at the top of the theme editor.
Customization (layout, copy, colors, popup-specific settings) is done in the ReferralCandy Theme editor, not here — the Shopify-side toggle only controls whether the popup is allowed to render on your storefront.
Migrating from the legacy popup: if your store previously used the older popup architecture, you'll also see a Legacy friend offer popup entry in the App embeds list. Disable it before (or alongside) enabling the new Friend offer popup, so only one is active.
The 8 layouts
Both the page and the popup support 8 layouts. Pick one in the Theme editor; it applies to both display modes.
Single Column — a centered, single-column layout. The default for existing merchants and the simplest starting point.
Banner Hero — full-width banner image at the top, offer content underneath. Good for image-led brands.
Split Hero — image on one side, offer content on the other. A balanced visual layout.
Product Grid — card layout that pairs the offer with a grid of products. Useful for stores that want to surface their catalog.
Testimonial Stack — pairs the offer with customer testimonials for social proof.
Story Card — full-screen, mobile-first card with background image and gradient overlay. Inspired by social-media stories.
Video Embed — for embedding a hero video alongside the offer.
Quiz Result — interactive-style layout that frames the offer as a personalized result. Good for brands using quizzes in their marketing.
All layouts are responsive and work on desktop and mobile. Use the Desktop / Mobile toggle in the Theme editor to preview each.
Edit the design in the Theme editor
Customization for both the page and the popup happens in the same Theme editor surface — switch between them using the surface toggle at the top.
Open the Theme editor
In your Shopify admin, open Apps → Referral Candy.
Open your campaign and go to Widgets.
In the Friend offer landing section, click Edit the design.
You can also reach it from Themes → click Customize on your active Theme → open the Friend offer landing asset.
Switch between Page and Popup
At the top of the Theme editor, use the Page / Popup toggle to preview each surface.
Editing layout, copy (header / body), images, or colors on either surface updates both — they share the same content.
Editing the Popup-only settings (covered below) updates only the popup.
Page Design (shared)
These settings affect both the page and the popup:
Primary Color — buttons and interactive elements.
Heading Color — headlines and prominent text.
Text Color — body text and UI elements.
Background — page background.
Accent Color — accent highlights and links.
Card Color — card background.
Typography (shared)
Heading font
Body font
Click-to-edit content blocks
In the preview, click directly on a block to edit it — the left panel switches to that block's settings. Common blocks include the heading, body copy, image, and CTA button. Available fields vary by layout.
Use the Preview Options panel on the right to test different campaign states (Active / Not Enrolled / Paused) and toggle the cookie banner.
Popup-only settings
When you open the Popup surface in the Theme editor, you'll see a Popup settings section in the left panel:
These settings only affect the popup surface. Layout, copy, and styling still inherit from the Friend Offer page.
Max width — controls the popup card's width on desktop. Default 420 px.
Corner radius — controls how rounded the popup card's corners are. Default 20 px.
Mobile behavior — choose how the popup behaves on narrow screens:
Fullscreen (default) — the popup takes over the screen on mobile.
Modal — the popup keeps its card shape and overlays the page on mobile.
Close button — choose Filled (filled background behind the close icon, default) or Minimal (no fill).
CTA handoff — choose what happens after the friend clicks the popup's CTA:
Close popup (default) — closes the popup; the friend stays on your storefront.
Navigate parent page — sends the friend to a follow-up URL.
The legacy Friend Offer Popup block
If your Widgets page shows a banner that says "You're using the legacy Friend Offer Popup block. Switch to the new version for the updated editor and design controls." — your store is still using the older popup architecture (a Shopify app-embed block customized in Shopify's app embeds page). Most non-developer-mode Shopify merchants have already been migrated to the new popup automatically.
To switch to the new popup:
In the banner, click Manage Friend offer landing.
Follow the prompts in your campaign's Widgets page to activate the new popup.
The legacy popup keeps working but no longer receives updates or new layouts.
What you may notice when you migrate: the legacy popup automatically inherited your Shopify theme's color scheme (text color, button background, button label all came from your storefront theme). The new popup uses ReferralCandy's own color picker in the Theme editor instead, so colors won't carry over automatically — you may need to set Primary Color, Heading Color, Text Color, Background, Accent Color, and Card Color in the Theme editor to match your storefront. The upside: copy is now editable directly in the RC editor (it wasn't on the legacy popup — merchants used to hack it by editing the Friend Offer Page header).
Developer-mode themes: if you've enabled developer mode on your campaign's Theme, your store is still on the legacy popup until we migrate that Theme. Migration is happening progressively, theme-by-theme. Let us know if you'd like an ETA for your store.
Friend offer landing FAQ
Why doesn't the friend offer popup appear when I open my own referral link?
Why doesn't the friend offer popup appear when I open my own referral link?
When you open your own referral link from the same browser or IP you signed up with, the popup is hidden — that's a fraud-prevention measure to stop advocates from redeeming their own offers.
If you have the Friend Offer Page enabled instead of the popup, the page does show on self-views, but with SAMPLE in place of the coupon code (and a banner explaining it's not a real, redeemable code).
To preview the popup the way a referred friend will see it, open the referral link on a different device, browser, or network — that gets you a different IP and triggers the real popup with a working coupon code. For end-to-end testing, see Testing the referral process.
Why is the friend offer popup empty when someone opens the referral link?
Why is the friend offer popup empty when someone opens the referral link?
The popup may appear but show no content. Common reasons:
Your campaign is paused or stopped. Set it to Live.
In the Widgets page → Friend offer landing section, confirm Show Friend Offer Page is off and the storefront popup is showing as Active.
Custom theme code may interfere with the popup. Check your theme for conflicts.
Note: ReferralCandy doesn't troubleshoot custom theme code. We recommend Online Store 2.0 themes for compatibility with ReferralCandy widgets.
Will the popup load if the shopper navigates away before it appears?
Will the popup load if the shopper navigates away before it appears?
Yes — the new popup is designed to load at least once even if the shopper navigates to another page on your store before the popup has a chance to fire on the landing page. Friends who click a referral link will see the popup at some point during their visit.
Can I give the popup a different layout from the page?
Can I give the popup a different layout from the page?
No — the page and the popup share their layout, copy, and styling. The only popup-specific overrides are surface settings (max width, corner radius, mobile behavior, close button, CTA handoff). If you want different content for the popup vs the page, you'd need to switch which one is active rather than running both.