Product page & cart cashback messages
_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
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.
The theme blocks added to your theme; see Activate widgets in your theme.
Step 1. Add the blocks in your theme
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).
Open your cart template (or the section your theme uses for the cart) and add the Cashback Rewards: Cart block.
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.
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:
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:
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
Open a product covered by a cashback program. The product message should show the right amount.
Add it to the cart and open the cart page. The cart message should reflect the cart total.
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.
The amount looks wrong: messages mirror the calculation engine, including discounts and config competition. See How cashback is calculated.
The message shows in English on a translated storefront: add a translation for the widget. See Translate your widgets.
Related articles
Last updated