• Show blog
  • Are you looking for an experience-driven digital solution for your product or service?

    Contents

    E-Commerce Shopping Cart UI Design – The Best Examples

    17 September 2021

    5 min read

    The average cart abandonment rate is just under 70 percent.

    The impact of cart abandonment on the revenue is quite severe – at $18 billion annually.

    Shopping carts are indispensable for eCommerce websites, helping customers make successful purchases.

    Looking for some UI inspiration to create the one perfect shopping cart?

    Here are some remarkable examples of websites that have nailed the art of perfecting their shopping cart UI designs:

    Disney

    Renowned brand Disney’s online store may have a standard ‘add to cart’ function, there are still some great takeaways. The company calls the cart ‘bag’ and offers the customers confirmation right above the “Add to Bag” button. The same notification also contains a button, allowing instant checkout. This saves several steps for the customers to complete their purchase faster.

    Sephora

    Beauty brand Sephora has a comprehensive website with its products listed. Their cart page consists of a range of free samples for the customers and the products they are purchasing. The right side of the shopping cart includes these free sample products – and customers can select up to three of them. This does two things:

    1. Encourages the customers to try more products
    2. Provides value-add

    The site also offers a link directly above the coupon code field, which opens a popup layer that displays the actual coupon codes. This provides incentives to the users to purchase the products.

    Godiva

    The devil lies in the details in Godiva’s cart page design. We love the color combination, the clarity offered, and the elegant layout. The page makes moving to the following step simple – customers can shop the order either to a single or multiple addresses. This is handy for the customers who love to purchase from this eCommerce store known for selling gifting goodies. 

    Apple

    Think design, and we can’t stop admiring Apple’s pixel-perfect online store. Their shopping cart is equally impressive, making it easy for the customers to distinguish the product added. The catch here is the images, which are clear and offer the certainty that the right choice of product is being purchased.

    Callaway Pre-Owned

    Callaway’s pre-owned is known for the extensiveness of its shopping cart. When customers add a preferred item to the cart, they’re guided to a wide range of products of variable qualities. They need to proceed with selecting from that product range and then add it to their cart. Also, the entire product description is provided in the cart, ensuring the customers are making the right purchase.

    Blinds.com

    Blinds.com is an eCommerce store for shutters, shades, and various other window treatments. Their ‘add to cart’ function provides room for customization. After adding a product to the cart, the customers are neither redirected to the shopping cart page nor the product page. A new page opens up instead, letting them select various features. With the customer already in the mindset of buying the product, the next step they need to take is to pick the options.

    Bed Bath and Beyond

    It’s a standard practice to make the shopping cart accessible to potential customers. One of the ways to do so is to build it as a dropdown feature on each of the web pages on the site. Even if they go to any other page, they should view the latest cart information and get reminders of the additions. The best practice is to let them adjust the type or quantity of the items without leaving the page.

    Bed Bath and Beyond goes a step ahead. The online store shows the top items added by the customers, placing a bar at the bottom of the screen with the necessary cart information.

    Conclusion

    The shopping cart feature on any eCommerce website has just one motive – leading the customers to purchase. They will use the cart page not just to pay for the order, though. They want to review the quality of the items, check the quantity, see if any coupon code is applicable, go over the specs, and perhaps look for related items. With all these options provided, they will take the desired call to action.

    In this case, place an order. And that’s only possible through the simplicity of the interface and the ease of use.

    Are you looking for an experience-driven digital solution for your product or service?

    Akshay Dafade

    Author

    Akshay is the Lead UX Designer at Pepper Square and he has defined the user experience for some of the finest global brands over the last four years.