A shopping cart lets prospects preview their product selections, see the total cost, and edit the product list if needed. At the same time, shoppers can use it as a wish list, saving items for later. But adding a product to the shopping cart doesn’t guarantee a consumer will proceed to checkout.
Does your website traffic grow, but the number of orders is far from desired? Then it’s time to revise your shopping cart’s UI/UX and detect whether something prevents prospects from completing orders. Distraction means abandoned carts and lost conversions. Lost conversions mean decreasing revenue and failing to keep a loyal customer base.
On the Onilab blog, we’ve already covered the ways to build frictionless and convenient navigation. We've also shown best practices for an eCommerce product pages, the point right before customers proceed to purchase. Now let’s dwell on the next step: the cart UX aspects which include:
- setting the type of a shopping cart;
- configuring feedback upon adding products to the cart;
- organizing the cart to review the order before checkout.
In this guide, we'll discover shopping cart UX best practices to encourage visitors to place an order and overview what's good and bad in some of the cart page designs.
Table of Content
1. Four Types of Shopping Carts
Can we simply substitute a shopping cart with to perform the same actions? In practice, it's more convenient to split the processes, such as safe product editing in the cart and completing an order at checkout. We explain the checkout meaning in online shopping in one of our articles as well as provide tips on organizing an effective checkout page. It’s a final stage when clients are confident in their desire to buy particular goods. In turn, the cart allows customers to review the order before deciding on a purchase.
A shopping cart realization changes with time. Online retailers analyze their customers’ behavior and adapt carts accordingly. Below we’ll outline four possible ways to organize the shopping cart and explain which option is more suitable for your business type.
1.1 No Shopping Cart
Here we talk about two options:
- Special buttons like “Buy now”, sending users directly to the checkout. They’re designed to eliminate frictions on the purchase journey. The solution aims to ensure that customers will buy the desired item faster and receive a more pleasant shopping experience.
- Incorporating a cart as part of checkout, allowing clients to review the order there.
The decision to configure the “Buy now” button or omit the cart depends on the nature of the business and client behavior. It’s one of the shopping cart UX best practices in the following cases:
- if an average order contains just one product;
- if you sell specific (often expensive) goods, such as cars, beds, or watches.
But even if most users buy only one item, it’s better to leave two buttons: “Add to cart” and “Buy now”. The “Buy now” button is more like an additional feature to speed up the buying process.
1.2 A Pop-up Cart
Instead of creating a dedicated cart page, you can implement it as a pop-up. It’s a modern solution for stores to speed up the customer’s journey. The pop-up can substitute a full cart page and it may be a variant of a success message, indicating that the product is added to the cart (we’ll discuss it further). Anyway, visitors will stay on the same page with the ability to review the cart at any time.
One of the pop-up benefits is reducing the number of clicks. Furthermore, clients don’t have to wait for a cart page to load, enjoying easier shopping and converting faster. Let’s go over how to show the pop-up on smartphones and desktops.
A Pop-up Shopping Cart on Mobile
The pop-up on mobile comes in handy for the stores without the navigation bar at the bottom of the screen. If the cart is opened by clicking on the header’s icon, you can use the pop-up.
The pop-up on mobile may take the full screen or cover it partly. Note that it should be easy to close it with one hand: besides using the cross button, allow for swiping. The latter is quicker than manipulating the buttons.
A Pop-up Shopping Cart on Desktop
a) A pop-up may overlap part of the page. It lets you focus on the cart contents but usually limits the ability to interact with the page. We chose this approach for one of our clients, GSM55.
Should the pop-up let customers interact with the page? The answer depends on whether you want to direct the attention to the cart or leave the page available to scroll and click on the products.
b) What if you have to squeeze much information into the cart, such as product descriptions, delivery terms, and payment options? You can create an extended pop-up covering the screen almost entirely. Below we see a pop-up on the darkened background and a cross to close the window, indicating that we remain on the product page where we opened the cart.
1.3 A Standard Shopping Cart Page
Creating a full cart page is a standard pattern for online stores. These pages contain product lists, details, options, etc. (we’ll take a closer look at the shopping cart UX design further). Unlike a pop-up, a dedicated page makes the customer’s journey a bit longer. Such a variant is more convenient to accommodate more options, edit the cart with a lot of products, select items from different sellers, etc. For instance, you can add checkboxes in the shopping cart so that users select the products for the current purchase. Such functionality is more difficult to implement on pop-ups.
A full cart page is also mobile-friendly. As smartphones have less screen space, it would be harder to substitute the page with a pop-up unless it takes the full screen. Creating a pop-up or a page on mobile stems from the in your store. If you have the bottom menu (navbar) like in a shopping app design, you need a separate page for the cart with the icon on the bar.
1.4 A Mix of a Mini and a Full Page Cart
Many websites create a hybrid variant with a full cart on a separate page and a mini cart on a pop-up. As seen below on ThingPark Market, a small pop-up (a mini cart) turns up without overlapping the page and has a link to view the full cart.
Such a combination will bring you the benefits of both solutions. Shoppers who need a fast experience will use the pop-up to review products and proceed to checkout. In the meantime, more deliberate customers will open the dedicated page to check all information before leaving their money in your store.
2. Adding Products to the Cart
How does a website behave when users click on the “Add to cart” button? The possible changes cover a cart pictogram, a notification, and a call to action on the product page.
2.1 Organizing the Cart Pictogram
Your icon should be recognizable and familiar to everyone. The pictogram can be a cart, a basket, or a bag, which should be easily discoverable on any website page. Let’s compare the difference between a cart icon on mobile and desktop and check how to ensure the best shopping cart UX on these devices.
Mobile App Shopping Cart Location
The icon location depends on your navigation type. The lower tab bar should have a cart icon on it (in the center or on the right). Note that the bottom menu is a prerequisite for a positive user experience in progressive web apps since customers don’t have to reach up to tap the main controls. We’ve talked about it in our article on .
Does your store have conventional navigation with a hamburger menu? Then, a cart icon generally takes the upper right corner, standing close to the account and search icons.
Desktop Shopping Cart Location
Desktop screen space provides more room for your creativity. Website owners make the cart icon more visible and brighter so that visitors can instantly distinguish it from other pictograms. You can write the words like “My cart” or the total sum next to it to make it more noticeable. The standard location is in the upper right corner.
2.2 Showing Feedback
Feedback is the confirmation of adding products to the cart that also prevents people from putting something in the cart by error. A success message can appear as a small notification, a pop-up with a quick product overview, and an interstitial page. These variants cater to different product ranges and types of shoppers’ behavior.
a) An interstitial page automatically opens when customers add products to the cart. It’s the most noticeable way to confirm the action, which we advise you not to employ. It works better for eCommerce stores with little product variety or when orders don't exceed one item. Such a page requires clients to take deliberate actions to continue shopping. They have to click the “Back” button each time, which may be annoying to repeat in one session.
b) Another option is a pop-up with a product overview, buttons, and cross-sell sections. The pop-up can overlap the page content or appear unobtrusively at the upper part of the page (on desktops). As mentioned before, such pop-ups often perform the functions of a mini shopping cart.
An informative success message typically contains the following elements:
- Product name;
- High quality product images;
- Details (size, color, etc.);
- Quantity selector;
- The “View cart” or “Checkout” buttons.
As far as editing is concerned, we don’t think it’s reasonable to let clients edit or remove the added product as it’s too early to delete the item upon moving it to the cart. We recommend showing a cross-sell block on the confirmation message.
Such a section with high quality images inspires clients to buy more, but the excessive number of elements may overwhelm the viewer. That’s why a cross-sell block should be used in the pop-ups that limit interaction with the page content, focusing the attention on the message. If visitors can interact with the page, this block is unnecessary.
Remember that multiple pop-ups (and the need to close them each time) may deteriorate the user experience. Display them in case your orders consist of one or several items. Or show a pop-up when adding a product for the first time, and the next additions to the cart should appear as small notifications.
c) A success message. Suppose your customers buy lots of products in one order. Can you imagine closing a pop-up or a page every time they click on the product? Horrible. A subtly animated popover that appears and quickly disappears might fit better.
What Are the Options to Close the Pop-Up or Message?
- Clicking on the cross/arrow;
- Tapping on the page field;
- Swiping sideways/down (which is a better functionality on mobile because it’s harder to reach the cross button with a thumb);
- Showing a progress bar (the pop-up disappears when the bar comes to an end);
- The message fading away by itself (it should linger long enough for clients to read the information).
2.3 Reflecting Changes in the Cart
An empty cart icon may have a “zero” or nothing written beside it. But it’s crucial to show the number of products after moving them to the cart, both on desktop and mobile. You may give a cart prominence by increasing the pictogram size or showing the total sum next to the icon if it fits in with the store specifics.
When can you display the total sum? Some businesses process or deliver orders of more than a certain amount. The order summary next to the cart icon helps clients understand whether they’ve reached a threshold for an order. But as a rule, there is no need to indicate the total sum. Especially if you have a mini shopping cart or a cart on a pop-up and users can hover or click on the icon to get all details.
2.4 Tweaking a CTA on the Product Page
Another indicator of moving a product to the cart can be changing a CTA on the . It’s not obligatory but serves for better understanding. For example, the button can change to “Add another”, take a different color, or display a selector to increase the number of added goods.
3. Designing a Shopping Cart: Best Shopping Cart UX Principles
How much information and functions should you display in a shopping cart without overloading customers? Let’s discuss the essential elements of a shopping cart, which features you should enable, and how to organize them.
3.1 Including Comprehensive Product Information
The shopping cart with products may contain the following elements:
- Quantity of items;
- Thumbnails;
- List of products with all parameters (price, color, size, volume);
- Quantity selector;
- A link in the product name to open the corresponding page;
- The total sum with taxes;
- Accepted forms of payment;
- Delivery terms;
- Estimated delivery dates;
- CTAs to continue shopping and go to checkout;
- A discount code field (if you practice this promotional trick in your eCommerce store);
- A wish list button or link;
- Checkboxes to pick particular items for the order;
- A “Remove” button;
- An up/cross-sell section.
3.2 Editing the Shopping Cart
Let customers edit the cart contents, item quantity, or color right before going to checkout. One of the most common editable sections is the item quantity. But how do you enable editing in the shopping cart and ensure a better shopping cart UI/UX? There are three main options: inline editing, pop-ups in the cart, and editing on the product page.
a) Inline editing. This type concerns changing the product specs in the cart without extra pop-ups or pages. It may come in the form of drop-downs, steppers (plus and minus signs), and a quantity input field.
Steppers are considered to be more user-friendly than drop-downs. Why? A drop-down implies taking an extra action: opening a list of numbers and searching for the needed one. It’s better to click on the “+/-” or arrow sign or insert the number from the keyboard manually.
However, you also need to look at your analytics here. If clients buy not so many items of one product, you can make a drop-down to save space, which is so pivotal for mobiles. But generally, steppers are more convenient, especially for orders with large numbers of goods. Remember to indicate a quantity limit. In steppers, disable the “plus” icon and show a message that adding more items is impossible.
b) A pop-up. In this case, clients can click on the “Edit” button next to the product. Then, a pop-up opens. It’s a quick overview, sort of a mini product page where they can change the parameters: size, color, etc. It’s better for the cart UX than going to the product page because it’s faster and doesn’t direct the customer to another page.
c) A product page. You can provide editing functionality, but it isn’t possible for every product aspect. Why do some stores not allow editing? For example, a product of different color can have another product code. From the development point of view, it’s impossible to alter it in the cart. Customers will have to return to the product page and choose another item. That’s why we advise you to link the product with its page: it ensures faster access to edit the product.
Remember to provide an intuitive UX when editing the cart. A case in point is Asos. While you may think you can’t edit the cart, you can click on the dots and choose the needed aspect to modify. But it’s not so obvious. Some may overlook the dots and go to the product page for another color or size.
Allow customers to delete products from the cart. Display a message with the “Undo” button to return the removed item. Ask the customer to confirm the action only if they:
- choose to empty the entire cart;
- lose gifts and bonuses due to removing the item;
- delete complex customized products.
There are also cases when the item has gone out of stock after spending some time in the cart. Clearly indicate that customers won’t receive this product. For example, you can forbid going to the checkout until they remove the item manually. A wise move is to offer them to pick similar products instead.
3.3 Defining Shipping Costs and Payment Options
If possible, specify estimated delivery costs in the shopping cart. According to our research, around 30% of customers abandon their carts due to hidden shipping costs. Shopping cart UX best practices include:
a) Inserting delivery terms (a zip code or delivery destination) in drop-downs or pop-ups to pre-estimate the cost and date;
b) Automatically showing the cheapest shipping option. If clients need a faster but more expensive delivery, they can change it at the checkout.
c) Mentioning that shipping is free of charge. We’ve found that free delivery stimulates about 90% of purchasers to buy more products online.
d) Setting a lower limit for free delivery. It’s a mutually beneficial way to provide free shipping. Consumers will buy more products they didn’t expect to purchase, increasing the average order value.
How can you organize it in the shopping cart? Configure a progress bar, which shows how much buyers need to purchase for free shipping. And when they reach the amount, the progress bar disappears or displays a success message. You can offer some products next to the bar, motivating customers to add more and get free shipping.
Don’t forget to enumerate accepted forms of payment, such as PayPal, Visa, Mastercard, Apple Pay, etc. It’s one of the essential . Some options may be more appealing to customers, so you’ll increase the chances of conversion. Accepted payment badges usually find their place somewhere close to the checkout button, either below or above it or in the footer.
3.4 Choosing the Right Place for the Order Summary and CTAs
Placing CTAs and the order summary in the right place ensures the ability to assess the cost of the order quickly and proceed to checkout without any frictions. Let’s look at organizing these shopping cart UI/UX elements.
Calls to Action
A shopping cart should contain one or two buttons with CTAs:
- Primary: checkout, such as “Pay Now” or “Proceed to Checkout”;
- Secondary: returning to the catalog, such as “Continue Shopping”, or payment options.
A pop-up cart may have only one button as it’s easier to close and return to the page. In any case, the checkout button should stand out: be the biggest, boldest, and spaced-out functionality. We also recommend highlighting it with color while making the second button less emphasized.
Mobile Order Summary
How do you ensure users won’t have to scroll down the page each time to check the order summary? Make a sticky bar with the checkout button and a total sum: it will be visible regardless of the user’s position on the page. Increase the button size when customers scroll to the order details. You can also add an arrow on this bar to quickly move to the order summary.
Desktop Order Summary
A typical place for the order summary on a desktop is to the right of the product list on the full cart page. It also should be above the fold. This position will let people see the total sum and click on the button right away. Do you want to make it even more user-friendly? Configure a sticky bar for a summary block with buttons and the total price.
3.5 Saving Items for Later
A shopping cart is also a place to collect products people are interested in but may not be ready to buy at the moment. That’s why you need to let them save these items and specify this function in the shopping cart UX design.
a) Long-term cookies let users see the products in the cart even after closing the website and accessing it later. But clients may not know whether their goods will be saved and for how long, which is an unreliable way of saving the cart.
b) The “Save for later” button. Below is an example of separating saved items from those on a wish list. If you click on the link, the item is removed from the order but stays in the cart below in a separate section. As you can see, it doesn’t go to the “Favourites” list.
c) A wish list. It traditionally looks like a heart shaped button, sending the item to the dedicated page and leaving it in the cart. In this case, customers will have to make an additional click to delete it.
So you can implement the feature another way: by configuring the “Move to wish list” button. It allows customers to transfer products in one click. You can also consider a link to share the cart contents with others.
3.6 Displaying Discount Options
Coupons boost sales because clients get an incentive to buy the product at a bargain price. However, coupon fields in the cart may decrease sales. It happens if shoppers see the entry field and go to another website searching for a discount code.
There is no guarantee that they will find it. Prospects may get disappointed, change their mind, or discover a similar product on competitors’ websites. That’s why you need to be careful with coupon fields to avoid spoiling the shopping cart UX. How visible should such boxes be? It depends on the business type and promotional strategy:
a) A noticeable promo code entry field if discount codes are an essential part of your strategy;
b) A hidden field or a link if discount codes aren’t actively promoted.
You may need to display the number of points awarded for a purchase or allow clients to spend them (entirely or partially) on an order. The same applies to gift card fields. Remember to automatically change the total cost in the cart when users insert the discount code, gift card, or points.
3.7 Making Use of Gift Options
The more your online store is aimed at presents, the more detailed this section should be. For example, allow customers to decorate presents with a personal note, customized gift wrapping, or a card. You can make it on the store’s separate pages or in the cart itself.
Stores typically hide the opportunity to arrange a product as a gift in checkboxes. It’s suitable for brands where this is an additional option, not the backbone of the business. When the checkbox is enabled, the functionality unfolds in an accordion.
3.8 Placing Motivators to Buy in the Empty Cart
Should you display anything on an empty cart page? We advise you to take it as an opportunity to implement additional entry points to sell. What should a visitor see when arriving on the cart page without products?
- A CTA to fill the cart;
- Frequently or recently viewed/purchased products. Personalize the shopping experience and display what customers may like.
3.9 Keeping Elements from Other Website Pages
A shopping cart should preserve some sections from other pages. Clients may need the information or assistance before making a purchase. Your task is to eliminate their doubts by following the practices, such as:
- Displaying related products. We consider adding cross-selling opportunities as more of an advantage for your sales and cart UX. You can make this section on a full cart page or a pop-up.
- Providing a live chat functionality to assist clients in case of a problem. You can also leave contact details as an alternative to a live chat.
- Choosing the appropriate trust badges. These may be safe checkout badges, accepted payment options, third-party endorsements, money-back guarantees, and free shipping and returns badges. They indicate that clients can leave personal information without the fear of data-stealing. We advise you to limit trust badges to the only official, laconic, and helpful information, which you can prove. These elements shouldn’t overload customers or divert them from essential functions.
In the meantime, we recommend removing unnecessary buttons and sections users can easily find on other pages. One such example is return and refund policies and FAQs. Visitors can read it on the product page, so don’t make special sections concerning return policies in the cart. Place these links in the footer and open them in a pop-up on mobile.
4. Three Ways to Lower Cart Abandonment
Adding products to the cart doesn’t equal purchasing. You still risk losing a customer as the average abandonment rate for online stores revolves around 65%. How can you reduce this number for your website?
Below, we’ve enumerated three effective marketing strategies to lower cart abandonment. You can find more ways to reduce in our dedicated article. Note that there is no one-size-fits-all solution.
4.1 Send Abandoned Cart Emails
Abandoned cart emails are those letters customers receive when closing the website without completing the order. Note that sending such emails is possible if customers are signed in. So you need to give them incentives (such as discounts) to sign in. The best time for abandoned cart emails is within the first hour of abandonment when the interest in products is the highest.
How can you stand out from other messages bombarding clients every day? Create catchy subject lines, personalize the message, and offer relevant products apart from showing the abandoned cart contents. Remember to attach the correct link to the cart page to finish the order.
4.2 Leverage Push Notifications
Push notifications are shorter versions of abandoned cart reminders compared to emails. They may be on desktop and mobile. But regardless of the device type, you need to be concise in the push notification to deliver the most convincing CTA.
How can you reengage clients to come back to the store? One of the working strategies is to instill a sense of urgency or scarcity. For example, offer time-constrained discounts. The subject line should strengthen the notification content and encourage customers to order soon.
4.3 Configure Remarketing
Remind customers about their unfinished orders by displaying ads on other channels, such as websites and social media. That’s what we know as remarketing. Show relevant goods according to one’s behavior on the website to push them towards fulfilling the order.
Conclusion
Through various shopping cart design examples, we've introduced you to the eCommerce cart UX design principles aiming at smoothing a customer journey, clearing the way to checkout, and lowering the cart abandonment. We’ve described which cart type to opt for, how you can configure in-cart editing, organize the CTAs, and allow for saving items for later.
All these tips are heavily affected by the goods you sell and the number of items per order. So you need to perform usability and A/B testing of the cart features, conduct , look at the analytics and heatmaps to determine customer behavior patterns. Our team of Magento professionals can assist you both with this task and with the overall to boost your store’s conversions.