I’ve spent most of my working life on checkout page design, staring at the last three screens of online stores. Not the homepage, not the product photography, not the ad creative. The checkout. It’s an odd corner of ecommerce to specialize in, but it’s where I’ve seen more revenue quietly slip away than anywhere else on a site.
Here’s the thing most store owners don’t realize until we sit down together and watch a few session recordings: the shopper who reaches your checkout has already done the hard part. They found you, trusted you enough to browse, picked a size, maybe compared you against two competitors, and clicked “Proceed to Checkout.” They want the thing. And then your checkout page design talks them out of it.
This article is the walkthrough I give clients when they ask me where to start. It isn’t a list of trendy tweaks. It’s the order I actually work in, with the research I lean on and the mistakes I keep seeing repeated, even on stores doing serious volume. If you’re still planning how to build an ecommerce website from scratch, it’s far cheaper to bake these principles in now than to retrofit them later.
Why Checkout Page Design Is Where the Money Leaks
Let’s get the uncomfortable number out of the way. The Baymard Institute’s cart abandonment research pulls together 50 separate studies and lands on an average documented abandonment rate of 70.22 percent. Roughly seven out of every ten carts never become orders.
Before you panic, know that a big slice of that is normal shopping behavior. The same Baymard research found that 42 percent of US online shoppers have abandoned a cart simply because they were browsing or weren’t ready to buy. People use carts as wish lists, price trackers, and gift planning tools. You won’t design your way out of that, and you shouldn’t try.
What Actually Drives Shoppers Away
What matters is the rest. When Baymard sets the “just browsing” crowd aside, the reasons people give for leaving look like this:
- 40 percent left because extra costs like shipping, tax, or fees were too high
- 20 percent said delivery was too slow
- 19 percent didn’t trust the site with their card details
- 18 percent were asked to create an account
- 17 percent found the checkout too long or complicated
- 17 percent ran into errors or a crash
- 13 percent weren’t happy with the returns policy
- 12 percent couldn’t see or calculate the total cost up front
- 10 percent had their card declined
- 9 percent didn’t find enough payment methods
Read that list twice. Almost every item on it is a design, copy, or policy decision that sits within your control, and most of them can be eased through smarter checkout page design. Baymard’s checkout usability research estimates that a typical large ecommerce site could see a 35.26 percent lift in conversion rate purely by fixing checkout usability problems they’ve documented as solvable. I’ve never seen a client capture all of that, but I’ve also never audited a checkout that had nothing to fix.
Audit Your Checkout Page Design First, Redesign Second
The most expensive mistake I see is a store that decides its checkout “looks dated” and commissions a full visual redesign. Six weeks later they have a prettier checkout with the exact same problems, because nobody figured out where people were actually leaving. In any serious ecommerce website development project, diagnosis comes before design.
Before touching a single pixel, I do three things.
Map the funnel step by step. Cart viewed, checkout started, contact info completed, shipping completed, payment submitted, order confirmed. Most analytics setups can give you this with a bit of configuration. The goal is to find the one step where the drop is sharpest. That’s your first project, not the whole page.
Watch real sessions. Session recordings are humbling. In one, a shopper taps the coupon field, leaves the tab, comes back three minutes later, and abandons. Another person fights with a phone number field that rejects spaces. Someone else scrolls up and down hunting for the shipping cost. Ten recordings of abandoned checkouts will teach you more than any best practices article, including this one.
Buy something from your own store on a phone. On mobile data, not office wifi. With your thumb, not a mouse. Use an address you haven’t saved in the browser. I ask every client to do this, and roughly half of them come back a little embarrassed. It’s the cheapest usability test there is.
Once you know where the leak is, the fixes below become a prioritized list instead of a wish list.
Good Checkout Page Design Shows the Real Price Early
Since unexpected costs top Baymard’s list by a wide margin, this is almost always where I start. And notice that the fix usually isn’t on the checkout page at all.
If the first time a shopper sees your shipping fee is on step two of checkout, you’ve already lost a chunk of them. The emotional math changes the moment a $40 order becomes $52. They feel tricked, even if your shipping rate is perfectly fair.
What works better:
- Put a shipping estimate on the product page or in the cart, ideally based on the shopper’s location
- State your free shipping threshold plainly and show progress toward it in the cart
- Display estimated tax in the cart summary instead of waiting until the final step
- Name every fee before checkout starts, with a short line explaining why it exists
Baymard’s data also shows 12 percent of shoppers leave because they couldn’t figure out the total up front. That’s a separate problem from high costs. Some people will happily pay $12 for shipping. What they won’t do is enter their entire address just to find out what shipping costs. If your platform can calculate it from a postal code alone, let people do that in the cart.
Make Guest Checkout the Default, Not the Escape Hatch
Nearly one in five shoppers in Baymard’s data abandoned because they were asked to create an account. I still see stores that hide the guest option below a large login form, as if they hope people won’t notice it.
I understand the business reasoning. Accounts mean repeat purchase data, saved addresses, and email permission. But a forced account at the moment of purchase is a toll booth in front of the register.
Stripe’s guide to checkout screen best practices recommends letting people check out as a guest by default and offering account creation after the purchase is done. That’s the pattern I push for in every checkout page design I review. Once the order is confirmed, you already have their name, email, and address. Asking “Want to save these details for next time? Just add a password” turns account creation into a one field favor instead of a barrier. Plenty of people say yes at that point, because they’ve already gotten what they came for.
Returning customers should still see a clear, smaller option to log in. Just don’t make it the main path.
Cut the Form Down in Your Checkout Page Design
This is where checkout page design gets measurable. Baymard’s research on checkout form fields shows an ideal checkout can be as short as 12 to 14 form elements, or 7 or 8 if you count only the fields people type into. The average US checkout, according to their benchmark, shows 23.48 elements by default, with 14.88 actual fields. That’s close to double what’s needed.
Which Fields to Remove or Hide
When I go through a client’s form, I ask the same question about every field: what happens to this information after the order is placed? If nobody can answer, the field goes.
The usual suspects I remove or hide:
- Separate first and last name fields. One “Full name” field works for most stores and avoids headaches with names that don’t split neatly.
- Address line 2 shown open by default. Collapse it behind a small “Add apartment, suite, etc.” link.
- Company name. Unless you sell to businesses, hide it behind the same kind of link.
- A full billing address form. Google’s web.dev guidance on payment and address forms recommends defaulting the billing address to match the delivery address. A single checkbox, checked by default, removes a whole block of fields for most buyers.
- Phone number when you don’t call anyone. If you need it for the courier, say so right beside the field. People are far more willing to share a number when they know why.
- Newsletter boxes, surveys, “how did you hear about us.” Move these to the confirmation page.
Make the Remaining Fields Faster
The other half of form reduction is speeding up what’s left. The web.dev guidance covers the technical side well: use the proper autocomplete attributes so the browser can fill details automatically, accept card numbers in one input rather than four split boxes, and allow for different address formats instead of forcing one country’s pattern on everybody. That last point matters a lot if you ship internationally. I once watched a recording of a shopper in the Philippines try five times to get past a field that demanded a US style ZIP code.
One small detail from the same guide that I’ve adopted everywhere: label your buttons with what happens next. “Continue to Payment” tells the shopper exactly where they’re going. “Submit” or “Next” tells them nothing.
Single Page or Multi Step? Choose Your Checkout Page Design on Purpose
Clients ask me this constantly, and the honest answer is that both can work. What fails is a checkout that ended up single page or multi step by accident, because that’s what the theme shipped with.
A single page checkout is great when your form is genuinely short. Everything is visible, nothing feels hidden, and shoppers can scan the whole commitment at once. It starts to fall apart when the page grows long and people lose track of where they are, especially on a phone.
A multi step checkout breaks the work into smaller chunks, which can feel easier, but every new screen is another loading moment and another chance for someone to wander off.
The middle ground I reach for most often is the accordion layout, where sections open and close on one page. Crazy Egg’s guide to reducing cart abandonment makes the same suggestion for stores that want one page but need to collect more information. Whichever way you go, show progress clearly. A simple three part indicator like Information, Shipping, Payment is enough. People relax when they know how far the finish line is.
If you can’t decide, test it. That’s what testing is for.
Use Checkout Page Design to Earn Trust at the Card Field
Nineteen percent of shoppers in Baymard’s data walked away because they didn’t trust the site with their card. That number always surprises newer store owners who assume an SSL padlock in the browser bar settles the matter. It doesn’t. Most shoppers aren’t checking for a padlock. They’re reacting to how the page feels.
Trust Signals That Actually Work
Trust on a checkout page comes from a handful of things working together:
The page looks like it belongs to the same store. A checkout that suddenly switches to a different font, color, and layout makes people wonder if they’ve been redirected somewhere strange. Carry the same visual language from your broader ecommerce website design all the way through to the confirmation screen.
Security cues sit next to the payment fields. Stripe’s guidance suggests placing reassurance signals close to the main call to action or in the page footer. I prefer them right beside the card form, because that’s where the anxiety peaks. A short line like “Your card details are encrypted and never stored on our servers” does more than a row of generic badges.
Help is visible but quiet. A phone number, a chat link, or a support email in a small footer tells people a real business is on the other end. Just make sure a chat widget never pops open over the form fields. I’ve watched that exact interruption kill orders.
Your returns policy is one click away. Thirteen percent of Baymard’s respondents left over unsatisfying return terms. You don’t need to paste the whole policy into the checkout, but a short summary like “Free returns within 30 days” with a link to the full details answers the question before it becomes a reason to leave.
Clean, plain checkout page design is a trust signal in itself. Stripe makes the point that straightforward copy and an uncluttered layout tell shoppers the business is competent. In my experience, cluttered checkouts read as amateurish, and amateurish reads as risky.
Offer the Payment Methods Your Customers Actually Use
Nine percent of abandonments come from not enough payment options. That figure hides a lot of variation, because “enough” depends completely on who your customers are.
For most stores I work with, the baseline is major credit and debit cards plus at least one digital wallet like Apple Pay, Google Pay, or PayPal. Wallets do double duty: they’re a payment option and a shortcut that skips most of the form, since the address and card are already saved. On mobile especially, a wallet button near the top of the checkout can shorten the whole process to a couple of taps.
Beyond that, look at your market. Buy now, pay later options matter for higher priced items. Local payment methods matter a great deal outside the US. A store selling into Southeast Asia that only accepts cards is leaving money on the table, because a lot of shoppers there lean on ewallets and bank transfers. Which of these you can offer often comes down to your payment gateway integration, so it’s worth choosing a gateway with your target markets in mind.
Then there’s the 10 percent who leave after a declined card. You can’t stop every decline, but you can stop making them worse. When a card fails, keep everything the shopper typed, explain the problem in plain language, and offer a different payment method right there. The worst version I’ve seen wiped the entire form and displayed an error code. Nobody types their address in twice for a store that just insulted them.
Handle Errors Like a Helpful Shop Assistant
Seventeen percent of shoppers left because the site threw errors or crashed. Some of that is genuine technical failure, which belongs on your developer’s list. But a lot of what shoppers call “errors” is really bad form validation.
The principles I follow are simple:
- Validate as people go, not only at the end. Flag a problem when someone leaves a field, not after they’ve hit the final button and scrolled back up to find a red message.
- Put the error message beside the field. Stripe’s guidance says the same: flag the problem right next to or inside the field, in plain words that explain how to fix it.
- Say what’s wrong and what to do. “Please enter a valid email” is weak. “This email looks like it’s missing an @ sign” is useful.
- Be forgiving about formats. Accept phone numbers with spaces, brackets, or country codes. Accept card numbers with or without spaces. Strip the formatting in your code instead of making the shopper do it.
- Never clear a field because of an error elsewhere. This one sounds obvious and I still find it on live stores every month.
Good error handling is invisible when it works. Shoppers never think about it. They just finish.
Mobile Checkout Page Design: Build for the Thumb First
Most of the checkouts I audit now get the majority of their traffic from phones, and mobile is consistently where weak checkout page design shows up in the numbers. A checkout that works fine on a laptop can be miserable on a five inch screen.
The basics that make the biggest difference:
- One column. Side by side fields on mobile are a recipe for mistyped data.
- Big tap targets. Buttons and checkboxes should be easy to hit without zooming.
- The right keyboard for every field. A number pad for card numbers and postal codes, an email keyboard for email, a phone keypad for phone numbers. The web.dev guide explains how to set this up with input types and inputmode attributes. It’s a small change your developer can make in an afternoon.
- A sticky order summary or total. Shoppers on phones like to check the total without scrolling back to the top.
- No surprises from the keyboard. Make sure the open keyboard doesn’t cover the field being typed in or the error message attached to it.
If you only fix one thing on mobile, put the wallet buttons near the top. For a lot of shoppers, that turns the whole checkout into one confirmation.
Strip Out Everything That Isn’t Helping
A checkout page has exactly one job, and that’s finishing the order. Anything that pulls attention away from that job deserves a hard look. Honestly, the best checkout page design is often more about subtraction than addition.
Navigation. Many stores keep their full header menu on the checkout. That’s an open invitation to leave. A pared back header with just your logo and maybe a support link is enough.
The coupon field. This one deserves its own warning. A large, empty “Enter promo code” box tells every shopper that a discount exists somewhere, and some of them will leave to go find it. Some never come back. Stripe suggests keeping a place for codes without letting it dominate the screen. I usually collapse it behind a small text link like “Have a promo code?” so people who have one can use it, and people who don’t aren’t nudged to go hunting.
Upsells that interrupt. A tasteful “frequently bought together” suggestion in the cart is fine. A popup offering accessories in the middle of the payment step is not.
Prechecked boxes. Automatic subscription to marketing emails, protection plans added by default, donations already selected. These can backfire badly. Shoppers who notice feel manipulated, and in some markets they also create legal exposure.
Set Delivery Expectations Clearly
Twenty percent of Baymard’s respondents left because delivery was too slow. Sometimes delivery genuinely is slow, and that’s an operations problem. Often, though, the trouble is that shoppers can’t tell how long it’ll take, so they assume the worst.
“Standard Shipping: 3 to 7 business days” makes people do mental math. “Arrives Tuesday, October 27 to Thursday, October 29” answers the question instantly. If your platform can show actual estimated dates for each shipping option, use them. If you offer a faster option, list its date beside the price so people can weigh the trade off themselves.
Clear dates also cut down on “where’s my order” emails later, which your support team will thank you for.
Measure and Test Every Checkout Page Design Change
None of the advice above is universal law. It’s a set of strong starting points backed by large scale research and a lot of hours spent watching real shoppers. Your customers might behave differently, and the only way to find out is to measure.
The numbers I track for every checkout project:
- Checkout completion rate. Of the people who start checkout, how many finish?
- Step by step drop off. Which step loses the most people?
- Mobile versus desktop completion. A big gap points straight at mobile usability.
- Time to complete. Faster isn’t always better, but a sudden jump usually signals a new problem.
- Payment failure rate. Separate declines from technical errors if you can.
Testing Without Fooling Yourself
When you change something meaningful, run it as an A/B test when your traffic allows it. If you don’t have enough volume for statistically sound tests, make one change at a time and watch the numbers for a few weeks before moving to the next. Changing six things at once and seeing conversion go up tells you nothing about which change mattered, or whether one of them actually hurt.
If you’re on Shopify, know that your customization options inside checkout depend on your plan. Convert’s guide to Shopify checkout optimization notes that only Shopify Plus stores can customize the in checkout experience directly. Even without Plus, though, you control the cart page, shipping settings, payment options, and abandonment emails, which together cover a lot of what’s in this article. Stores that need full control over every checkout screen sometimes move to a headless commerce setup, where the front end is built independently of the platform.
Recovery Emails Are a Safety Net, Not a Strategy
I’ll mention abandonment recovery briefly, because people always ask. Yes, set up abandoned checkout emails. Send the first one fairly soon after someone leaves, include what they left behind, and link straight back to a checkout with their details saved.
But treat recovery as the net under the trapeze, not the act itself. Every abandoned checkout you recover by email is one that a better checkout page design might have closed the first time, without a discount and without the shopper having to come back. I’d rather a client spend a month fixing the form than a month perfecting a five email recovery sequence.
Where to Start on Monday
If this all feels like a lot, here’s the short version I give clients who want to begin right away:
- Watch ten recordings of abandoned checkouts and buy something from your own store on your phone
- Show shipping and total cost in the cart, before checkout starts
- Make guest checkout the default path
- Remove every form field that nobody uses after the order ships
- Add at least one digital wallet and put it near the top on mobile
- Fix inline error messages so they’re specific, friendly, and never wipe the form
- Collapse the coupon field and strip the navigation
None of these require a full rebuild. Most can be done in a week or two by one developer. And in my experience, the stores that do just these seven things usually find their abandonment problem shrinks to something much more manageable.
Your checkout isn’t a formality at the end of the shopping experience. It’s the moment of truth. Every field, every fee, every second of doubt is a chance for someone who already wants to buy from you to change their mind. Give your checkout page design the same care you gave your homepage, and it’ll pay you back more than any other page on your site.
Frequently Asked Questions
What is a good cart abandonment rate?
There’s no single “good” number because abandonment varies widely by industry, price point, and device. As a reference, the Baymard Institute’s abandonment statistics put the documented average at about 70 percent. The more useful benchmark is your own rate over time. If your checkout changes push it steadily downward, you’re on the right track.
How many form fields should a good checkout page design have?
Baymard’s form field research suggests an ideal checkout can work with around 7 or 8 actual input fields, while the average US checkout shows nearly 15. Aim to remove or hide anything you don’t use after the order is placed.
Is a one page checkout better than a multi step checkout?
Neither wins every time. One page works well for short forms, while multi step or accordion layouts suit longer ones. Crazy Egg’s guide recommends choosing the format deliberately, and testing is the only reliable way to know what works for your shoppers.
Should I force customers to create an account?
No. Account creation is one of the most common reasons people abandon. Stripe’s checkout screen best practices recommend guest checkout as the default, with an offer to save details after the purchase is complete.
How can I make my checkout faster on mobile?
Use a single column layout, large buttons, digital wallets near the top, and the correct keyboard type for every field. Google’s payment and address form best practices cover the technical setup, including autocomplete attributes that let browsers fill details automatically.
Can I customize the checkout on Shopify?
It depends on your plan. According to Convert’s Shopify checkout guide, only Shopify Plus stores can customize the in checkout experience directly, though every store can still optimize the cart page, shipping settings, payment methods, and abandonment emails.
References
- Baymard Institute. 50 Cart Abandonment Rate Statistics 2026
- Baymard Institute. Checkout Flow Average Form Fields
- Baymard Institute. Ecommerce Checkout Usability Research
- Stripe. Checkout Screen Best Practices: How to Design for Conversion, Clarity, and Trust
- Google web.dev. Payment and Address Form Best Practices
- Crazy Egg. 11 Ways to Reduce Cart Abandonment Rates at Checkout
- Convert. How to Optimize Your Shopify Checkout and Recover More Sales