Skip to content
Index730 resources
Adding to cart

Adding to cart

The flow from product variant selection to confirmed cart addition and a route back to the cart.

Commerce & Checkout · 11 checks · 14 resources

Before you ship

11
  1. 01Outline variant selection for product — size, colour, amount or otherwise, it must be clear what must be picked before adding to cart
  2. 02Primary action on product page is add to cart — one of the most prominent buttons on the page
  3. 03Feedback once added — immediate confirmation the item has been added, at a level of intrusion you choose deliberately
  4. 04Link to cart view — typically in primary navigation, showing the item count and optionally the total price
  5. 05Show availability before the action — in stock, low stock, out of stock or backordered, so the button never promises what the warehouse cannot
  6. 06Let quantity be set and bounded — with a clear maximum and a reason when one is hit
  7. 07Show the price the user will actually pay — currency, whether tax is included, and shipping when it is known
  8. 08Persist the cart across sessions and devices for a signed-in user
  9. 09Announce the addition assistively — a live region, so confirmation is not visual-only (WCAG 4.1.3 Status Messages)
  10. 10Handle the failure case — the item selling out between page load and click, and what the user sees when it does
  11. 11Offer both next steps — continue shopping and go to cart, rather than forcing the checkout path

Resources that help you build this

14