Skip to main content
The Summary block shows the shopper what they’ll pay: a total row with optional savings, plus applied discount tags. It summarizes the cart’s totals and savings just above the checkout button, so shoppers see the bottom line before they commit.
Summary block displaying subtotal, savings, and applied discounts before checkout

Behavior

  • Savings tokens collapse gracefully. If a cell references {{savings}} or {{pre_savings_price}} but the cart has no saving, that cell falls back to just {{total_price}}, so shoppers never see “$0.00 off” or a struck price equal to the total. If you combine {{cart_item_count}} and {{savings}} in the same cell, the item count is also removed in the no-savings fallback — put them in separate cells to avoid this.
  • Discount tags appear only when Show discount codes is on and the cart has discounts to list. This includes both code-based and automatic discounts.

Settings

The text cells support the {{cart_item_count}}, {{total_price}}, {{pre_savings_price}}, and {{savings}} tokens.

Placement and limits

  • Region: bottom.
  • Maximum: 2 per cart state — the filled cart and the empty cart each get their own allowance.
  • State: both filled and empty cart.
  • Added to new carts by default. Not locked, so you can remove or hide it.

Custom template

Supports a custom template from its Code tab, which replaces this block’s built-in markup with your JSX. These are the props it receives.
Because savings can be either money or a percentage, don’t build your own sentence around it that assumes one. {props.savings} on its own is safe; You saved ${props.savings} is not.

Design

Style this block with its Design section in the settings panel. These are per-block overrides that layer on top of your global design and fall back to it when blank. What are design settings? Learn more here: Design settings.