GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

Checkout Page Design — 9 Cart Patterns, No Library

· Godrich · 9 items · 24 min read

InputsVanilla JSSCSSClickCheckoutForms

Checkout page design covers every screen between "I want this" and the pay button.

Quantity change that tints the line total and the grand total together01 cart-qty-subtotal-sync Line item that slides down into the saved-for-later group02 cart-move-to-saved Discount line that wedges into the order summary03 cart-coupon-discount-line Quantity that springs back when it passes the stock limit04 cart-stock-limit-clamp Payment method card that opens only the option you picked05 pay-method-card-expand Shipping fields that fold away and fill themselves in06 ship-same-address-collapse Arrival chip whose date slides over when you change the shipping speed07 ship-speed-eta-swap Agree-to-all switch that lights the items below in turn08 terms-agree-all-cascade Bottom pay bar that steps aside once the summary is on screen09 checkout-sticky-total-bar

Auto-plays · click a tile to jump to its section · all nine in one zip

The nine checkout ui design steps follow the path of a checkout, not a difficulty ladder. That path starts in the cart, where the quantity and subtotal tint together (01), a line slides down into the saved-for-later group (02), a coupon wedges into the summary (03), and a stock limit bounces the quantity back (04). It continues through payment, where the chosen method card opens (05), the shipping fields fold away when they match the orderer (06), the arrival date rolls over with each shipping speed (07), and the consent items light up in turn (08), before the bottom pay bar finally steps aside for the summary (09). All nine share one set of colors, spacing, and easing values, so a handful of them on one checkout screen still keeps a single tone. When the order form itself has to split into steps, the multi-step form wizard owns the branching and the way back, and an address picked on a map belongs to the map location picker.

01Quantity change that tints the line total and the grand total together

What this checkout page design ui shows

Change the quantity, and the line subtotal and the grand total recalculate in the same tick, while only those two number cells tint with background-color and cool back down through the transition. The numbers use font-variant-numeric: tabular-nums so a wider digit never shakes the cell, and the render logged a cumulative changed area of 2.699%.

Quantity change that tints the line total and the grand total together
Open in a new tab

01 · Quantity change that tints the line total and the grand total together — Measured area 2.699% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

background-colortransitiontabular-nums

Where to look in the code

Use it on cart line items or booking screens where the headcount changes.

// Number cell — tabular-nums + min-width so a wider digit never shakes the cell
.qs__sum {
  min-width: 58px;
  padding: $sp-1;
  border-radius: $r-xs;
  text-align: right;
  font-variant-numeric: tabular-nums;
  // Real click path: paint once (transition: none), then this transition cools it
  background-color: rgba($stage-yellow, 0);
  transition: background-color $dur-enter $ease-out;
  &.is-hot {
    background-color: rgba($stage-yellow, .62);
    transition: none;
  }
}

02Line item that slides down into the saved-for-later group

What happens on screen

Saving for later collapses the row's height while the same item settles into the saved group below, and both list counts change together. One row folds from grid-template-rows: 1fr to 0fr at the same moment its twin opens from 0fr to 1fr, so the card's overall height never moves, and the render logged 11.938% changed area at intensity 104.9.

Line item that slides down into the saved-for-later group
Open in a new tab

02 · Line item that slides down into the saved-for-later group — Measured area 11.938% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

grid-template-rows0frtranslateY

How to read the code

Use it for save-for-later lists or moving an item to a wishlist.

// One row = a cell that trades its height. The real click path folds via transition
.mv__row {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows $dur-base $easing;
}
.mv__row.is-out { grid-template-rows: 0fr; }
// The folding cell carries no padding — vertical padding survives 0fr.
// This inner wrapper reaches height 0 and clips the padded real row inside
.mv__box {
  min-height: 0;
  overflow: hidden;
}

03Discount line that wedges into the order summary

What moves

Apply a coupon code, and a discount row unfolds from zero height between the item total and the grand total, pushing the rows below it down. The result sentence is announced from an aria-live region, the grand total recalculates in the same pass, and the render logged 15.799% changed area at intensity 110.8.

Discount line that wedges into the order summary
Open in a new tab

03 · Discount line that wedges into the order summary — Measured area 15.799% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

