How to Customize the Referi Referral Launcher

The referral launcher is a floating button on your storefront that gives customers quick access to their rewards, referral link, and referral activity from any page. A launcher that matches your brand looks like part of your store, so customers are more likely to notice it, trust it, and share it with their friends.

Before you start

• Enable store credit. If you see the banner To issue rewards, please enable store credit in your Customer account settings, click the store credit link and turn it on. Customers can't receive referral rewards without it.
• Enable the app embed. The launcher only appears on your storefront once the Referi app embed is turned on in your theme. You can check this on the Referi home page under App embed status.

Open the launcher editor

1. In your Shopify admin, go to Apps > Referi > Customization.
2. Under Storefront, find Referral launcher and click Customize.
3. At the top of the editor, make sure the Referral launcher toggle is on. The Activated label confirms it's live.

The editor has three tabs: Launcher, Theme, and Content. A live preview shows your changes as you make them.

Launcher tab: placement and button style

Use this tab to control where the launcher sits and what the floating button looks like.

Placement

• Device: switch between Desktop and Mobile to set each one up separately, so the launcher fits every screen size.
• Position: choose Bottom left or Bottom right.
• Side spacing: set the distance in pixels from the bottom and side edges of the screen. Increase it if the launcher overlaps a chat bubble, cookie banner, or sticky add-to-cart bar.

Float button

• Display type: show the button as Icon only, Text only, or Icon and text.
• Button icon: use the Animated icon to catch shoppers' attention, pick a Static icon (gift, crown, star, badge, or store), or Upload your own icon. Uploads support .webp, .png, .jpg, .svg, and .gif files up to 500 KB, and a 1:1 ratio works best.
• Button label: the text on the button, such as "Rewards". It's used when the display type includes text.
• Border radius: make the button a Circle, Rounded, or Square.

Theme tab: style and colors

Use this tab to match the launcher to your brand.

Widget theme

Choose one of the three ready-made visual styles. The preview updates right away, so you can compare them before you decide.

Color settings

Fine-tune each color with a hex code and an opacity percentage:

Setting	Where it's used
Main text color	Headings and primary text
Sub text color	Descriptions and secondary text
Icon color	Icons in lists, such as ways to earn
CTA background color	The fill of main buttons, such as Sign in
CTA text color	The text on main buttons

Tip: keep strong contrast between the CTA background and text colors, so buttons stay easy to read.

Content tab: launcher text

Use this tab to write what customers read in the launcher. First choose which view to edit:

• Guest view: what visitors see before they sign in.
• Customer dashboard: what signed-in customers see.

Guest view fields

Field	What it is	Default
Reward name	The name of your program. Click {store_name} to insert your store's name automatically.	{store_name}'s rewards
Welcome title	The main greeting	Welcome!
Welcome subtitle	A short line under the title, up to 100 characters	Start earning rewards today
Description	A brief invitation to join, up to 100 characters	Join our loyalty program to earn store credit and enjoy more benefits
Button label	The text on the sign-in button	Sign in

Tip: Lead with the benefit. A line like "Refer a friend and you both get store credit" tells visitors exactly why they should sign in.

Save and check your storefront

When the preview looks right, save your changes. Then visit your storefront on both desktop and mobile to confirm the launcher sits in the right place and doesn't cover other elements.

Need help?

If you have any questions or need assistance, please feel free to contact us at [email protected]. We’ll be happy to help.