I work as a developer and I run many e-commerce websites. One thing I've noticed is that the shopping cart doesn't have the same behavior in different websites (whether it's mine or not). The main topic I'd like to discuss is the way we see what's in the shopping cart.

  1. When we click/hover the cart button, display a dropdown showing what are the products we have and usually 2 buttons. "Go to cart" and "Checkout".

  2. Show a side bar menu, similar to the menu. It's also similar to the dropdown option, because we stay on the same page but we can see our cart. This option however, show more products, since it goes from the top to the bottom of the page.

  3. Direct link. When hovering the button, nothing happens, and when we click the button we go to the shopping cart page.

I don't know why these options are commonly used and what are the benefits of each. I imagine the 3º option is trying to make the user finish the purchase as soon as possible. Option 1 and 2 is more likely to buy more items, but less likely to finish the purchase.

The only problem I've noticed with option 1 is the consistency across devices. It's not optimal to show the dropdown on mobile.

But is it really bad to have a dropdown on desktop and link access on mobile? Is there anything I'm missing here?

  • I dont get the appeal of a dropdown. What is the information value? I can indicate that there are things in the cart, but if i want to look at the cart why not have the full page of it. Worst case i have to scroll in the dropdown on mobile
    – tim human
    Oct 6, 2020 at 13:43

2 Answers 2


There's a fourth option:

Shopping cart Modal Window

  • It's an optimal solution for both desktop and mobile
  • By having an independent scroll bar allows to view the total amount of items in the purchase keeping the same window height
  • It doesn't leave the current purchase page
  • Allows to include all the possible actions of a shopping cart in the window itself: add item, delete item, finish the purchase, ...

Example with demo at hmtlstream.com


I believe that each type of presentation has its pros and cons and suitability depending on the platform used and the type of goods on sale on the e-commerce website.

For big ticket items, e.g. more expensive items and items where users need to look at detailed specifications, such as computers, furniture, and etc., a full page check out screen (types 3 and 4) would be more suitable as it allows users to confirm and verify the selection before making the purchase.

On the other hand, if the items are relatively cheap and easy to buy, such as clothes, groceries, small items, types 1 and 2 are more suitable. And type 2 is better for websites where the bulk of users have the habit of buying many items in one session.

Fundamentally, the choice of shopping cart design has to tie in with the product type on the website and user habits to provide a complete and joyful experience for the users.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.