01 The Leak at the Bottom of the Funnel
This store was good at everything except the last hundred feet.
A women's apparel Shopify store with healthy traffic, strong product photography, and a loyal Instagram audience came to us with a frustrating pattern: people loved the products enough to add them to the cart, then vanished. Cart abandonment was running at 79%. For every 100 shoppers who added something to their cart, 79 walked away before paying.
Some abandonment is normal and always will be. Baymard Institute, which has aggregated cart abandonment studies for over a decade, puts the industry average at roughly 70%. A lot of that is window shopping and price checking that no design can fix. But the gap between 70% and 79% is not window shopping. That gap is friction, and friction is a design problem.
The math made the stakes clear. At the store's traffic and average order value of around $85, each point of abandonment was worth four figures a month. Baymard's own estimate is that large ecommerce sites can recover billions collectively through better checkout design alone, and their research finds the average checkout can improve conversion meaningfully through UX changes with no new features at all. This case study covers how we found the store's specific leaks, what we redesigned, and what happened to the numbers.
The core checkout insight: a shopper at checkout has already decided to buy. Every field, surprise cost, forced signup, and moment of confusion after that point isn't filtering out bad traffic, it's talking a committed buyer back out of the purchase. Checkout design is the art of not interrupting a yes.
02 What the Checkout Audit Found
We audited the full path from add-to-cart to order confirmation: funnel analytics, session recordings of abandoned checkouts, a field-by-field review of the checkout form, and test purchases on real phones. Baymard's research gives a reliable map of why people abandon, so we checked the store against every major reason. It failed most of them:
COST SURPRISES
Shipping cost hidden until the final checkout step. Baymard finds unexpected extra costs are the single biggest abandonment reason, cited by roughly half of abandoners
Free shipping threshold ($100) existed but was never shown in the cart, so shoppers $10 short never knew
No order total visible in the cart drawer, only a subtotal with taxes and shipping as a surprise later
FRICTION & FORM PROBLEMS
Account creation pushed before guest checkout, the guest option styled as a small text link. Forced accounts are a top-three abandonment reason in Baymard's data
Discount code field placed prominently at the top of checkout, sending buyers off-site to hunt for coupons mid-purchase
Express payment buttons (Shop Pay, Apple Pay) disabled in theme settings, every buyer typed everything manually
Address autocomplete off, error messages appearing only after submitting the whole form
CART UX PROBLEMS
Add-to-cart gave no feedback beyond a tiny cart counter change, session recordings showed users adding the same item twice
Cart page had no product images at small sizes, just text rows, making it hard to confirm size/color choices
Changing a size in the cart required removing the item and starting over from the product page
A promo banner in the cart linked back to the collections page, pulling committed buyers out of the funnel
TRUST GAPS
No return policy visible anywhere in the cart or checkout, a critical gap for apparel where fit anxiety drives hesitation
No payment method icons before the payment step, Baymard finds a meaningful share of users abandon because they don't trust a site with card details
No delivery estimate until after purchase, "when will it arrive" unanswered at the decision moment
03 Our Checkout Design Approach
Checkout redesign is the most measurable design work in ecommerce, and also the most dangerous to guess at. Every change sits directly on the revenue path, so we treat it differently from any other part of a store:
Diagnosis first
Shopify's checkout funnel report tells you which step loses people. Session recordings tell you why. We watched 60+ abandoned checkout recordings and tagged every stall, backtrack, and rage tap before proposing a single change. The two datasets together turn "checkout is leaking" into a ranked list of specific fixable problems.
Subtraction wins
Most checkout problems are things that shouldn't be there: extra fields, forced choices, exit links, surprises. Baymard's research found the average checkout flow contains far more form fields than a purchase actually requires. Our first pass is purely subtractive, and it usually delivers more lift than anything we add later.
Attribution
Cart changes shipped first, checkout changes second, trust elements third, each with two weeks of data in between. When everything ships at once you get one number and no knowledge. Shipping in layers meant we knew the cart rebuild alone was worth roughly a third of the total lift, which shapes what we recommend to every store after this one.
04 Mapping the Abandonment Funnel
Here's the pre-redesign funnel from Shopify's checkout analytics. Out of every 100 sessions that added an item to the cart:
100
Added to cart
The buying intent already exists
↓ 34 leave without opening the cart or after seeing it
Faced the account-or-guest screen first
↓ 21 leave at contact and shipping info
First time they saw the shipping cost
↓ 16 leave when the full cost appears
Manual card entry, no express options
↓ 8 leave during payment entry
79% of carts abandoned
Two things stand out in this funnel. The biggest single drop happens before checkout even starts, in the cart itself. And the second biggest cluster happens exactly where costs and forced decisions appear. Neither of these is a traffic quality problem. Both are design problems with known solutions.
Why this matters: most store owners assume abandonment happens at the payment step, so they add trust badges near the card field and stop there. In this funnel, 71 of the 79 lost carts were gone before payment entry even began. Fixing checkout means fixing everything between intent and payment, not decorating the payment form.
05 Redesigning the Cart
The cart is where a shopper converts a maybe into a decision, and this cart was actively working against that. We replaced the bare cart page with a slide-in drawer designed around one job: confirm the choice and move forward.
BEFORE: OLD CART PAGE
Feedback on add
Cart counter incremented silently, users double-added items
Cost visibility
Subtotal only, no shipping estimate, no free shipping progress
Editing
Size changes required deleting and re-adding from the product page
Exits
Promo banner linked out of the funnel to collections
Result: 34% of carts abandoned before checkout
AFTER: REDESIGNED CART DRAWER
Feedback on add
Drawer slides in showing the item, image, size, and color, no ambiguity
Cost visibility
Shipping estimate shown, plus a progress bar: "You're $12 from free shipping"
Editing
Size and quantity editable inline inside the drawer
Exits
One primary action: checkout. Continue-shopping closes the drawer instead of navigating away
Result: cart-to-checkout rate up from 66% to 81%
The free shipping progress bar deserves its own mention. The store already offered free shipping over $100 but never told anyone at the moment it mattered. After the bar shipped, average order value rose 9% as shoppers added a second item to cross the threshold. One line of design surfaced an incentive the store was already paying for.
06 Redesigning Checkout
Shopify constrains how much of checkout you can restructure, which is fine, because most of the damage was in the settings and the sequence rather than the platform. The changes, in order of measured impact:
| Change | What We Did | Why |
|---|---|---|
| Express payments on | Enabled Shop Pay, Apple Pay, and Google Pay at the top of checkout | A returning Shop Pay user checks out in one tap instead of typing 15+ fields. Within six weeks, 58% of orders used an express option. Shopify's own published data shows Shop Pay checkouts convert meaningfully better than standard checkout |
| Guest first | Guest checkout made the default path, account creation offered after purchase instead of before | Forced account creation is one of Baymard's top abandonment reasons. Post-purchase signup converted better anyway: buyers happily save details after the order exists |
| Costs up front | Shipping estimate in the cart drawer, delivery date range shown at the shipping step, order total always visible | Unexpected costs are the number one abandonment driver in Baymard's research. Nobody should learn the real price at step three |
| Discount field demoted | Collapsed the coupon field behind a small "Have a code?" link | A big empty coupon box tells full-price buyers they're overpaying and sends them to Google mid-checkout. Session recordings showed exactly this pattern. Buyers with codes still find the link |
| Form friction cut | Address autocomplete enabled, inline field validation, phone number made optional | Every field is a chance to leave. Inline validation fixes errors at the field instead of punishing users after submitting the form |
07 Designing for Doubt
Apparel has a specific psychology at checkout: fit anxiety. "What if it doesn't fit" is the silent objection behind a large share of apparel abandonment, and no amount of button styling fixes it. The design has to answer the doubt at the exact moment it occurs.
We placed three answers directly into the purchase path:
Fit anxiety
One line under the checkout button: "Free returns within 30 days, no questions asked", with a link to the short policy. The store already had this policy. It lived in the footer where no hesitating buyer ever saw it. Moving an existing promise to the decision point cost nothing and directly addresses the top apparel objection.
Certainty
"Standard shipping, 5 to 7 business days" became "Arrives Tue, Mar 12 – Thu, Mar 14". Same logistics, different design. A date is an answer; a speed is a math problem handed to the customer. Session recordings had shown users pausing at the shipping step, some opening a calendar app. The date range removed that pause.
Trust
Payment method icons visible from the cart onward, a lock icon with "Secure checkout" at the payment step, and the store's review rating shown in the checkout header. Baymard consistently finds that a share of users abandon simply because they didn't feel safe entering card details. The signals that create that safety are pure design.
The trust rule: answer objections where they happen, not where it's convenient to put the answer. A return policy in the footer answers nobody. The same sentence next to the checkout button answers everybody.
08 Results: 15 Points of Abandonment Recovered
The changes shipped in three layers over four weeks: cart drawer first, checkout settings and form second, trust elements third. Six weeks after the first layer went live, with traffic within normal range and no new campaigns:
| Metric | Before | After (6 Weeks) | Change |
|---|---|---|---|
| Cart abandonment rate | 79% | 64% | ↓15pts |
| Cart-to-checkout rate | 66% | 81% | ↑15pts |
| Checkout completion rate | 32% | 44% | ↑12pts |
| Orders via express payment | 0% | 58% | New |
| Average order value | $85 | $93 | ↑9% |
| Monthly revenue | Baseline | +41% | Same traffic |
Metrics from Shopify Analytics, comparing the 4 weeks before the first change against weeks 3–6 after the last change. Sessions were within 4% across both periods. No new paid campaigns, discounts, or product launches ran in the measurement window.
Context: 64% abandonment is still not perfect, and it never will be. Baymard's ~70% average includes stores of every quality, and the best performers sit in the high 50s to low 60s. The honest read is that this store went from clearly below average to clearly above it, and the remaining abandonment is mostly genuine window shopping that no checkout design converts.
09 Why It Worked
Three decisions carried most of the result, and they transfer to almost any Shopify store.
The funnel data aimed the work at the cart, not the payment form Biggest lever
Instinct says abandonment is a payment page problem. The funnel showed the single biggest drop happened in the cart, before checkout even began. The cart drawer rebuild alone recovered roughly a third of the total lift. Without the funnel mapping, that work would never have been prioritized, because a cart doesn't look like a checkout problem.
Every surprise was moved earlier No surprises
Shipping cost, delivery date, order total, return policy: all of it moved from late in checkout (or the footer) to the cart, where the decision actually gets made. Nothing about the store's offer changed. The same costs and policies, revealed earlier, stopped functioning as exit triggers. Most "abandonment problems" are really sequencing problems.
Express payments did heavy lifting we didn't have to design One tap
More than half of orders now skip the form entirely through Shop Pay, Apple Pay, or Google Pay. These were sitting disabled in the theme settings the whole time. The highest-ROI change of the entire project was a checkbox. Part of good design work is knowing which problems are already solved by the platform and simply switched off.
10 Key Takeaways for Store Owners
Shopify shows you exactly which step loses people, for free, in Analytics. Most owners have never opened it. Ten minutes with that report replaces months of guessing about why sales feel low.
Unexpected costs are the most cited abandonment reason in a decade of Baymard research. Shipping estimates and totals belong in the cart. If your prices survive being shown early, they were never the problem. If they don't, checkout design was never the problem either.
These two settings cost nothing and address two of the top abandonment reasons on record. Ask for account creation after the purchase, when the customer has a reason to say yes.
Especially in apparel, footwear, and anything with fit or expectation risk. A generous policy hidden in the footer converts nobody. The sentence is already written, it just needs to move to where the doubt happens.
Cart first, checkout second, trust third, with data in between. One big relaunch gives you one number and no understanding. Layered shipping turns your own store into the evidence for the next decision.
How Many Carts Is Your Checkout Losing?
We'll map your abandonment funnel, watch where real shoppers give up, and show you the exact fixes ranked by revenue impact.
Reading Time: 9 minutes · Category: Ecommerce Design · Checkout UX · Cart Abandonment