> 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="<https://dollarlabs.neetorecord.com/watch/c8d6c712c04f95c6091c>" %}

\_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.

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-601723340d97b85e76e4897275a4445d708588e5%2Fdb-theme-editor-app-embeds-annotated.png?alt=media" alt="The Shopify theme editor with the App embeds panel filtered to Cashback, showing the Cashback Widget and Cashback Window Variable embeds switched on, and the storefront preview with a Rewards button in the bottom-right corner."><figcaption><p>Turn on the Cashback Widget app embed in the theme editor and save. The launcher then shows in the corner of every page.</p></figcaption></figure>

## 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.

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-5994b9d9cbca9bf6763341d09b07e16af26caed4%2Fdb-storefront-widget-panel-annotated.png?alt=media" alt="The DollarBack floating panel open on the storefront for a signed-out visitor, showing the Unlock your rewards prompt with a Login button, a Cashback card, and Home and Offers tabs along the bottom." width="560"><figcaption><p>A signed-out visitor sees a sign-in prompt and cards for the programs you run.</p></figcaption></figure>

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 → Customize → Cashback widget**. The settings form is grouped into sections, each mapping to part of the panel:

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-f075ba3c36eedd973031bcb2129d8b5ed529a56e%2Fdb-widget-editor-overview-annotated.png?alt=media" alt="The Cashback widget editor with the Content tab open, showing the Header and Login sections, and a Preview card with tabs Widget Panel, Floating Button, Logged Out, No Tiers, Redeem rewards and Membership."><figcaption><p>The Cashback widget editor splits its settings into tabs. Home, Appearance, Content and Advanced are under More views, and the preview on the right updates as you type.</p></figcaption></figure>

| 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                                                    |
| 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](/dollarback-store-credit/widgets-and-storefront/translate-your-widgets.md).

### 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](/dollarback-store-credit/widgets-and-storefront/set-up-the-loyalty-page.md) 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:

| 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.

To replace the launcher button's icon, or any of the illustrations inside the panel, see [Icons & images](/dollarback-store-credit/widgets-and-storefront/icons-and-images.md).

## 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.

<figure><img src="https://2844543096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcVBfwy7Yj4tU8TsxkHEr%2Fuploads%2Fgit-blob-b2e9411dd7a51d6fd6251d44db6ca47d140aaffd%2Fdb-widget-preview-guest-annotated.png?alt=media" alt="The widget preview set to Logged Out with the scenario chips Sign-in only, Everything, Cashback, Referral, Cashback + Referral, Tiers and Membership, above a panel that asks the guest to log in."><figcaption><p>Click Logged Out, then a scenario, to check the signed-out panel for each mix of programs without leaving the admin.</p></figcaption></figure>

## 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.
4. 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](/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)