Order summary

The order summary area displays cart line items, applied discounts, and cost totals on the checkout page. Extensions in this area help buyers make informed purchase decisions by surfacing information like product details, promotions, and savings alongside their order. Learn more about building checkout extensions.

Anchor to Use casesUse cases

• Per-item warranty and protection offers: Display product protection plans or extended warranties on individual items, letting buyers add coverage before completing their purchase.
• Product customization display: Show personalized details like engraving text, gift messages, or configuration options beneath each item in the order summary.
• Cross-sell and product recommendations: Suggest related products or frequently bought together items after the cart line list, allowing buyers to add them directly.
• Custom discount interfaces: Build branded discount entry fields or loyalty point redemption controls before or after the native discount form.
• Gift card balance and application: Let buyers check gift card balances and apply them to their order alongside or separate from the standard discount inputs.
• Order savings breakdowns: Display detailed summaries of all applied discounts, automatic savings, and promotional offers after the discount area.

Anchor to Line item targetsLine item targets

Use these static extension targets to extend the order summary line items area during checkout. These targets support the full checkout component set, including form fields, banners, images, and interactive elements. The examples demonstrate using API methods for cart mutations and API properties for reading checkout state.

Anchor to Checkout cart line item ,[object Object]Checkout cart line item target

purchase.checkout.cart-line-item.render-after

Renders on every line item in the order summary, inside the details under the line item properties element. This target is instantiated once for each item in the cart. To selectively show content for specific items, inspect the cart line data from target and return null for items where your extension doesn't apply.

This target receives the CartLineItemApi, which provides the specific cart line through the target property with access to merchandise details, quantity, cost, attributes, discount allocations, and bundle line components.

Extensions at this target have write access through API methods for cart lines, discount codes, gift cards, notes, attributes, metafields, and shipping address changes. Extensions also have read access through API properties to checkout state, including shop information, buyer identity, cost breakdowns, and cart lines.

Anchor to Checkout cart line list ,[object Object]Checkout cart line list target

purchase.checkout.cart-line-list.render-after

Renders once after all line items in the order summary. This target appears once per checkout, unlike the cart line item target, which is instantiated for each item.

Extensions at this target have write access through API methods for cart lines, discount codes, gift cards, notes, attributes, metafields, and shipping address changes. Extensions also have read access through API properties to checkout state, including shop information, buyer identity, cost breakdowns, and cart lines.

Anchor to Reductions targetsReductions targets

Use these static extension targets to extend the order summary reductions area, where discount codes and gift cards are applied. These targets support the full checkout component set, including form fields, banners, images, and interactive elements. The examples demonstrate using API methods for applying discount codes and gift cards.

Anchor to Checkout reductions before ,[object Object]Checkout reductions before target

purchase.checkout.reductions.render-before

Renders in the order summary before the discount form element.

Extensions at this target have write access through API methods for cart lines, discount codes, gift cards, notes, attributes, metafields, and shipping address changes. Extensions also have read access through API properties to checkout state, including shop information, buyer identity, cost breakdowns, and cart lines.

Anchor to Checkout reductions after ,[object Object]Checkout reductions after target

purchase.checkout.reductions.render-after

Renders in the order summary after the discount form and discount tag elements.

Extensions at this target have write access through API methods for cart lines, discount codes, gift cards, notes, attributes, metafields, and shipping address changes. Extensions also have read access through API properties to checkout state, including shop information, buyer identity, cost breakdowns, and cart lines.