grid-template-rowsaria-liveopacity

What to change

Use it on any order summary with a coupon or promo code field.

.cp__disc {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows $dur-base $easing;
}
.cp.is-on .cp__disc { grid-template-rows: 1fr; }

function cpApply() {
  cp.classList.remove('is-demo');
  var code = cpCode.value.trim().toUpperCase();
  var on = code === cpValidCode;
  cp.classList.toggle('is-on', on);
  cpTotalValue.textContent = cpMoney(cpAmount(cpItems.textContent) - (on ? cpAmount(cpOff.textContent) : 0));
  cpMsg.textContent = on ? cpOkText : (code ? cpWrongText : cpEmptyText);
}

04Quantity that springs back when it passes the stock limit

What you see

Type more than the remaining stock, and the number bounces back to the maximum once while a warning strip drops over the row to say how many are left. The bounce is a translateY on a cubic-bezier overshoot, the strip carries role="alert" so screen readers hear the same message, and a reserved 24px slot above the row keeps the strip from covering the product name.

Quantity that springs back when it passes the stock limit
Open in a new tab

04 · Quantity that springs back when it passes the stock limit — Measured area 5.05% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateYrole="alert"cubic-bezier

Where to look in the code

The render logged 5.05% changed area at intensity 123.9, and the pattern fits limited-stock products or per-customer purchase caps.

// Bounce — it passes through its own seat once on the way back (overshoot easing)
@keyframes cs-bounce {
  0%, 25% { transform: translateY(0) scale(1); }
  29% { transform: translateY(-10px) scale(1.16); }
  40%, 100% { transform: translateY(0) scale(1); }
}

05Payment method card that opens only for the option you picked

What happens on screen

Pick one of the three payment method cards, and only that card's detail panel unfolds from zero height while the previously open one closes over the same duration. The radio's :checked does the opening and closing, aria-expanded tracks keyboard arrow moves in real time, and the panel expands inside the document flow so it never pokes out at phone width, logging 17.7% changed area over 8 of 23 sampled frames.

Payment method card that opens only the option you picked
Open in a new tab

05 · Payment method card that opens only the option you picked — Measured area 17.7% · moving frames 8/23Original by GODRICH · SCSS and React ship in the zip · See the password

grid-template-rowsaria-expanded:checked

How to read the code

Use it wherever a checkout chooses between card, wallet, and bank transfer.

// Detail panel — closed 0fr, open 1fr. No pixel guessing, so longer text still fits
.pm__fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows $duration $easing;
}
.pm__item:has(.pm__radio:checked) .pm__fold { grid-template-rows: 1fr; }
.pm__detail {
  min-height: 0;
  overflow: hidden;
}

06Shipping fields that fold away and fill themselves in

What moves

Turn on "same as orderer" and the shipping fieldset folds into a single summary line that already carries the orderer's name and address. JavaScript copies the values, the folded fields leave the focus order through aria-hidden="true" and inert so Tab never wanders through them, and the render logged 22.416% changed area at intensity 55.7.

Shipping fields that fold away and fill themselves in
Open in a new tab

06 · Shipping fields that fold away and fill themselves in — Measured area 22.444% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

grid-template-rowsaria-hiddeninert

What to change

Use it on order forms that collect orderer and shipping details separately, or on billing address forms.

function syncShipping() {
  sa.classList.remove('is-demo');                 // a human touch ends the preview loop
  var folded = same.checked;
  fold.setAttribute('aria-hidden', folded ? 'true' : 'false');
  fold.toggleAttribute('inert', folded);          // folded cells are unreachable by Tab
  if (folded) {
    document.getElementById('saName').value = whoName.textContent.trim();
    document.getElementById('saAddr').value = whoAddr.textContent.trim();
    sum.textContent = whoName.textContent.trim() + ' · ' + whoAddr.textContent.trim();
  }
}

07Arrival chip whose date rolls over when you change the shipping speed

What you see

Choose standard, express, or dawn delivery, and the date inside the arrival chip is pushed up and out while the new date rises into its place. The chip is an odometer — a strip pushed by translateY inside an overflow: hidden window, so no middle frame shows two overlapping dates — while an aria-live cell reads the new arrival date and fee as one sentence and the fee follows the picked speed, logging 9.291% changed area over 12 of 23 frames.

