Get Started

Add data-next-cart-summary to any container element. The block subscribes to the cart and re-renders automatically whenever totals change.

<div data-next-cart-summary></div>

No JavaScript is required. The SDK wires everything up on page load.

Default Layout

When no <template> child is present, a built-in layout is rendered:

• Subtotal — always shown
• Discounts — shown only when discounts > 0
• Shipping — shows "Free" when shipping cost is zero
• Tax — shown only when tax > 0
• Total — always shown

Each row uses the CSS classes next-summary-row, next-summary-label, next-summary-value, and a row-specific modifier (next-row-subtotal, next-row-discounts, next-row-shipping, next-row-tax, next-row-total).

<div data-next-cart-summary></div>

To change the row order, wording, or add custom rows, use a custom template instead.

Verify It Is Working

After the SDK initializes and the cart contains at least one item, you should see:

• The summary element's content is populated with formatted prices — not blank
• Adding or removing items, or applying a coupon, updates the totals without a page reload
• The host element has state classes such as next-cart-has-items, next-no-discounts, next-free-shipping, next-not-calculating
• While the cart is recalculating (e.g. after adding an item), the host briefly gets next-calculating then switches back to next-not-calculating
• In the default layout, the discounts row is absent when no discount is active; the tax row is absent when tax is zero

Next Steps

• Control the layout with your own markup: Custom Template
• Add per-item rows and discount breakdowns: Cart Lines & Discounts
• Show individual cart values anywhere on the page: Cart Display
• All attributes and tokens: Reference → Attributes