Shopping cart ecommerce best practices: the cart

A shopper picks a size, a color and two units, then the cart summarizes the line with the product name alone. The size reverts to the first option, the quantity resets to one, or the price shows the list price while the product page showed a sale. The shopper checks the line, sees the mismatch and wonders whether the store will ship what they picked. Owners rarely see this, because they test with the one variant they already know works, on a laptop. A shopper on a phone sees the whole mismatch at once.

• Each line shows the chosen size, color and quantity as the product page showed them.
• Changing the quantity updates the line total at once, without a reload that resets it.
• The Checkout button sits above the fold on a phone, and it is larger than Continue shopping.
• Opening a coupon box does not push the Checkout button out of view.
• The item count in the header matches the number of items on the cart page.

The wrong version is a cart line that shows only the product name. A shopper who picked two sizes cannot tell which line is which, and the cart gives them no way to check. The right version repeats the size, color and quantity as plain text on each line, with a small image of the chosen color, so the line matches the page the shopper just left. To check it, add two variants of one product, choose the second size, and read each cart line against the product page. A fault shows up as a line that names a size you did not pick.

On a phone, a coupon box that opens into a long field can push the Checkout button below the keyboard, and the shopper has to scroll back past a list they just edited. Quantity fields cause the same trouble when the total only refreshes after a full page load, because the shopper changes a number, sees no change and taps again. The wrong version keeps the total in place until a reload. The right version recalculates in place and keeps Checkout within reach of a thumb, close to the total. In a simulated run, the screenshot of the cart step shows whether the button is off the screen after the coupon box opened, which points at the layout.

A guest cart is often stored only in the browser, and a sign-in can start a new, empty account cart. The shopper who added two items, then signed in to check out, sees an empty cart and assumes the items were lost. The right version merges the guest cart into the account cart at sign-in, and keeps the items if the shopper signs out and back in. Simulated visitors cannot sign in with Google or single sign on, so check this path yourself with a regular account. With paid credits, you can give a visitor a test account, and the report then shows whether the items were still there after the login.

A store adds a bundle discount, a gift wrap option or a size chart, and the cart line changes its wording or total after the shopper has already picked. Rerun the same visitors through the product page and the cart after each change, choosing a variant and a quantity each time. With paid credits, a test account can reach a cart behind a login, and each preview deploy can be checked before it goes live.