Cart Subtotal Savings

Total cart savings — the difference between the compare subtotal and the post-discount total.

Last updated

Cart Subtotal Savings icon

How to use

  1. Place this component near your Cart Subtotal Compare / Cart Subtotal pair.

  2. Style Font and Color.

  3. Write copy in Content using {{value}}, or leave it empty to show the amount alone — use Value Style to style just the {{value}} placeholder differently from the surrounding text.

  4. Set Format for currency symbol, currency code, and decimal display.

This component only renders on the live storefront when the cart has an active discount — it stays hidden otherwise (always visible on canvas for layout).

Writing savings copy

Leave Content empty to show just the formatted savings amount, or write copy around it using {{value}} as the placeholder — for example, "You're saving {{value}} on this order!". When Content is set, the Value Style control appears: leave it on Inherit to style {{value}} like the rest of the sentence, or switch to Customize to reveal a separate ↳ Font / ↳ Color just for the amount.

When it shows

Cart Subtotal Savings shows the difference between Cart Subtotal Compare and Cart Subtotal, computed live as the cart changes. Like Cart Subtotal Compare, it only renders on the live site once a discount is active; on canvas it's always shown so you can design around it.

Questions? Join our Slack community