Add to cart page design: the screen after the tap

A tap on Add to cart changes the page in one of four ways: a drawer slides over the product, the browser moves to a cart page, a small message appears for a moment, or only the number in the header changes. The shopper cannot see which one you chose, so they judge the result from what is on screen in that first moment. A message that fades before it is read leaves them unsure, so they tap again and end up with two. A drawer with the checkout button under a row of product cards looks like the end of the purchase.

• The item name, size and price appear in the confirmation, not only the number in the header.
• The checkout button stays in view at the top or bottom of the drawer without scrolling.
• A message that confirms the add stays until the shopper closes it or moves on.
• The Add button changes to show the item is already in the cart, so a second tap is not needed.
• Closing the drawer with the phone back button leaves the item in the cart.

Look at the screen one second after the tap, the way a shopper does. A drawer that opens with the item at the top, its size named and a checkout button in view confirms the tap worked and shows what comes next. A bare number that changes from 0 to 1 in the corner does not. Some shoppers never notice the number changed, so they tap Add a second time, and the same size goes in twice. A tell in the report: the visitor's thought says they were unsure the item was added, and the next step is a second tap on the same button.

Test each version of the tap on a phone. A message that appears at the bottom of the screen can sit under the browser's own toolbar. A drawer may open over a product page that keeps scrolling underneath, so a swipe meant for the cart can move the product instead. Each of these shows up as a stop on the product page, with the visitor's words about what they expected, so read those words next to the screenshot.

A drawer is one screen with its own scroll. The store adds the item, then fills the lower half with other products, a shipping notice and a promo box. On a phone the checkout button can end up below all of that. The shopper has just seen a confirmation, so they scroll the drawer looking for the next step and reach the bottom of the upsell list instead. Wrong: the checkout button sits at the end of the drawer, under a row of product cards. Right: the subtotal and a Checkout button sit at the top, and the cards come after them, below a line that says keep shopping.

A shopper may not buy in the first session. They add an item, close the drawer, and come back later or the next day. The item has to still be there, with its size, and the count in the header has to match what the drawer shows. Check what the back button does on a phone, since closing a drawer with it may reload the product page and drop the chosen size.

The task in this test is that exact return. The visitor adds one item, leaves the cart, and tries to find it again. If the item is gone, or the size has reset, the report shows the stop on the step where the visitor found the cart empty, with a screenshot and the words they used. That is a fault in how the cart keeps its items, and the fix belongs to whichever page drops the selection.

Checkout flow testing

A store adds a recommendations block, a sticky bar or a discount notice, and the checkout button moves below it on a phone. Rerun the add, leave and return path after each change to the cart, the drawer or the theme. Run it on every preview from a phone and from a laptop. With paid credits, visitors can run the path behind a site password, before the change goes live.