In doing this roundup we wanted to see how online retailers approached the layout of their shopping cart pages. Such pages are so critical to the customer purchase process, however, they often feel as if being thrown together without much concern. Yes, the shopping cart page is very hard to design well.
Ideally, it should include product summary, promocode field, multiple paying options, shipping methods, final pricing, privacy and return policy, complementary products, continue shopping or proceed to checkout links, and more of this important stuff.
Attention Shopify Theme Makers!
Start selling your Shopify themes at the TemplateMonster marketplace. Enjoy author-driven pricing and high commissions. Get a share of up to 70% for exclusive items, and 40% for non-exclusive ones.
Shopping cart must be considered carefully during the design process because the future success of your work directly depends on how well you manage to drive customers to the checkout stage.
UI Tips For Web Design Enthusiasts [Free Ebook]
By clicking the button you agree to the Privacy Policy and Terms and Conditions.
The main objective of each shopping cart page is to lead the customer to the checkout, but how you can do it more effectively?
This article was first published in 2011 when we picked 42 well-known online stores to analyze them and bring you the statistics on their cart usability. But times change and the approach to shopping cart design has changed too. So, we decided to visit the same online stores once again to check the changes made to their shopping cart pages for the past 4 years. Surprisingly, most of the pages became simpler and more minimalist. You won't see arrows and additional icons even on the buttons of the largest eCommerce stores, and a laconic "Checkout" is now used more often. Today's examples illustrate that online retailers mostly:
- highlight the checkout button with color (26 times);
- sometimes they embed visually complementary arrows (4 times);
- or add shopping cart icons (1 time) to the textual call-to-action.
Plus, the checkout button inscriptions may be different:
- in the majority of cases we see word 'checkout' (24 times);
- other popular words are 'proceed to checkout' (10 times);
- 'proceed to purchase' (2 times);
- 'proceed with your order' (1 times);
- 'go to checkout' (1 time);
- ‘proceed’ (2 times);
- ‘check out now’ (2 times);
- ‘begin checkout’ (1 time).
Security seals became particularly popular as they increase the trust and credibility of a store in 50% of customers. In a study conducted by Baymard Norton appeared to be the most trusted one with 35.6%, McAffee is a runner-up with 22.9%. Still, only 12 stores from our list use such seals.
When the users choose to checkout, they need to be presented with a final list of items on the order, as well as options as to how they want to pay. You may see that not all the shopping cart pages in this list include the logos of the credit card next to the payment option; this aspect, however, would have been highly convenient. Plus, consider - a good shopping cart needs to have secure seals (we spot them scarcely here) to ensure safe transactions and good security standards.
Considering all these aspects would be a lot better from a customer standpoint, so it is definitely important to really take the shopping cart to the right level. Now you can get some useful ideas from observing how other shopping bags are created. We've helped you out a little bit by gathering up 40 examples that represent efficient shopping cart designs. There is no doubt that they provide customers with a pleasant purchasing experience.
42 Best Shopping Cart Page Designs
1. Yoox.com
2. AE.com
3. Store.Nike.com
4. FaucetFace.com
5. DeathWishCoffee.com
6. Apple.com
7. Gucci.com
8. Skinny-Teatox.com
9. SurfDome.com
10. RalphLauren.com
11. MarcJacobs.com
12. Shop.AcneStudios.com
13. Shop.Guess.com
14. JuicyCouture.com
16. TopShop.com
17. NoonCopenhagen.com
18. FlatSpot.com
19. UO.com.au
20. US.Burberry.com
21. Store.DolceGabbana.com
22. Triangl.com
23. NeedaBump.com
24. ShopAdidas.com
25. Crocs.com
26. Case-Mate.com
27. JCrew.com
28. CardinalCase.com
29. Zappos.com
30. Shop.Mango.com
31. NeimanMarcus.com
32. Fossil.com
33. Tiffany.com
34. US.Faconnable-Store.com
35. Store-US.HugoBoss.com
36. USA.Tommy.com
37. ShopBop.com
38. FredPerry.com
39. CharlotteRusse.com
40. ShopAdam.com
41. BobbiBrownCosmetics.com
42. TheGreetingFarm.com
All aspects of a shopping cart design are important. Here’s the checklist you may have at your disposal to compare and see whether your cart is adequate.
1. Product summary – there should be an image of the product, its name, additional descriptions (size, color, etc.), items quantity, price, an ability to remove the item from the shopping cart or edit its features like size, color, or price.
2. Shipping methods – do you include them, mention the difference among the options, indicate their prices?
3. Promo code field – if you allow using the promo codes, make sure that you have a section for it on the shopping cart page. As the promo code decreases the price – that will positively affect the customer’s purchase decision.
4. Final pricing – whether you have it or not, does it include the cost of all products in the cart + delivery. The customers must see the total amount of money they need to pay for the order, to avoid unpleasant surprises within the checkout process that may cause a sale break.
5. Multiple paying options – if you accept different payment options, you should include them all, but you must not burden the customer to make a decision out of 10 payment systems. Ideally, you may offer two payment options, which are most popular among your customers. If you are the USA-based retailer, it's a must to have PayPal as a payment option since it's the most popular payment system in the US. However, it is not overall suitable, plus it has a high percentage rate for card processing. So, you'd better offer additional payment option that will accept payments through credit cards. Consider adding icons next to your payment options (PayPal icon, credit card icons). Thus, the customers are assured that you have a trustful store and they can carry on payments themselves.
6. Secure seals – if you have The VeriSign Seal or McAfee Secure Seal, you need to place them on the shopping cart page. This would be an extra sign that customers can trust you. These seals are however available as payable options. The free alternative is to place on the checkout button an inscription – 'Proceed to secure checkout.'
7. Privacy and return policy – remember to include the links to these pages. It is also preferable that they are opened as pop-ups (not as new tab pages), so that customer will not abandon the page.
8. Complementary products – offer complementary products, which is needed to be done to increase your average sale or 'transaction value.' Yet remember, to maximize the result the products must be really complementary, not the ones that remain unsold in your store. A better way is to offer a discount for the complementary product, and one more important point – the price for the complementary products should be less than 50% of the main product price. Thus, the customers will feel comfortable to spend an extra sum of money to improve their experience with the main product. Plus regarding that you offer a complementary product discount – the total sum will not therefore much exceed the amount of money a client was intended to spend.
9. Continue shopping – this is a highly important link to include as it gives customers an opportunity to keep on filling their shopping cart with more products.
10. Proceed to checkout link – this is the most important button on the shopping cart page. Your task is to attract attention to it – how? You may accent the button with color, to make it the most conspicuous on the page, and bigger its size. What do you have as an inscription – boring 'checkout'? You should imply call-to-action, for instance, simple 'checkout now' or 'proceed to checkout' is far better. Note that with the help of a 'secure checkout' button inscription you can raise the trust in your eCommerce website (that is especially vital if you don't use secure seals).
To find the unique combination of design, textual stuffing, complementary products, you need to experiment. Use different inscriptions, colors, checkout button sizes, placement for complementary products, and so on. A good adviser to evaluate your work may be Google Website Optimizer we have wrote about lately.
e-Commerce Templates and Their Shopping Cart Designs
Launching an online store, or, in other words, adding e-Commerce functionality is a low-cost way to inform the world about your business on the Internet, as well as to find new customers and increase your profit. When creating your online store, pay attention to the design of your site. An attractive, fully responsive, and highly functional e-Commerce template is a great catch to build a web store that allows you to represent your product online and boost sales with no effort and time. e-Commerce templates include WooCommerce themes, Shopify themes, Magento themes, OpenCart templates, PrestaShop themes, and etc. Developers focus their attention on the functionality of the “add to cart” option on the website and the cart page itself. All these types of e-Commerce ready-made templates are designed with a fully-functional and customizable shipping cart since it is very important for any online store. Let take a closer look at e-Commerce cart solutions implemented in the following templates. Grasp some ideas and pick up your favorite product to build a successful online business.
WooCommerce Themes
Nella Fashion Shop WooCommerce Theme
Digita
The following examples of the shopping cart pages show that the design is clear and simple enough to ensure a faster checkout experience, with less interruption. That means more sales and more satisfied customers for your business. A photo of the item, product description, price, quantity, total, and cart totals below are included. Coupon can also be added if available. ‘Update cart’ button allows to apply any changes and update your shopping cart. Customers can add or remove products from their cart and complete payment once it is convenient for them.
Woostroid2 - Multipurpose Elementor WooCommerce Theme
Woostroid2 is another magnificent example of a minimalistic shopping cart template. The theme has 73+ skins and over 100 pages that you can use for your store creation. There are no limits to your ideas - you can drag & drop, combine them, play with headers and footers, change colors, etc. You also receive a set of JetPlugins for Elementor Page Builder, Contact Form 7, WPML-ready layout.
OuiOui - Multi Vendor MarketPlace
Marketplaces are popular nowadays, as it helps manufacturers get maximum profit from all the available resources. At the same time, it’s a gold mine for owners, as their shop has products for any taste and pocket to cover more audience. The OuiOui theme is unique, as it has pre-made layouts for top multi-vendor WordPress plugins, as the author’s page, shopping cart template, store list, dashboard, etc. All you would need to do is to install Dokan/WC Multi-vendor plugin and configure it - voila. Your marketplace is ready to go!
Stoneware - Ceramic Store
This shopping cart template doesn’t have elements that may steal attention from the main website purpose - converting. Modern icons, stylish fonts, and correct color accents make one rhythmic pattern that is pleasant to look at. Here, the client can apply the coupon code, modify the number of items, check the pre-order total, and add a comment.
Smelos - Coffee Shop
Coffee is a gourmet drink. To get your potential customers interested in the first look, you need a sophisticated design you want to study and consider. The Smelos layout is just that - it mesmerizes and makes the user browse through the pages because each of them has its flavor. With such a shopping cart template, the shopping process will bring maximum pleasure to your users.
Lexicon - Art and Gallery Shop
Lexion theme is a perfect way to express your uniqueness and individuality. It’s a laconic layout made especially for arts-n-crafts studios. If you are a fan of minimalism, such an option is an ideal tool, as here you get all-in-one - high loading speed, elegant design, and flexibility in functionality. It has must-have features for convenient shopping - user’s account, fast checkout, wishlist, and intuitive navigation.
EXLIBRIS - Book Store
EXLIBRIS is probably the most unusual design for the bookstore. It has an original style with a trendy left sidebar static navigation - you can always come back to any point of the website without a need to browse the breadcrumbs again. Even from the shopping cart, all menu categories are reachable in one click. Subtotal and item preview is in the pack, so everything is ready to provide the buyers the best customer experience.
Shopify Themes
E&E
Tennisa
With Shopify templates, it is easy to make your shopping cart design stand out. A simple, secure, glitch-free checkout process is essential to the long-term success of your online store. Note, if your customers are led through a very minimalistic, untended process, it might upset the entire order and they will leave the checkout process, abandoning their cart with completing their purchase. One-page checkout presented on the examples below makes it possible to turn any page into a checkout page. It also makes it easier for your customers to buy from these custom checkout pages by displaying both product selection and checkout forms on a single page.
StoreGo Shopify Shopping Cart Template
The clear and fancy layout of the StoreGo Shopify theme makes it easy to go through the purchase. It has a bright color scheme with the right accents on the most important details, as “Continue Shopping,” “Update Cart,” “Checkout.” Due to such a solution, they serve as the call-to-action for clients, simultaneously navigating them through the website. The design is easy to install and edit, with an intuitive interface and page builder, so there won’t be any issues with placing your content.
Poveria - Fashion Store
Minimalism is always in trend, so buying such a design means walking with the times. It’s clear, black-and-white, without any extra color accents that may grab the customer’s attention and distract them from making the purchase. The “Checkout” button steals your sight, and all you want to do is to proceed. And that is what every seller wants!
Bulk - Wholesale
This option is perfect for wholesale and bulk sellers, as here, the client has an opportunity to add the necessary quantity of items and request a personal quote. The layout is clear with transparent navigation, which leads from point A to B straightforwardly. Just connect your payment gateways and enjoy a handy shopping cart template in action!
Art House - Art Gallery Shopify Theme
Every artist knows that it is essential to stand out from the crowd with your crafts. With the Art House theme, it is easy to showcase your gallery, set them for sale, and collect new leads. The shopping cart has a clean layout, where you can place the extra tips and messages to your buyers, as the currencies, shipping rules, etc.
Magento Themes
Magetique - Furniture
Volta
Take a look at Magento theme shopping cart, which assists the online entrepreneur to run a smooth web store functioning. With just one click of a button, a client can add items to his cart and check out a quick view without leaving the current page. Also, such shopping cart lets customers add products to carts instantly without multiple reloads of the same page. Such an approach is designed to improve an online stores usability, page performance, conversion rate, as well as cope with a shopping cart abandonment.
PrestaShop Themes
Eveprest
Prestige - Fashion
Designs of PrestaShop shopping carts guarantee a convenient and fast ordering process. A powerful AJAX cart along with responsiveness, comfortable navigation, quick view allows you to introduce your business online and win the game. Prestashop AJAX cart popup module shows a responsive popup on "Add to cart" action. It is fully customizable and admin can show banners, related products, and best sellers in the popup. The page is simple – it does not use a lot of design elements and it is 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.
OpenCart Themes
Altron
Funi
Shopping cart design implemented in OpenCart themes is rather simple and easy to use. As you can see, such a clean design is in harmony with the rest of your site. It can be easily customized to improve the shopping experience for your customers and increase your sales. When a customer puts a product into the cart, a small layer expands at the right side, which includes the “Checkout” button. Also, such a shopping cart suggests to proceed further and choose if you have a discount code or reward points you want to use or would like to estimate your delivery cost.
ZenCart Templates
Spare Parts
Empire
Zen Cart is widely preferred over a number of commercial carts available in the market today. Here you can see a shopping cart with great merchandising features to run a bigger web store. Zen Cart offers seamless integrations with popular gateways. That means, once your site is ready, you can start accepting payments from the get-go. Fully customizable shopping cart solution allows to edit your shopping cart to your taste and business preferences.
FAQ
It is the last stage the customer has to go through to buy your product and if it will be inconvenient – the client will just refuse to finish the purchase.
- The list of chosen products
- The promo code bar
- Payment options
- Shipping details
- Final price calculator
- Related products
- Buttons to continue shopping and proceed to the checkout
The more – the better. However, you should pay attention to your capabilities to maintain all those payments. So, add as many payment systems as you can handle.
Read Also
WooCommerce Shopping Cart: Everything You Need to Know
How to Save Abandoned Shopping Carts in WooCommerce
Which is The Best Shopping Cart to Use With Joomla?
6 Things to Keep in Mind While Planning to Launch an Online Shopping Store