Shopping Cart Design: Best Practices in 2021
Remember those large shopping carts you use to get groceries? Those physical shopping carts were the inspiration for the coming up with the best shopping cart website design. The basic functionalities were adapted into its virtual counterpart giving online shoppers the capability to “hold” items they are considering to purchase. Using this online shopping cart they can also view, remove and add items before proceeding to the virtual cashier – the checkout page.
Online shopping cart has more capabilities. A proper shopping cart design can automatically calculate total cost (remember when your mom will whip out the ol’ budget calculator?). It can “save” items and let you purchase later if it is still available. The one thing that it can’t do is act as your 4 wheeled kiddie ride.
Below are the best shopping cart best practices and shopping cart website design ideas to help you come up with the best possible experience for your customers.
1. Notify the user when item is added to shopping cart
Confirmation for adding an item to the shopping cart is typically just changing the number on the cart icon. There is a risk that most online buyers, especially new ones, will miss that small number. To draw the buyer’s attention, it is best to use a secondary and more noticeable indicator to confirm that a product has been added to the cart.
An animated pop-up showing the product being added to the cart is a “can’t miss” indicator. User experience (UX) designers preach that online actions should mirror a real-world action. Adding an animated confirmation should generate an experience similar to a person getting an item from a grocery rack and placing it inside their shopping cart.
Include an image of the product and a list of corresponding options in the shoping cart design. Don’t overuse pop-up animations. Small amounts of movement in a mostly static page will draw attention, but overdoing it will distract and possibly annoy your customers.
The shopping cart page design must consider real-time inventory. An order should not be placed if it is not in stock. Going through a buying process only to find out that the item wasn’t in stock is not a good user experience.
2. Mini shopping cart (Pop Up)
Online shopping carts come in two forms. One is a full-page cart that contains all the details of a customer’s transaction. The other is a “mini” shopping cart that is essentially an icon or shortcut to the main shopping cart page. This mini shopping cart is usually located in the sidebar or above of a page.
The best shopping cart website design practice is to include both carts because they are complementary to each other. A mini shopping cart should show relevant information using as little page space as possible. The reason why it is located in top corners or sidebars is to prevent it from affecting the page visuals while maintaining a constant reminder of a customer’s actions.
A good mini cart page design shows the selected product details, usually via a pop-up, before reflecting the item, quantity and price on the mini cart icon. This shopping cart best practice allows the customer to be kept on the product page to continue shopping. It provides a customer with a quick view tool to monitor their items and how much they are about to spend.
3. Show the number of items
The best shopping cart design should always show the number of items clearly. An accidental double tap or click can easily add another item without the customer’s knowledge. Most shoppers use a mobile device and they could easily miss this error.
Imagine a customer calling your hotline demanding to return a “duplicate” order. All the while telling you that no one orders two engagement rings at the same time.
Customers should be able to review and update order quantities from their shopping cart. They must never lose the option of modifying cart contents until the very last step of their buying process.
4. List product image and details
Your customer makes their final purchase decision on the full cart page. This is their last stop (Well, almost last stop, there is still the Review Page) before proceeding to the checkout. The role of the shopping cart now becomes doubly important. The shopping cart functions as a tool to organize your shopper’s items. But when they are done looking for items they want, the shopping cart’s sole function is now to lead the customers to pay for the items.
It is important that this page provides a clear summary of items to be purchased. Your shopping cart designing team should include the following relevant information:
- Product image – The image should be large enough for buyers to identify the item. A tiny thumbnail image will not do especially when viewed from a mobile device. The image should show the item in the correct color, make an option so the user can properly review the product.
- Product details – This includes the size, color, price, model, inscription, brand and other important details worth mentioning. Complete product description will allow the user to differentiate the item he wants to purchase from other similar items.
- Quantity – We can’t reiterate enough the importance of showing this information clearly. This impacts the total purchase price and possibly the shipping cost.
Having all this information clearly provided in the shopping carts design will allow customers to review their order before they purchase. This gives customers the opportunity to see and rectify mistakes. Lastly, include a link from each item in the shopping cart back to its product page. This way the customer has a way to review and reread the entire product description.
5. Allow customers to edit items in cart
Allow your customers to easily edit their orders on the shopping cart page itself. They should not be removed from the cart or redirected back to the product page when editing orders. You should keep them on the shopping cart page at all costs.
There are two common ways to do this in the eCommerce shopping cart design. One is through inline editing and the other is via a pop-up screen. The product image and details should be updated to reflect any changes made by the user.
Provide clear labels or icons on the actionable items. A plus (+) or minus (-) sign are universally known symbols and should be used to visualize adding or removing items. It is one of eCommerce shopping cart best practices.
6. Proper use of coupon fields
Coupon code fields are those little form boxes that you find near the mini shopping cart. It is a portal for customers to input a product or store-specific coupon codes. These codes are normally for discounts or free items.
Put yourself in the customer’s shoes. You are idly shopping and when you are about to checkout you see this shiny and empty coupon code field. Unfortunately, you don’t have a coupon code. You might say “Surely this is a mistake, I SHOULD have a coupon code because the shopping cart page is asking for MY coupon code”
This little misunderstanding might lead your almost paying customer to look for this elusive code. A search that might lead them to the waiting arms of another e-commerce site.
If you want to put a coupon code, here are 3 shopping cart UX best practices on how to avoid the “coupon search exodus”
- You can place a clickable link for customers to search for an available coupon on the shopping cart page itself.
- Hide the coupon code field from customers without a coupon code on hand.
- Slightly hide or lessen the visibility of the coupon field. Users who have coupon codes will look for the form field and those without might not even know it is there.
7. Display payment and shipment options
Payment Option – Showing all possible secure payment options will make the checkout process frictionless for your customers. The choices must be presented in such a way that the customer can see all the options in a single view. This allows them to compare and choose the most optimal choice. You can also add a payment security seal as well as place icons next to your payment options.
Shipping Cost – The cart should be able to calculate this cost based on the delivery location. If the customer is a repeat customer, the shipping cost should be based on the listed default delivery address.
8. Show total cost
When it comes to money matters it is important to make the customer secure about their purchases. You need to know these persistent shopping cart best practices:
- All Costs must be clearly written
- There should be no hidden costs
- Everything with a monetary value – the subtotal costs, taxes, shipping costs, and finally total cost – must have their own line item in the cart.
Before a customer proceeds to the checkout page, they must be able to see how much they will pay and the breakdown of this amount. Numbers and monetary values should be aligned, has proper spacing and visually easy to read even if viewed from a mobile device. Some designs place all the values inside a table.
The total cost is just that. The TOTAL cost. There should not be any other cost added upon checkout.
9. Cross-sell or upsell
Cross-selling or up-selling occurs in many businesses and in different forms. It is essentially offering customers a chance to buy additional products that either complement or enhance their current purchase.
The simple phrase “Would you like fries with that?” is a great example of an upsell and has helped McDonald’s sell untold amounts of fries. Those slick marketing guys even have an “Upsize” pitch when you do decide to get additional fries.
Back in 2006, Amazon reported that 35% of its revenue came from up-selling and cross-selling. More than 10 years later, this business tactic still remains a potent source of revenue. Most e-commerce sites adopted this and got universally positive results.
On average, cross-selling and up-selling accounted for increasing e-commerce sales by 10% to 30%. You can maximize a shopping cart page by recommending personalized products or showing what other customers bought. This is also a prime opportunity to market top-selling items because you have the full attention of a paying customer.
10. Specify Call to Actions (CTA) on buttons
When your customer reaches the shopping cart page, they should only be presented with two Call to Actions (CTA). One is to “Continue Shopping” and the other is to “Checkout”.
Placing the CTAs on clickable buttons allow them to be distinct from the rest of the page. Below are basic guidelines to follow when designing shopping cart CTA buttons.
- It needs to be colored. Preferably not white, gray, or black. It should be a color that stands out.
- It needs to stand out from the background.
- It must be placed where it is most visible.
- It needs to grab a customer’s attention.
Preferably you would want them to click the Checkout CTA so this must be highlighted more than the Continue Shopping CTA. It must be the boldest and largest element on the shopping cart page.
This must be located at both the top right and the bottom right of the cart page. Depending on the shopping cart page design, it can also be placed on the left but most shopping cart examples place them on the right.
The Checkout CTA should clearly indicate what will happen when this button is clicked or activated. It must be clear to the user that they are about to buy and pay for the items. Don’t use confusing labels however cool they may sound. Just go with a traditional and simple “Pay Now” or “Proceed to Checkout”.
11. Add a Review Page
Always Include a Review Page to show the order summary. This feature gives the customers one last chance to review and verify if they are buying the intended items before they commit to the payment process.
On the Review Page, you should again include all the information about the products. It is similar to the tabular view on the full shopping cart page. The review page should also contain the customer’s personal, shipping and payment information.
Best shopping cart website design practices allow the customer to cancel or change their order. They can also add items by clicking the Continue Shopping CTA. If all is good, this would give your customers the confidence to continue with the checkout process.
12. Add a Thank You page
Effective shopping cart website design always includes a Thank You page. This page should contain a note confirming that the order was sent and is now being processed. Include important information like an order tracking number and who to contact in case of a delay in delivery.
This is also an opportunity to show your gratitude towards your customers and strengthen your connection. Start by giving a warm and personal message. Give this some thought and if possible add a digital signature for a personal touch.
You can also offer those previously mentioned Coupon Codes here as part of Thank you a message. You can even put links to top-selling items as part of your upselling efforts.
There you have it. Follow these tips to design a shopping cart that stands out. Having an efficient and customer-focused shopping cart page gives you the greatest chance to succeed in the world of e-commerce. If you have more questions about how to design shopping cart or website design, we would be glad to assist you. Please send us an email or call us. All numbers are listed on our contact page.
