Some of the most important elements when it comes to an ecommerce shopping cart design are the “add to cart” button, and the cart page. Recently, as I surveyed a set of online stores, I realized that these elements typically poorly designed, requiring creativity to be applied to them.
To just place a button, and show a page where the products and costs are summarized is no longer sufficient. Below are examples of impressive ecommerce shopping cart design, where the “add to cart” function and cart page get the right amount of attention to design and functionality.
I think it’s worth taking note of these examples because to achieve a successful – and completed – order from a customer, he or she has to go through both the cart page, and the checkout process. If your customers are led through a very minimalistic, untended process, it might upset the entire order and they’ll leave the checkout process, abandoning their cart with completing their purchase.
Impressive Ecommerce Shopping Cart Design Examples
- B&H Photo – Video – Pro Audio
- Callaway Pre-owned
- Disney Store
- Binoculars.com, Hayneedle.com
At first sight, this e-store looks like countless others in the electronic devices market. But if you click on the “add the cart” button, a new layer immediately appears, with a lot of options too! This “add to cart” feature extends the shopping experience while also adding the product to the cart, allowing the customers to choose accessories or add-ons to their purchase.
The layer that appears when we click on “add to cart” speaks to us like a salesperson: “Do you need a protection plan, or an extended warranty? If there any, you can select it right here. Does the product you selected have any recommended accessories? Pick them up now!”
When we proceed to the cart page itself, we find the standard approach, however in every product line, all options – mostly services – appear again, so if you forgot to choose them earlier, or simply changed your mind, you can easily modify each item in the cart.
We also see a good use of additional icons and text to assure the customer they’re getting a good deal: “Includes free items”, “Eligible for 2% Rewards” and the price tag icon above “Available Savings”. These small elements add up to convince customers they’ve made the right choice.
The Callaway Gold Pre-Owned store is also interesting because it sells second hand golf clubs and accessories. In the first place, the “add to cart” method is very unique, because they don’t carry a typical stock. Instead, they sell a bunch of clubs with variable qualities from which a customer can choose the club they want to purchase.
However, the really interesting function on the Callaway Pre-Owned site is on the cart page; more than adding a list of products to buy, you can actually lower the price by adding your own spare items for trade in return for a discount! As you add each item you are trading to the cart page, the cost is subtracted from the subtotal.
For golfers who have a lot of spare clubs, they can order an item for free by trading in enough clubs!
And plus one for their cart icon too which is naturally customizes for a golf site to be … a golf cart…!
Tilly’s clothing shop is very simple and easy to use; the entire page shows the most necessary information, along with colorful pictures to engage customers.
There’s also a very handy and clever idea for the shopping experience. When a customer puts a product into the cart, a small layer expands at the right side, which includes the “Checkout” button. Using this feature, a customer can go directly to the checkout pages with literally no effort. This is a very good solution, especially to encourage impulse purchases.
The first thing that is very easy to spot on Godiva’s cart page is the design. The entire page uses three colors: white for the background, dark brown for the text, and gold for buttons and other elements.
Godiva’s cart page is clear and it looks good. The page is simple – it doesn’t use a lot of design elements and it’s easy to understand everything with a logical layout. The design makes use of a lot of free space and this creates an overall feel of elegance.
The other remarkable solution is moving to the next step: You can choose to ship the order to a single address, or to multiple ones. This is helpful for all customers, and especially helpful for a store where items are often purchased as gifts.
SkyMall offers a wide range of household furniture, and other practical devices. Along with the category page that features high quality images and resembles Pinterest more than a typical online store, the cart is a real jackpot.
When we add a product to it, a small layer expands at the right side – that’s common. Then, after displaying the first time, the layer will disappear. But, when we hover our mouse over the cart icon, they layer will appear again, and will stay visible as longs we keep our mouse hovering over the cart icon. This is a very handy feature, because I can see my cart without clicking, and only when I need to.
From this small layer I can go directly to the cart page, or to the checkout, and both look good too; for instance, the cart page is simple, clear and easy use.
Blinds.com sells shades, shutters, and other window treatments. They’ve got an interesting “add to cart” function that allows for customization. When we add a product to the cart, we aren’t redirected to the cart page, and we aren’t left on the product page either.
Instead, on a new page, we can choose the color, mount, and other features from a list of options. This is a good mixture of the “add to cart” button and product option handling. As the customer has already decided to buy the product, he or she only needs to choose the necessary options at the end.
7. Disney Store
Disney is a well-known brand worldwide. Although their store is mostly contains standard approaches to the “add to cart” function and cart page, it holds a good idea or two.
For instance, when you put a product into the cart – which is called a “bag” here – the confirmation is not shown in a pop-up layer or in the header. The confirmation is displayed right above at the “Add to Bag” button. And, more than merely informing you that the product is in the cart, the notification contains a button to instantly go to checkout!
It is so clever! If this is the last product you choose – or you just want to buy that one – this is really handy. All you need to do is click on the “Add to Bag” button, and the “Checkout” button appears so close to that. It’s a good trick to make it easy for a customer to complete their purchase.
Binoculars.com and Hayneedle.com use a similar structure and approach to ecommerce. The “add to cart” button on both sites has an interesting feature.
After clicking on “add to cart”, a new layer pops up, and while it is informing you about the selected product, it also offers products and accessories based on the selected product. Using this feature, customers can quickly increase the value of their cart by adding the linked products as well.
But this is only one idea for using additional features or marketing messages in the “add to cart” pop-up layer. You can also show discounts on shipping, coupons related to the additional products, package deals, and more.
The Orvis online store has a well-executed design. The entire design uses green and white colors, but it’s done so in a way that appears elegant here. The green is a nice light, real relaxing green.
The “add to cart” function, and the cart page are very simple and easy to use. But, the really interesting feature here is the charity function: after you choose the products you want to buy, you can round up the subtotal, to the nearest rounded number you choose. The difference is donated to a charity. This is a smart use of this function encourages customers to make a donation.
Sephora offers makeup and other skin care products, so it’s very important to provide something that’s tangible to their customers. With these kinds of products, it’s not enough to see them; customers often want to feel them too.
To accommodate this, on their cart page, the right side contains an assortment of free samples from which the customer can choose. Customers can choose up to three free samples which are added to the cart along with the other products. This is a great solution to provide value-add to customers and encourage them to try new products.
With online stores that sell cosmetic products and ecommerce stores in general, there is typically some discount offered. But only a few online stores build the coupon code into their page. Sephora provides a link right above the coupon code field. By clicking on it, a pop-up layer appears, displaying the actual coupon codes. This is a really good method to boost the buying mood of your customers.
The “add to cart” button and cart page are often overlooked when it comes to the design and functionality of an ecommerce store. Having a clean design that is simple, easy to use and in harmony with the rest of your site is the first step. From there, add features such as pop-up layers and customization options for your “add to cart” button and the ability to purchase add-ons and accessories on your cart page. Adding features like the 10 examples we looked at in this article and putting a little effort into these important parts of the buying process can go a long way towards improving the shopping experience for your customers and improving your sales. It’s a win-win.
(Note: Have you heard of OptiMonk? It’s a powerful onsite messaging solution that helps you convert up to 15% of abandoning visitors to sales and leads. Give it a try – click here to create a free acount.)