Cart Incentive Amount

The live spend amount inside Cart Incentive — remaining or required.

Last updated

Cart Incentive Amount icon

How to use

  1. Place this component inside a Cart Incentive State's Under Threshold or Over Threshold design.

  2. Set Recipe ID on the parent Cart Incentive State — not on this component; Cart Incentive Amount inherits it automatically.

  3. Choose Value: Remaining or Required.

  4. Write copy in Content using {{value}} or leave it empty to show the formatted amount alone.

  5. Style Font and Color for the base text, set Format for currency symbol/code and decimals, and use Value Style to control how the {{value}} placeholder itself is styled.

Remaining vs. required amount

Value

What it shows

Remaining

How much more the customer needs to spend to reach the incentive threshold — e.g. the "$12" in "Add $12 more for free shipping."

Required

The full incentive threshold amount itself, regardless of what's already in the cart — e.g. the "$50" in "Orders over $50 unlock free shipping."

How canvas and live preview differ

On the canvas, both Remaining and Required read the parent Cart Incentive State's Threshold setting — there's no live cart to compute an actual "remaining" amount against, so both show the same number side by side. In the Framer editor's Preview mode and on the published site, the real cart subtotal is used instead, so Remaining correctly reflects the customer's actual progress toward the threshold.

Questions? Join our Slack community