Collapsing the Order Summary on Mobile Hides the Number Buyers Check Most
Open any mobile checkout analytics and watch the same gesture repeat: buyer reaches payment, stops, opens the collapsed order summary, stares, closes it, continues. That pause is not curiosity. It is verification. The buyer is checking that the total in their head matches the total on the screen before money moves.
Collapse the summary if you must. Space on a phone is real. But the design decision that matters is which number survives the collapse. If the answer is none, if the header just says order summary with a chevron, you have hidden the single figure the entire page exists to confirm.
The total is not summary content
Item names, quantities, thumbnail images: that is summary content, and it collapses fine. The total is the transaction itself. Treating it as one more row inside a collapsible box confuses a layout pattern with a hierarchy decision. The pay button and the total belong in the same visual unit, always, on every scroll position of the payment step.
Test it cheaply. Put the total in the collapsed header, change nothing else, and watch payment step completion and summary open rate together. When we have seen this run, the opens drop because the question they answered is now answered inline, and completion rises by the small, real margin that removed doubt is worth.
Shipping surprises do their damage here
Most summary reopening spikes trace back to shipping. The buyer saw a product price, maybe a free shipping hint on the product page, and now suspects the total has quietly grown. If shipping appears only inside the collapsed section, suspicion wins and the buyer goes hunting, or leaves.
Show shipping as its own visible line next to the total from the moment it is known, and say free in words when it is free. A zero with a label beats an absence. Buyers do not trust a missing shipping line; they assume it is hiding below the fold, because on other stores it was.
Discount codes live or die in the collapse
Stores collapse the summary and take the discount field down with it, then wonder why code usage and affiliate attribution fall on mobile. Buyers who arrive with a code will open the summary to find the field. Buyers who do not have one should never be sent hunting by a show details pattern that looks like a code box.
Keep the discount entry visible as its own quiet row if codes are part of your model. If they are not, do not let the collapsed summary header visually promise one. Ambiguity here costs twice: once in hunting behaviour, once in buyers leaving checkout to search the web for a code that may not exist.
Sticky totals and the keyboard problem
On mobile the pay action and total must survive the keyboard opening. Card fields summon a keyboard that eats half the screen, and a total that scrolls away at that exact moment fails the buyer at the point of maximum commitment. Pin the total with the pay button in the sticky footer while fields are focused.
Then test with the keyboard up, on a small phone, with autofill enabled, because that is the actual room. Desktop reasoning about a tidy collapsed box has ended more mobile checkouts than any fee ever charged.
Related reading
These earlier guides go deeper on connected questions: Checkout Blocks You Cannot See: Auditing App Injections in the Order Status Page, Address Validation at Checkout: Correcting Addresses Without Insulting the Customer, and Shipping Protection at Checkout: The Toggle Shoppers Read as a Trick.
Frequently asked questions
Should the mobile order summary start open or collapsed?
Collapsed is fine for the item detail, provided the total and shipping stay visible outside it. Starting fully open pushes payment fields below several screens of thumbnails on a phone. The split that tests best is items collapsed, money visible: buyers verify the figure without scrolling through the basket they just built.
Why do buyers keep reopening the order summary?
To reconcile the total. They carry a mental figure from the product and cart pages, and any mismatch, from shipping, taxes or a missing discount, sends them to check the breakdown. Frequent reopening is a symptom of unclear totals earlier in the flow, not a user habit to design around.
Does showing tax in the total matter?
Yes. A total that grows at the final step when tax is added reads as a price increase, whatever the label says. Include tax in the headline total as soon as the address makes it calculable, and label the line honestly. Surprises at payment are the most expensive surprises in commerce.
Where should the discount field go on mobile?
Visible, as a single row near the totals, not buried inside the collapsed items section and not promoted as a headline step. Buyers with codes need to find it in seconds. Buyers without codes need it quiet enough not to send them searching the internet mid checkout.