> For the complete documentation index, see [llms.txt](https://help.dollarlabs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.dollarlabs.io/dollarback-store-credit/widgets-and-storefront/the-floating-cashback-widget.md). # The floating cashback widget {% embed url="" %} \_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 | Touchpoint | Surface | What it shows | You can customize | | ------------------------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | 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](/dollarback-store-credit/getting-started/activate-widgets-in-your-theme.md). ## Step 1. Turn on the app embed The widget is an app embed, not a section block: it renders on every page. 1. In the Shopify theme editor, open the app embeds panel. 2. Enable the **Cashback Widget** embed and save. 3. 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: | Section | What it controls | | ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | 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](/dollarback-store-credit/widgets-and-storefront/translate-your-widgets.md). ## 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: | Control | Effect | | ---------------- | ----------------------------------- | | 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](/dollarback-store-credit/widgets-and-storefront/open-the-widget-from-a-menu-link.md). ## Verify it works 1. Open your storefront in a private window: the launcher should show, and the panel should show logged-out prompts. 2. Sign in as a test customer: the Home tab should show the balance and only the earn cards for programs you run. 3. 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](/dollarback-store-credit/troubleshooting-and-faq/widget-isnt-showing.md). * 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](/dollarback-store-credit/earning-cashback-programs/cashback-program-types-at-a-glance.md). * The balance looks stale after an order: check the trigger and holding period. See [When credit is issued](/dollarback-store-credit/earning-cashback-programs/when-credit-is-issued.md). ## Related articles * [Activate widgets in your theme](/dollarback-store-credit/getting-started/activate-widgets-in-your-theme.md) * [Open the widget from a menu link](/dollarback-store-credit/widgets-and-storefront/open-the-widget-from-a-menu-link.md) * [Set up the loyalty page](/dollarback-store-credit/widgets-and-storefront/set-up-the-loyalty-page.md) * [Set up the reward marketplace](/dollarback-store-credit/spending-store-credit-and-rewards/set-up-the-reward-marketplace.md) * [Translate your widgets](/dollarback-store-credit/widgets-and-storefront/translate-your-widgets.md)