Shipping, tax and fees are resolved before the cart is shown, not after the card details are entered.
The single largest cause of abandonment in the client's funnel was not price. It was a price that changed — a shipping cost that appeared on step three, after the visitor had already decided.
Estimate early and commit: the cart asks for a postcode before it shows a total, so the number on the first screen is the number on the last one. Where an estimate genuinely cannot be made, it says so instead of showing a low figure.
Reference landscape
- Amazon — Right about totals, wrong about everything else on the page
- Shopify default — Right about steps, defers cost to the end
“Ask for the postcode before showing a total.”
One extra field on the cart removes the entire class of late cost surprises. It feels like friction and tests like the opposite, because the friction it removes — recalculating a decision you already made — is much more expensive than typing five characters.
Stage by stage
01
Gap analysis
Funnel data showed a 34% drop at the shipping step and almost none at payment. The problem was disclosure, not trust.
02
Wireframes
Seven screens, with the total pinned and unchanged from the cart onward.
What was difficult
Some regions genuinely cannot be quoted until an address is complete.
Those show a named range with the upper bound emphasised, so the final number can only ever be a pleasant surprise.
Exactly what you get
- Figma source
- 7 screens
- Light + dark
- React + Tailwind
- Version
- 1.0.0
- Formats
- Figma, React, Tailwind
- Screens
- 7
- Components
- 19
- Dark mode
- Yes
- Prototype
- Yes
- Accessibility
- AA
Dependencies
- Inter — SIL Open Font Licence — included
- Lucide — ISC licence
Commercial fonts are never redistributed — they are named and linked, with a free equivalent substituted in the delivered files.
Abandonment moved from step three to step one, where it is far cheaper.