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.
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
Every string in these sections is translatable per language; see Translate your widgets.
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.
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.
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