eg

Order summary patterns

Where the order summary lives during checkout shapes how confident shoppers feel about the final total. The pattern depends on viewport, basket complexity, and whether the brand wants the total to function as reassurance or as a final reveal.

Shopify

Sticky right rail

Form on the left, two-thirds width. Order summary on the right, one-third width, sticky as the shopper scrolls. The default in modern hosted checkouts and the desktop pattern most shoppers expect.

Example of a Shopify-style sticky right rail order summary alongside checkout formsearchInformation1 of 3 · contact and shippingEmailFull nameAddressCity, postcode, countryContinue to shippingOrder summary3 items ▾1Item 1variant · M$28.002Item 2variant · M$64.003Item 3variant · M$19.00Subtotal$111.00Shipping$6.00Tax$8.88Total$125.88sticky on scrollecommerceguide.com

> what's good

  • +Total stays visible during every form interaction, removes uncertainty about final cost.
  • +Line items, codes, and totals all live in one persistent panel.
  • +Predictable layout, no surprises about where to find the summary.

> what's risky

  • ·Doesn't translate to mobile, requires a different drawer pattern below the breakpoint.
  • ·Sticky behaviour can break with browser zoom or accessibility tools.
  • ·Two-column layout consumes vertical space, can push form off screen on short viewports.
Mobile default

Collapsible drawer at top

On mobile, the summary collapses into a compact bar at the top with the total and an expand chevron. Tapping reveals line items and tax breakdown without leaving the page.

Example of a mobile drawer collapsible order summary at top of single-column checkoutsearchcheckoutHide order summary3 items$125.88 ▴Item 1variant · qty 1$28.00Item 2variant · qty 1$64.00Item 3variant · qty 1$19.00ContactShippingContinuedrawer collapsesby default on mobileecommerceguide.com

> what's good

  • +Total is always visible, line-item detail is one tap away.
  • +Saves vertical space for the form, the dominant content on mobile.
  • +Familiar pattern, shoppers expect a drawer at the top of mobile checkouts.

> what's risky

  • ·Hidden detail can hide unexpected charges, shoppers may feel surprised at the final tap.
  • ·Animation must be instant, slow expand is the most-complained-about checkout interaction.
  • ·Drawer chrome competes with the navigation bar visually if not carefully styled.
DTC default

Inline at bottom of single-column

A single centred column. Form at the top, totals appear once at the bottom directly above the place-order CTA. Common on DTC checkouts that prioritise focus over reassurance.

Example of a DTC-style inline order summary at bottom of single-column checkoutsearchcheckoutWhere to and how?EmailAddressCard detailsSubtotal$111.00Shipping$6.00Tax$8.88Total$125.88Place ordersummary appears once at the bottom · no railecommerceguide.com

> what's good

  • +Single column reads top-to-bottom, no decision about where to look.
  • +Total adjacent to the CTA creates a clear commit moment.
  • +Editorial aesthetic, fits brands that treat checkout as part of the product.

> what's risky

  • ·Total isn't visible during form entry, shoppers can't sanity-check as they go.
  • ·Shoppers who fall back to the cart to recheck pricing add friction.
  • ·Discount and tax surprises hit at the worst possible moment, just before submit.

More cart & checkout patterns