I'm working on a website for a restaurant, where users can buy their food. By looking at some generic food ordering websites they are all pretty common about showing the shopping cart:

  • Mobile: Via main navigation bar;
  • Desktop: Fixed on the right side of the page;

But most of the e-commerce websites (amazon, walmart, ebay, etc..) uses the shopping cart on the main navigation, doesn't matter if it's a desktop or mobile view. Actually, I didn't found any using the fixed column. By moving the shopping cart to the navigation there will be more space to show the products, however this is not a common use in this segment.

What should I consider before choosing one or the other? Is there any specific reason why I would keep the shopping cart visible or hidden in the navigation bar?

As requested in the comment, here is a basic layout to show the examples:


2 Answers 2


Benefits of an always-visible shopping cart

The person can always glance at the shopping cart and know what they've already added.

If a person is planning to buy 10 items, the shopping cart acts as a reminder of what they have already added, and helps them focus on the remaining items.

This also helps spot errors quickly: "Oh, I didn't mean to add two of those. I can correct it without leaving this page."

Benefits of a hidden shopping cart

It doesn't take up any space, meaning you can give more to the products you're trying to sell.

If the person is buying only a few items, seeing a constant list probably isn't all that helpful.

It makes the responsive experience more seamless. If the person is used to the shopping cart being in the main navigation at all times, hiding it as soon as you drop below a certain breakpoint isn't taking something away from the person.

Also on the topic of responsive design, putting the shopping cart above or below the items being browsed (Which you'll have to do as the content stacks) causes issues. You have to scroll past the shopping cart if it's above, or you have to keep scrolling down to check if it's below.

  • I like what you said about being able to check what the user already selected. Specially in this type of purchase. About the responsive, if visible on desktop views, it will be fixed on the right side (I've added an example on my question), so it's always visible (when there is lots of items, there will be a inner scroll within the cart). Commented Mar 17, 2017 at 17:06

In principle, it is nice to know all the time what you have added to your shopping cart. The problem is that it might distract the user from the task that they want to perform.

When the user wants to buy some products, let them buy the products and when they want to see the shopping cart, let them see the shopping cart. I am very much in favor of showing the shopping cart throughout the checkout procedure - in all steps.

What you could do is have the shopping cart in the navigation bar and when hovering to show the details of the shopping cart.

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.