Below is the Wireframe for the Shopping Cart which automatically scrolls along the height of the content area in between the header and footer.

enter image description here

Now in the smaller screen where the content will collapse which is the best way to display the Shopping Cart so that it does not affect the User Experience.

  • This seems like a rather broad question. Are you asking how to design a mobile version of this page?
    – Matt Obee
    Nov 14 '14 at 10:14
  • not exactly design. i am wondering how to stack it right way so that.
    – Harsha M V
    Nov 14 '14 at 11:28

I suppose that the responsive behaviour is due to allow usage on desktop as well on mobile devices. Hence I would show for the mobile version a really reduced version of the shopping cart. It should be reachable very fast, so I would place it on the top and provide an indicator as feedback when an item was added to the cart.

Below is an example from the mobile version of amazon:

enter image description here

What I'm missing in amazon's version is the feedback and info of items in my shopping cart. This could be look something like this:

enter image description here


The most common behaviour in responsive e-commerce sites is to show the shopping cart icon on the top (right) with the number of items added to it. Since we are dealing with smaller space, we should prioritise and keep on the screen only the necessary elements.

You can see an example in www.nike.com or www.bol.com.

The behaviour when you click usually is a separate page, but you can always explore other options like maybe open a drawer underneath?

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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