The floating cashback widget
_This article's section starts at 5:32 in the video._
The floating widget is DollarBack's home base on your storefront: a launcher button in the page corner that opens a tabbed panel where customers check their balance, earn credit, track tiers, share referrals, redeem rewards, and read their history. This page covers activating it and customizing every label and color.
At a glance
Floating cashback widget
App embed (site-wide)
Launcher opening a tabbed panel: balance, ways to earn (signup / newsletter / birthday / social forms), tiers and progress, referral link, rewards, history
All labels and tab names, login prompts, card order, panel width, 5 color roles, border radius, custom CSS
Prerequisites
At least one live cashback program; the widget shows earning actions only for programs that exist.
The app embed enabled; see Activate widgets in your theme.
Step 1. Turn on the app embed
The widget is an app embed, not a section block: it renders on every page.
In the Shopify theme editor, open the app embeds panel.
Enable the Cashback Widget embed and save.
Visit your storefront. The launcher appears in the corner.
What customers see in the panel
The panel has three tabs, Home, Offers, and Referral (all three names are customizable):
Home: the customer's balance, tier and tier progress, and a stack of earn cards: Signup Bonus (with a Sign up button for guests), Newsletter (Subscribe), Birthday (Add Your Birthday form), and Social (Follow buttons with trackable links). Cards appear only for programs you actually run. An optional card linking to your full loyalty page can sit here too (see below).
Offers: the reward marketplace, holding rewards the customer can redeem with credit plus their reward history.
Referral: the customer's referral code and share options.
Logged-out visitors see login prompts instead of personal data; those prompts are customizable too.
Step 2. Customize labels and content
Go to DollarBack admin → Customization → Cashback widget. The settings form is grouped into sections, each mapping to part of the panel:
Header
The launcher's button label and panel header text
Login / Logged out
Prompts and buttons shown to guests
Navigation tabs
The names of the Home / Offers / Referral tabs
Cashback
Balance and credit labels
Earn credit descriptions
The copy on each earn card
Signup labels / Newsletter labels / Birthday labels / Social labels
Each earn form's heading, description, and button text
Tiers / Tier labels / Tier unlock requirements
Tier names, progress text, and requirement strings (for example the spend requirement supports {amount})
Referral
Referral tab headings and share copy
Offers count / Redeem rewards / Reward history
Marketplace labels, redeem buttons, and history strings
Loyalty page / Loyalty page card
Whether the Home tab links to your loyalty page, and the card's wording
Every string in these sections is translatable per language; see Translate your widgets.
Credit history filters
The Reward history section names the filters on the history popup. There are four: All, Store credit, Discount codes, and Referral. The last of these separates referral earnings out of the general store-credit list, so a customer can see what their referrals have actually paid them. Each filter's label is yours to change, along with the popup title, the empty and error states, and the labels on each detail row (program, reason, order, order total, expiry, code).
Link to your loyalty page
If you run a loyalty page as well as the widget, the widget can point at it rather than competing with it. Tick Show loyalty page card in the Loyalty page section, then set the wording in Loyalty page card: a Home card label and a Home card detail line. The card appears on the Home tab and opens the loyalty page.
This is worth doing if your loyalty page carries content the widget doesn't — a rich program explainer, tier benefits laid out in full, or membership. It keeps the widget as the quick check on a balance, and gives customers who want the whole story somewhere to go.
Step 3. Reorder the Home cards
The Card Order section lists the Home tab's cards; drag to reorder how cards appear on the Home tab. Put your most important earning action first; most stores lead with the balance and the signup or referral card.
Step 4. Style it
The widget's look is driven by five color roles plus shape controls:
Primary color
Launcher and primary buttons
Secondary color
Secondary accents and highlights
Panel background
The panel's background
Text color
Body text throughout the panel
Accent color
Progress bars, badges, and emphasis
Border radius
Corner rounding, 0–30
Panel width
Panel width, 280–440 px
Position
Bottom right or Bottom left
For anything beyond these, use the Custom CSS field on the Advanced tab. It's scoped to the widget, and your rules load with it on every page.
To replace the launcher button's icon, or any of the illustrations inside the panel, see Icons & images.
Working with the preview
The preview beside the settings form is live, and two things make it faster to work with than it looks.
Click any text in the preview to jump straight to the field that controls it. Faster than scanning a long settings form for the one string you want to change, particularly for labels buried in the tier or history sections.
Switch the preview to a guest to see what signed-out visitors get. A dropdown offers seven scenarios — Everything, Sign-in only, Cashback, Referral, Cashback + Referral, Tiers, and Membership — so you can check the signed-out panel against each combination of programs without opening a private window or signing out. Sign-in only is the strictest case: nothing but the login prompt, which is what a guest sees when no program is visible to them.
Prefer a menu item to the floating button?
If the floating launcher clashes with your navigation, a chat bubble, or a cookie banner, you can hide it and open the same panel from a header menu item or your own button instead. See Open the widget from a menu link.
Verify it works
Open your storefront in a private window: the launcher should show, and the panel should show logged-out prompts.
Sign in as a test customer: the Home tab should show the balance and only the earn cards for programs you run.
Change a color and the card order in the admin, save, and refresh the storefront to confirm both apply.
Earn a referral reward on the test account and open the history popup: the Referral filter should isolate it.
Common issues
The launcher doesn't appear: the Cashback Widget app embed is off, or the theme was switched. See A widget isn't showing on my store.
An earn card is missing: the matching program is paused, outside its date window, or doesn't exist. See Cashback program types at a glance.
The balance looks stale after an order: check the trigger and holding period. See When credit is issued.
Related articles
Last updated