Checkout page design examples

What is a checkout page?

A checkout page is where a customer completes a purchase. It collects contact, delivery and payment details, shows the final price and takes the order, on one page or across several steps. It is the most measured part of any store, because every extra field or surprise cost loses orders. The Baymard Institute puts the average online cart abandonment rate at about 70%.

What makes a checkout convert?

Let people buy without creating an account. Show the full cost, with shipping and tax, before the last step. Ask only for what the order needs, and use one column so the eye moves straight down. Offer wallet payments such as Apple Pay and Google Pay where you can, since they replace most of the form.

One page or several steps?

Both work. What matters is the number of fields and how clear the progress is. A single page suits short forms. Steps suit longer ones, as long as a progress indicator shows where the shopper is and each step can be edited without starting again.

Where do these checkout examples come from?

About half are checkout screens from shipped apps documented by Mobbin. The rest are checkout designs published on Layers and checkout components from the Framer marketplace. Muzli follows more than 200 design sources and lists up to 60 matching pieces here, favouring recent work.