Must-have elements:
- Product title (it should be the clickable link of a product)
- Product image (it should be the clickable link of a product)
- Chosen product variant, size, etc.;
- Quantity section with plus and minus buttons;
- Price;
- Button or icon to remove a product from the cart.
Nice to have elements:
- Old and discounted prices (if applicable);
- Amount of savings due to discount (if applicable);
- Scarcity triggers (if a product is in low stock);
- Any other important information about a product ("2-year guarantee, 100 days trial, etc.")
Now let's look at a few bad and good examples so you will get what I mean by good layout and sufficient information for the products in the cart:
Bad example from REM-Fit
There are a few problems here. The first is the lack of an image thumbnail, so it's hard to understand which product I have in the cart if I don't read the product title. Another one is the terrible layout of product items in the cart. It's centered, which is very hard to read and scan.
Example from AmericanEagle that can be improved
Even though they display all the needed info about the products, the UX for quantity section is not good because you can't edit it at all. Also, they a strange "Style" product attribute which doesn't look like a valulable piece of information for shoppers.
A good example from Aloyoga:
They include all key info about the product: image, title, color, size, original and discounted prices, quantity field with buttons, and icon to remove the product. They even have SKU (which I'm not sure really helpful for customers). Also I'd improve layout by placing product title on the right of the product image, so it will be easier to read all the info in one column.
A good example from Casper (with problem)
Again, they have all the information like on Aloyoga, and the layout is better because the product title is on the right side of the image, which is a more common structure for this element. What they could improve is to add a discount badge above the discounted price to highlight how much shoppers save right now.
But, Casper has one problem. The product title and image are not clickable, so if I want to see the product page again, I will have to do it manually (via search or navigation), which is a friction point. Remember how often you return to the product page of items you have in the shopping cart before deciding to buy them.
A very good example from Puravida
Again, all the info there. They display a relevant image of the product (if I added the strawberry color of the bracelet, I see the relevant image) and both images and product titles are clickable.