Arrival chip whose date slides over when you change the shipping speed
Open in a new tab

07 · Arrival chip whose date slides over when you change the shipping speed — Measured area 9.291% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

overflowtranslateYaria-live

Where to look in the code

Use it for per-speed arrival estimates or pickup time selection.

// The window shows one row only — the old row is pushed up, the next rises from below
.sp__win {
  height: 16px;
  overflow: hidden;
}
.sp__roll {
  display: block;
  transform: translateY(calc(var(--i, 0) * -33.3333%));
  transition: transform $dur-base $easing;
}

08Agree-to-all switch that lights the items below in turn

What happens on screen

Turning on "agree to all" draws the four check marks below it, one after another, and switching any single item off quietly clears only the master switch. Each check is an SVG polyline drawn by stroke-dashoffset: 1 → 0, the cascade is one line of transition-delay, and the in-between state of "some are on" lives on the switch's indeterminate property, with 1.8% changed area at intensity 122.3 over 19 of 23 frames.

Agree-to-all switch that lights the items below in turn
Open in a new tab

08 · Agree-to-all switch that lights the items below in turn — Measured area 1.8% · moving frames 19/23Original by GODRICH · SCSS and React ship in the zip · See the password

stroke-dashoffsetanimation-delayindeterminate

How to read the code

Use it for terms blocks before payment or consent groups at signup.

<label class="ta__mark" for="ta-1" aria-hidden="true">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <polyline class="ta__tick" points="5 12.5 10 17 19 7" pathLength="1"
      fill="none" stroke="currentColor" stroke-width="3"
      stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
</label>

.ta__tick {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset $dur-base $easing;
  transition-delay: calc(var(--i, 0) * 60ms);
}
.ta__box:checked ~ .ta__mark .ta__tick { stroke-dashoffset: 0; }

09Bottom pay bar that steps aside once the summary is on screen

What moves

The total-and-pay bar pinned to the bottom drops away the moment the order summary enters the viewport, and climbs back when the summary leaves. An IntersectionObserver decides visibility, the bar sits outside the scroll box with position: absolute so it still stands at scroll zero, and the summary card fills the seat the bar left so the poster is never an empty screen, logging 25.205% changed area at intensity 85.2 over 16 of 23 frames.

Bottom pay bar that steps aside once the summary is on screen
Open in a new tab

09 · Bottom pay bar that steps aside once the summary is on screen — Measured area 25.205% · moving frames 16/23Original by GODRICH · SCSS and React ship in the zip · See the password

IntersectionObservertranslateYposition

What to change

Use it for sticky pay buttons on mobile checkout or total bars on long order forms.

if (window.IntersectionObserver) {
  var watcher = new IntersectionObserver(function (entries) {
    for (var i = 0; i < entries.length; i++) {
      co.classList.toggle('is-down', entries[i].isIntersecting);
    }
  }, { root: view, threshold: 0.45 });
  watcher.observe(summary);
}

Where it breaks — the trap

The first thing to break was 0fr itself. Four items (02, 03, 05, 06) fold cells with grid-template-rows: 0fr ↔ 1fr, and the first attempt put vertical padding on the folding cell itself, which left an 8px sliver behind instead of closing it. 0fr zeroes the cell's content height but leaves its padding alone. The fix splits the structure in two: the outer cell carries only grid-template-rows and min-height: 0, while the padding lives on the inner row. The outer cell reaches height 0 and clips the padded row inside, so the cell closes completely and quietly.

The second problem was posters that showed the disappearing side. A poster picks the frame with the largest change from the one before it, and an exit usually changes more pixels than an entrance, so 04's warning strip leaving kept winning. Spreading the retreat over four slow frames while keeping the arrival a one-frame cut let the standing strip win again, and every loop returns within 89% of its two seconds. Items 02 and 03 unwind their return slowly across 70–86% for the same reason, and 09 was redesigned outright so the summary card fills the seat the bar vacates — otherwise the poster is an empty screen with no bar.

