Popup & Widget
The referral widget is the most visible part of your program — the on-site element customers click, share from, and recognise. When it looks like a bolted-on third-party tool, fewer people trust it; when it matches your store's colors, fonts, and tone, it reads as part of your brand and gets used more. Brand the widget before you start promoting the program, because every share begins here.
There are three surfaces to style, and they do different jobs. The launcher is the always-on button or tab that invites existing customers to open the program. The panel is the popup that opens after they click, where they grab their link and track rewards. The referee popup is shown to a brand-new visitor who arrives through someone's referral link, so they can claim their discount — your first impression with a potential customer. All three live under the Branding tab of your referral campaign, in the Widgets & Popup section.
Best practice: Treat the launcher as advertising and the panel as the product. Keep the launcher quietly visible on high-intent pages (cart, product) so it nudges without nagging, and make the panel polished enough that sharing feels worthwhile. For placement ideas, see the best referral widgets for Shopify.
What to customize, and what tends to win
You can change a lot on the widget, but only a few choices actually move how many people share. The table below maps each element to a sensible default and the direction that tends to win in testing — use it to decide where to spend your effort.
Panel background
Choose a solid color or image
A clean, light background — white or near-white tends to outperform colored or busy backgrounds
Imagery
Show the product or a lifestyle scene
Product-focused creative consistently beats lifestyle imagery
People in the design
Include a photo of a person, or not
No-human design tends to win; busy human-focused panels distract from the reward
Reward framing
Lead with the value, or with the ask
Lead with the referee's reward first — "give a friend $10" reads as a favour, not a sales pitch
Trust cues
Add social proof, or leave it out
Social proof present — showing how many people have shared or joined drives a measurable uplift
Launcher copy
Generic ("Rewards") or specific
A specific, value-led label ("Give $10, get $10") beats a vague one
Launcher placement
Sitewide, or high-intent pages
A quiet presence on cart and product pages nudges buyers without nagging every visitor
The directions above are based on broad A/B testing patterns, not measured numbers from Bloop. They tell you what to try first, not what you must keep. A panel that wins for a fashion brand can lose for a supplement brand — which is exactly why you confirm it on your own traffic. See A/B test your referral rewards for how to run that test in Bloop.
The pattern underneath these results is simple: simpler and product-led wins. A widget that gets out of the way — clean background, the product front and centre, one clear reward, one obvious button — converts better than a busy, over-branded panel. Brand it to belong on your store, then stop adding.
Style the widget panel theme
Open Widget panel to control how the popup looks. The editor has a Design tab for visual styling and a Content tab for the wording shown on each panel screen (Home, Reward, and Send Email). The Design tab is grouped into four sections.
Colors
Primary color, secondary color, and text color
Typography
Font family — either your current theme's font or a font you choose
Background
Header background and popup background, each as a solid color or an image
Border
Popup border style
Match the primary color to your store's main brand color so the share button feels native, set typography to your theme font so copy doesn't clash, and keep the background light unless you have a strong reason not to. Use the live preview beside the editor to check each screen before you save. For the launcher button's own border, Bloop links you to the Widget launcher settings, since the launcher and panel are styled separately.
Configure the widget launcher
Open Widget launcher to control the button that opens the panel. A status badge shows whether the launcher is currently active or inactive on your storefront. The settings are grouped as follows.
Content — the button title and its icon. Keep the default icon or upload your own image (
.jpeg,.png, or.ico, under 20 MB).Placement — where the button sits and how it is oriented. Choose Bottom right, Bottom left, or Custom, where you drag the button on the preview to set an exact position. You can set desktop and mobile separately and add a tab rotation (left or right) for a side-tab look.
Display — what the button shows on desktop and on mobile independently: icon and text, icon only, text only, or hidden. This lets you show a full button on desktop and a compact icon on mobile.
Behavior — an optional display duration in seconds that controls how long the button stays visible on the storefront.
Pages — where the launcher appears: all pages, only selected pages, or hidden on selected pages. You can target the home, cart, product, collection, or search pages, or add a specific URL.
Border — the launcher button's own border and placement.
The two settings worth deliberating over are the copy and the pages. A label that names the reward ("Give $10, get $10") earns more clicks than a generic "Rewards" tab, because it tells the visitor what's in it for them before they commit. Rather than blanketing every page, lean toward high-intent moments — the cart and product pages, where the buyer is already invested — so the launcher nudges people who are most likely to share. See making your referral program visible for how the launcher fits alongside your other entry points.
Customize the referee popup
Open Referee popup to edit the window a new visitor sees after clicking a referral link. This is your first impression with a potential customer, so the copy here should make the referral reward clear and the next step obvious — for example, confirming the discount they have earned and inviting them to shop.
The referee popup is content-only: you edit its wording per language using the language selector, while its visual styling follows the widget panel theme you set above. Lead with the reward the visitor has just unlocked ("You've got 10% off, courtesy of a friend"), name who sent it where you can, and keep the call to action to one button. Preview the popup as you edit, then save.
A worked example
Here is the reasoning end to end. The numbers below are illustrative — an example of how to decide, not measured Bloop results.
Start from defaults. You enable the widget. The default panel has a colored background, a stock lifestyle photo of a model, and a launcher labelled "Rewards" on every page.
Apply the patterns. Following the table above, you switch the panel to a clean light background, swap the model photo for your hero product, and relabel the launcher "Give 10% — get 10%." You set typography to your theme font so the panel reads as part of the store.
Narrow the placement. Instead of all pages, you show the launcher on the cart and product pages, where buyers are already committed.
Confirm, don't assume. Rather than trusting the chart, you run an A/B test of the value-led launcher copy against the generic one. Say it lifts panel opens from 4% of viewers to 6% — a real, stable gap after good volume. You keep the new copy.
Bank it and move on. The cleaner panel and clearer launcher become your new baseline. Your next experiment starts from this stronger setup.
The point isn't the specific numbers — it's the loop: brand to belong, apply the patterns that usually win, then prove the change on your own traffic before you keep it.
Common mistakes to avoid
Over-branding the panel. A crowded, heavily styled popup competes with your store for attention and converts worse than a clean one. Simpler and product-led wins.
Burying the reward. If a visitor has to read three sentences to learn what they get, most won't. Lead with the value, in the launcher label and the panel headline alike.
Showing the launcher everywhere with a generic label. A vague "Rewards" tab on every page is easy to ignore. A specific, value-led label on high-intent pages earns more opens.
Leaving the default font. A panel in a font your store never uses reads as third-party and erodes trust. Match your theme typography.
Changing everything at once, then guessing. If you redesign the panel and relabel the launcher together, a change in opens tells you nothing about which one caused it. Change one thing, test it, then move to the next.
When and why to revisit this
Brand the widget once before you launch, then leave it alone until you have data. The right time to come back is when analytics show a problem the widget can fix: high entry-point impressions but few opens usually means the launcher copy or placement is weak, and lots of opens but few shares points at the panel — an unclear reward or a cluttered design. Treat those symptoms as your prompt to test one change at a time, not as a cue to redesign everything.
Where these settings live
Bloop stores your visual choices in a design configuration tied to your store, and ships sensible defaults from a design template so the widget looks complete before you change anything. Editing the theme, launcher, or referee popup updates that configuration; the storefront widget reflects your changes once you save.
Next steps
New to the program? Start with getting started with referrals to enable the app embed first.
Confirm a design or copy change with A/B testing before you keep it.
Give customers a dedicated landing space with the referral landing page.
Prompt buyers right after checkout with the post-purchase popup.
See how the widget fits your other entry points in making your referral program visible.
Choosing where to put the widget? See the best referral widgets for Shopify for placement ideas.
Last updated