Ultimate Checklist to Bulletproof Ecommerce Cart
(with Free Adobe Xd Template)
It’s a product page and a checkout that are considered the most crucial areas of an ecommerce website. But between those two, there’s one more page that’s extremely important in the ecommerce funnel: shopping cart.
Working at UX agency, we’re faced with ecommerce cart designing quite often. These may seem quite simple tasks at first, but combining the user needs with strictly business goals such as increasing conversion isn’t always that easy. Cart is a strategic place. Here’s where users collect the products, review them, and then make a final decision whether to proceed to checkout or abandon the cart. That’s why every information in the cart needs to have a purpose and even the single pixel matters.
Hence this article — a checklist of all elements needed in a bulletproof* ecommerce cart with guidelines on where and how to place them. All these summed up at the end in the form of Adobe Xd wireframe that you can download.
* I’m covering here general guidelines for a typical ecommerce cart. All based on research and years of experience with working with ecommerce clients. As a UXer I can’t advise you to treat it as a silver bullet, it’s a collection of good practices, a skeleton that might need adjustment to fit specific user and business needs.
Product Name and Image
Reviewing the cart, especially if it’s filled with many items, the users need to quickly identify the products. As people tend to process visual information faster than the text, product images will serve as the first clue. They should be big and precise enough to enable users to recognize the item right away. If the product is available in various colors or forms, it’s useful when the image reflects the user selection — identification is quicker then, and no unnecessary confusion arises.
Full product name, in the exactly the same form as on the product page should be placed next to the image as a heading or in bold. It may be tempting to shorten product names in the cart to safe some space, but it’s not worth the risk — users may get confused, thinking it’s not the item they selected.
💡 Idea: To make it easier for users to identify the product by the image, consider adding a zoom-in option in the cart.
Price and Quantity
As users may realize in the cart they added too many products by mistake or simply want to change the quantity just before proceeding to checkout, edition needs to be allowed. The best way to represent it is by using text input where the user can enter a desired number. Additionally, as an alternative way to change the quantity, put + and — signs or up and down arrows next to the input. In the case user chooses quantity that is higher than the stock availability, use alert pop up or microcopy informing about that. Include also the information on what is the maximum quantity that can be chosen. As for the price, always show the total for the number of items selected and make sure it automatically updates when the quantity is changed. In the case of ecommerce that ship abroad and allow paying in different currencies, enable users editing currency in the cart as well.
Quantity and price are usually put in one line next to the product image. That’s a good practice which doesn’t need much explaining. What’s also important is that they should be placed next to each other so that when the user changes the quantity, the relevant change of price won’t escape the attention.
💡 Idea: Consider allowing 0 as a quantity and when the user enters it, grey the product out and remove it from order summary but not yet from the cart. This way customers will have an easy way to check how the total price changes when a given product is removed, without being forced to come back to product page if they decide to add it again.
Editable Product Details
The amount and form of product details is highly dependent on the product itself. Since cart is where the user reviews the item, what should be included, for sure, are those information that are specific to the product selected such as its size, color, pattern, type etc. At the cart stage, users need confirmation that they’re about to order the right product but, at the same time, are still prone to change their mind. That’s why, it’s useful when the cart allows editing the items without the need to navigate back to the product page.
Usually the best way to put details is a horizontal line placed in the middle of product image. In most cases the edition can be solved with simple text dropdowns, but for patterns or colors it will be useful to represent the details visually as well.
💡 Idea: In the case of fully customizable products with a longer list of diverse features it might be better to put details vertically next to the picture with an edit link directing to product page. If customization is a highly complex process demanding a lot of attention, it should be separated from the cart, otherwise the user might feel lost or overlearned and as a result abandon the cart.
Link to Product Page
According to National Mail Order Association 35% of shoppers need more than 12 hours to complete their purchase and 21% over three days. Adding an item to the cart on Monday, on Wednesday the users may don’t remember the product very well or simply want to review it by reading description, viewing photos, or checking reviews. Make it possible for them by anchoring the product page in the item name.
Though directing the user away from cart isn’t usually good practice from business point of view, in this case this is the best you can do. Without the link to product page, users who feel the need to review the item, will leave the cart anyway either to do that or to abandon shopping for good. It’s not worth the risk.
💡 Idea: After clicking the link, the product page may open in a new tab by default — that way the users won’t actually need to leave the cart page. You may additionally add the new tab icon next to the link to inform the users that the page will open in a separate window. This way you avoid users overlooking it.
Removing the Item
Adding product to cart doesn’t necessarily mean that users want to buy it, many of them are only considering the purchase. Research from the University of Glasgow revealed that 74% of customers use shopping carts as wish lists. It means, vast majority of users may add multiple items to cart and later try to narrow the list down leaving only those products they want to buy right now. For those customers, the possibility to separately remove the items from cart is necessary.
Remove icon (X/bin) or Remove item link should be placed in each product section, but rather not on the right edge, especially in the case of mobile devices this area it quite prone to accidental taps. If you opt for icon, consider microcopy as well. To safe place it can be located at the top above the products in the form of a heading.
💡 Idea: As shoppers use cart as a storage area, apart from possibility to remove items from the cart, it may be worth to add Move to wishlist link.
Clear Cart
Apart from the possibility to remove items separately, users should also be allowed to clear the whole cart at once. In the case of persistent shopping carts that remember user’s choices for a long time, there’s quite a chance that the shopper won’t be interested in the products he/she was considering the last time. In that circumstances, removing items one by one will be a frustrating waste of time, especially if the cart was filled with dozens of products for comparison.
Clear cart link should visibly differ from Remove item and needs to be placed in the safe distance from it. Microcopy will also lower the risk of users mistaking the two and to be 100% sure users won’t clear the cart by mistake, it’s worth adding an alert asking to confirm the decision.
💡 Idea: Apart from clear cart, you may also think of adding checkboxes next to each item to allow bulk actions. With option to choose and later remove selected items, users will be able to precisely manage their cart.
Order Summary
As it’s the last step before the user makes a final decision to proceed to checkout, order summary is a crucial area. What interest users the most at this stage is how much they’re going to pay. Information architecture needs to be very transparent here, as any doubts may result in cart abandonment. That’s why it’s better to put order price and delivery costs separately, not as a total price, in which case user may not be sure what total means. If you offer free shipping, simply put Free in the shipping costs — it will be more visible and encouraging than $0, especially when you additionally differentiate it with a color. If these details are relevant for your ecommerce, use microcopy informing that the subtotal price contains VAT.
Apart from price details, it’s a good idea to place around order summary other information that might convince users to move further to checkout like information about returns (if these are free and at least 30-day) , delivery methods and estimated delivery date As for the last, Baymard Institute conducted research that reveled it’s more user-friendly to put the exact date the order arrives instead of unclear information like shipping in 2 days which actually doesn’t tell users much. Payment methods, unless they’re not very limited or unusual, can be dealt in the checkout– at the cart stage users are much focused on the order itself, not the payment.
Order summary should be clearly separated from the rest of the cart. The best spot to put it is below all products at the bottom of the page. Logically this is the place the user reaches after reviewing all products. The price summary should be placed on the right in the same vertical line as all prices for single items — such layout will be easily associated in the user mind with columnar addition. With horizontal line dividing subtotal and shipping information from total price will make it all look clean and transparent. Additional information described in the previous paragraph can be put on the left side from price summary.
💡 Idea: Area around price summary might also be a good place to ask user about the discount code. A subtle link (which won’t distract users too much) which expands into input can be placed above the total price or on the left side (depending on how visible you want it to be). When the code is applied, the sum of discount should appear in the summary. Seeing discount at cart stage may encourage users to proceed to checkout.
Checkout Button
No matter of the ecommerce type, the main call to action is the same for all carts — directing users to checkout. That’s why the button must be visually prominent. Bold colors that clearly differentiate from the background would work best. A thing that might help here is a color wheel. Choosing complementary colors (those that are opposite each other) for background and button, you’ll be sure the latter will stand out. As for the copy on the button, use what users are familiar with, primary CTA button is not the place to experiment. Verb-oriented phrases like go/proceed/continue to checkout would usually work best, but checkout alone will be fine as well. Make sure also that the copy is easy to read: use clear font and apply big contrast between the text and the button colors.
Put checkout button below the cart summary, on the right-hand side. According to Gutenberg Diagram, bottom right corner of the website — terminal area — is where people focus their attention after scanning the page. Thus, for western users who read left-to-right and top-to-bottom, terminal area seems to be the best place for the checkout button.
💡 Idea: To encourage users to click the checkout button, you can ensure them that the process will be secure by placing trust badge/s underneath. In a survey by Econsultancy, 48% of shoppers admitted that trust seals help them decide if the website is reliable.
Other CTAs
Though checkout is primary, it’s not the only call to action that should be in ecommerce cart. Continue shopping is necessary as well. It will enable users an easy way back to the shopping area, without worrying that the content of their cart will be emptied (what some might fear clicking back in the browser). As a secondary call to action, continue shopping is better as a link and can be placed outside the main viewing area on the left.
My advice is to stick to two, maximum three secondary calls to action — in general the less the user is distracted in the cart, the better. By encouraging customers to take multiple actions, we risk diverting attention for the main one –clicking the checkout button.
💡 Idea: In the case of complex or fully customizable products which may arise doubts or questions, it might be a good idea to include directly in cart the phone number and CTA encouraging customers to call in case they need help.
Bulletproof Ecommerce Cart Template
There’s only one way to quickly sum up this article — visual. Below you’ll find Adobe Xd wireframe covering all the elements that should be found in the bulletproof ecommerce cart.
Download Bulletproof Ecommerce Cart Template (.xd)📥
Feel free to take it and adjust it to your needs.
P.S. To be up to date with The Rectangles and be the first to know about other articles like this one, subscribe to our newsletter. : )
