> 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/product-page-and-cart-cashback-messages.md).

# Product page & cart cashback messages

{% embed url="<https://dollarlabs.neetorecord.com/watch/c8d6c712c04f95c6091c>" %}

\_This article's section starts at 1:02 in the video.\_

These two theme blocks put a cashback line where buying decisions happen: on the product page and in the cart. When you're done here, both show the right message for every state (standard cashback, goal progress, tier reached, and discount-code rewards) in your brand's colors.

## At a glance

| Touchpoint           | Surface                        | What it shows                                                                                                    | You can customize                                                                         |
| -------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| Product page message | PDP theme block                | Cashback earnable on this product; tier-reached / tier-max / goal-progress states; discount-code reward messages | Message text per state, background/text color, size, weight, padding, tooltip, custom CSS |
| Cart message         | Cart page / drawer theme block | Cashback for the current cart; order-goal progress tiers; discount reward messages; loading state                | Message templates per state, colors, typography, padding, tooltip, custom CSS             |

## Prerequisites

* At least one live cashback program; see [Quick start](/dollarback-store-credit/getting-started/quick-start-launch-your-first-cashback-program.md).
* The theme blocks added to your theme; see [Activate widgets in your theme](/dollarback-store-credit/getting-started/activate-widgets-in-your-theme.md).

## Step 1. Add the blocks in your theme

1. In the Shopify theme editor, open a product page template and add the **Cashback Rewards: Product** block where you want the message (most stores place it near the price or the add-to-cart button).
2. Open your cart template (or the section your theme uses for the cart) and add the **Cashback Rewards: Cart** block.
3. Save. The blocks render with default messages immediately wherever a cashback program applies.

If you use a third-party cart drawer (Rebuy, Upcart, and others), the cart message can render inside it too. See [Cart drawer integrations](/dollarback-store-credit/integrations/cart-drawer-integrations.md).

## Step 2. Customize the messages

Go to **DollarBack admin → Customization** and open **Product page – cashback** or **Cart – cashback**. Both editors have the same four sections: **Messages**, **Appearance**, **Tooltip**, and **Advanced**, with a live preview beside them.

Each state has its own template. Variables in curly braces are replaced per customer and cart:

| Message field                   | When it shows                                                     | Variables                                                                     |
| ------------------------------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| Cashback message                | The standard state, when a cashback program applies               | `{amount}`, `{title}` (product page also supports `{startDate}`, `{endDate}`) |
| Order-goal progress message     | An order-goal program exists and the goal isn't reached yet       | `{remainingAmount}`, `{nextAmount}`                                           |
| Order-goal tier reached message | A goal tier is reached but higher tiers remain                    | `{amount}`, `{remainingAmount}`, `{nextAmount}`                               |
| Order-goal max reached message  | The top goal tier is reached                                      | `{amount}`, `{title}`                                                         |
| Discount reward message         | The matching program pays a discount code instead of store credit | `{reward}`                                                                    |
| Loading message                 | Shown briefly while the cart recalculates                         | (none)                                                                        |

For example, a progress message like `Add {remainingAmount} more to earn {nextAmount} back` updates live as the customer edits their cart.

## Step 3. Style the block

In **Appearance**, set:

| Control                       | Effect                       |
| ----------------------------- | ---------------------------- |
| Background color / Text color | The message bar's colors     |
| Text size / Text weight       | Typography of the message    |
| Padding                       | Space inside the message bar |

In **Tooltip**, the **Tooltip visibility** toggle adds a small info anchor next to the message. You can set the **Tooltip text** (variables `{amount}`, `{title}`), plus **Tooltip background color**, **Tooltip text color**, **Tooltip anchor color**, and the tooltip's **Link color** and **Link size**.

## Step 4. Custom CSS

For anything the controls don't cover, the **Advanced** section has a **Custom CSS** field scoped to the block. Use your browser's inspector to find the class you want to override, then save and refresh the storefront.

## Verify it works

1. Open a product covered by a cashback program. The product message should show the right amount.
2. Add it to the cart and open the cart page. The cart message should reflect the cart total.
3. If you run an order-goal program, add and remove items to walk the cart through the progress, tier-reached, and max states.

## Common issues

* The block doesn't appear at all: usually it was never added to the template, or no program matches the product. See [A widget isn't showing on my store](/dollarback-store-credit/troubleshooting-and-faq/widget-isnt-showing.md).
* The amount looks wrong: messages mirror the calculation engine, including discounts and config competition. See [How cashback is calculated](/dollarback-store-credit/earning-cashback-programs/how-cashback-is-calculated.md).
* The message shows in English on a translated storefront: add a translation for the widget. See [Translate your widgets](/dollarback-store-credit/widgets-and-storefront/translate-your-widgets.md).

## Related articles

* [Activate widgets in your theme](/dollarback-store-credit/getting-started/activate-widgets-in-your-theme.md)
* [The floating cashback widget](/dollarback-store-credit/widgets-and-storefront/the-floating-cashback-widget.md)
* [Cart drawer integrations](/dollarback-store-credit/integrations/cart-drawer-integrations.md)
* [Translate your widgets](/dollarback-store-credit/widgets-and-storefront/translate-your-widgets.md)