Flow
Shopping online means users need to easily add products they want to their cart. This fundamental action can make or break a sale, so getting it right is crucial.
Steps
Reset
Outline variant selection for product
Whether it’s size, colour, amount or something else, it must be clear what details must be picked to be able to add an item to cart.
Primary action on product page is add to cart
One of if not the most prominent button on the page to draw the user’s attention. This may change if you want an 'add to cart' button on a grid view of multiple products.
Feedback once added
Immediate confirmation the item has been added. This can be done several ways and depends on the amount of intrusion you want to have, which is why 2 options are shown.
Link to cart view
Typically in a primary navigation, so that if the user continues shopping but is then ready to checkout, the cart is easily accessible.
Showing the number of products is a way to catch their attention that they have items added but not purchased yet. A total price can also be considered to be shown.