The third was overlapping numbers turning into translucent ghosts. Item 01 previews a 2→3 quantity change with two numbers stacked in one cell, and the first crossfade left both numbers half-readable on the poster. Every number and label swap now goes through a steps(1, end) cut, and because a cut alone leaves too few moving frames for the measurement, each one carries a small translateY lift alongside. Item 05 opens with a cut and lets the unfolded text rise once to fill frames.

The fourth only appeared after the preview loop was removed. Item 03 overlays the code text SAVE3000 on the input for the preview, and hiding it with display: none reshapes the input in the static path. The overlay keeps its seat with color: transparent, and item 04's "typed value" does the same. Item 06 dodged a different trap in advance: raising the summary line vertically would have the overflow: hidden cell clip it half-visible on the poster, so it slides in horizontally instead.

The last traps lived outside the stage rather than on it. Item 04's warning strip is absolutely positioned over the product row, and the first version covered the row so the poster lost the product name; reserving a 24px slot above the row and moving the background onto the row fixed it. Item 09's bar is also absolutely positioned over the scroll box — it has to stand at scroll zero, which rules out sticky, because a sticky bar never engages in the preview's zero-scroll state and appears in none of the 24 frames. Letting the shopper choose the arrival date by hand is the point where the month-view calendar grid joins the page. The sources of all nine ship inside the zip with the exact values quoted here, and the password that opens it is be3rd37n.

Accessibility (reduced-motion)

What each of the nine turns off under prefers-reduced-motion: reduce differs item by item, but the underlying principle is shared: self-running motion stops, and the result of the shopper's action — numbers, states, sentences — stays. Item 01 stops the digit swap and tint but shows the current value; 02 stops the fold and shows both list counts; 03 stops with the discount row open; 04 stops the bounce and keeps the strip, the red outline, and the clamped maximum; 05 shows one card picked and expanded; 06 shows the folded shipping block and the one-line summary; 07 stops the roll and shows the current date; 08 stops the drawing and shows four items on; 09 stops with the bar down. Every declaration in these reduce blocks carries !important, because the preview-loop rules stack classes and would otherwise win on specificity. The reference is MDN's prefers-reduced-motion page, and the observer that item 09 uses is documented in MDN's Intersection Observer API guide.

What screen-reader users get varies by item.

Item What is actually attached What it announces
01 Quantity sync aria-label on quantity buttons Which product's quantity rises or falls
02 Save for later aria-label on move buttons Which item moves to which list
03 Coupon row aria-live="polite" Applied, or unknown code
04 Stock limit role="alert" Remaining stock and the clamped maximum
05 Payment method aria-expanded + radio group Which method is expanded
06 Same as orderer aria-hidden + inert Folded fields leave the focus order
07 Arrival chip aria-live="polite" The new arrival date and fee
08 Consent bundle indeterminate How many items are on
09 Pay bar role="region" + focusable order list The order form region and the bar

If the forms themselves aren't built yet, 9 form validation UI patterns is the input-side neighbor, and a multi-step order form is covered in 9 multi-step form wizard patterns. The broader input roundup sits in 9 input design ideas, and tabular order lists sit next to 9 data table interactions. How this site renders and measures demos before each article is written is described on the about page.

FAQ

Why does this cart page design fold the cart line instead of removing it?

Removing the row from the DOM makes everything below it jump at once, and the shopper loses track of what disappeared. Folding with grid-template-rows: 0fr shrinks the row's space smoothly so the eye follows the motion, and the same product appearing in the twin list explains the move as movement itself. Small informative widgets that earn a slot beside the summary — weather widget design is one — sit comfortably at this scale.

The discount row never appears when I apply the coupon. Why?

The cell the row lives in starts at grid-template-rows: 0fr, but without min-height: 0 on the inner element the cell opens to the content's height and stays there. Pair min-height: 0 with overflow: hidden on the inner element — as .pm__detail does here — and the cell travels between 0fr and 1fr both ways.

Do I need all nine on one checkout screen?

No, the nine are ingredients. The minimum set is 01 (quantity and total), 08 (consent), and 09 (pay bar); add 03 if you take coupons and 06 if shipping differs from the orderer. One screen carrying all nine gets busy, so spread them one or two per step of the checkout flow.

Enter the archive password

The password is inside this article. You will find it as you read.