You already know your cart page is a vital cog in your ecommerce machine. But are your mobile cart pages – the page visitors see before they checkout – pulling their weight?

At Growcode we repeatedly find that cart pages are one of the most ignored parts of our clients’ stores, especially when it comes to mobile. And the consequences are significant, seriously denting their bottom lines.

Mobile commerce sales are expected to account for 52.9% of all ecommerce sales by 2021. Yet, in 2017, the average mobile shopping cart abandonment rate was a whopping 85.65%.

That means out of all customers that added a product or products to a cart, nearly 9 out of 10 left without completing the purchase.

#Mobile commerce sales are expected to account for 52.9% of all ecommerce sales by 2021. #EcommerceStats Click To Tweet
Cart abandonmentMobile leads on cart abandonment. Remember that aggregate data, as in the graph above, doesn’t account for sizeable differences between industries. Source.
In this post, we’re going to take a look at six examples of cart review pages. The first three utilize solid design practices that you should consider replicating, while the remaining examples include elements that are best avoided.

It’s also worth mentioning that while we’re focusing on the mistakes of certain shopping cart designs, it doesn’t mean that they’re completely terrible overall. Let’s dive in for mobile shopping cart best practices.

1. Do: Amazon

Amazon’s shopping cart for mobile websites is a brilliant example of done well mobile shopping cart design. It’s not crowded, but it’s not overly minimal either. All the necessary elements are included, without drawing attention away from the main CTA. There are also a number of unobtrusive “add-ons” that can be selected to increase the order value, from gift wrapping to related items.
Amazon cart designAmazon’s mobile shopping cart ux. All the necessary elements are included.

Tip #1: One clear CTA at the top of the page set in a contrasting color. As the user scrolls down, this CTA continues to float at the top of the screen.

#Mobile #cart optimization tip: Have one clear #CTA at the top of the page set in a contrasting color. #ecommerce #optimization Click To Tweet
Amazon CTAThe CTA floats at the top of the screen when the user scrolls down.
Tip #2: The CTA is screen-wide so it’s easy to tap it for both left- and right-handed users.
Tip #3: Reiteration of free shipping at the top of the page to allay any doubts and “sweeten the deal”.
Tip #4: Product images and names link to the description page for those who want to re-check product details.
Tip #5: There are clear and easy-to-tap buttons to change the order amount, delete items and save them for later.
Tip #6: The “In Stock” notification reassures customers they won’t have to wait for the product.
#Mobile #cart optimization tip: The 'In Stock' notification reassures #customers they won't have to wait for the product. #ecommerce Click To Tweet
Tip #7: Amazon showcases products that have been “Saved for later”, with an easy “Move to Cart” button underneath.
Move to cartItems saved for later are clearly visible.
Tip #8: Inclusion of related products – “Customers also shopped for” – that can be added to the cart without leaving the page. Additional plus for the design of this element as the third item is not fully shown and thus suggests a swiping motion.
Tip #9: Lots of white space and the absence of unnecessary “filler” details. Amazon has included only what’s absolutely necessary.
Tip #10: Link to the “Top of the Page” in the footer.

2. Do: Staples

The beauty of the Staples cart is its simplicity. Products can be reviewed in seconds. The result is greater emphasis on the options that are included.
Shopping cart designThe beauty of the Staples cart is its simplicity. One of the best mobile ecommerce carts.
Tip #1: Like Amazon, attention is drawn to the fact that the product will be shipped free of charge, both at the top of the page and in the payment summary. What’s more, the text is in green, which makes the notification stand out further. The exact date of “expected delivery” is also shown.
Tip #2: The design is ultra-simple and excellent use is made of white space. Customers can quickly check their orders, make any necessary changes without leaving the page, and verify the total.
Tip #3: The “Coupons and Rewards” box is unobtrusive. The important option to “pick up in store” is also provided without drawing attention away from the main CTA.
Tip #4: The word “Secure” is included in the checkout CTA.
Tip #5: The footer has been removed.

#Mobile #cart optimization tip: Remove the footer from your mobile #ecommerce #shopping cart. Click To Tweet

Is anything wrong? While Staples gets a lot right, one issue with this cart design is the simplicity of the header, which doesn’t include an expandable menu or search form. If a company only sells one product, this may be a viable solution. For multiple-product sites, however, it’s always worth giving customers the option to browse again if they want to.

3. Do: Sears

Sears offers a lot of additional options – including payment plans, in-store pickup, gift options and promos. Their cart is a good example for retailers who want to combine many different elements on one page without ruining the design that prevents from mobile shopping cart abandonment.
Ecommerce cart designSears mobile cart design contains a lot of elements but still keeps it simple.
Tip #1: A CTA is included at the top of the page alongside the subtotal. A lock icon further builds trust and the option to checkout using Paypal is also offered.
Tip #2: As a high-ticket item, payment plans are included to dispel any hesitancy at this stage.
Tip #3: Sale savings are included in red in the order summary section, encouraging customers to click through to checkout by building both urgency and reducing doubt.
Tip #4: A link is provided to log in to the loyalty scheme which acts as a further incentive for new customers. It’s important to note that this is not a link to set up a store account without any benefits, which would be better incorporated into the checkout form.
Tip #5: A “secure checkout” seal is included at the bottom of the page.
Is anything wrong? There’s just a little too much, and the effect is likely scattered attention for some customers. There is no need to offer magazine subscriptions and a link to the loyalty program at the bottom, for example.

4. Don’t: Vitacost

Though Vitacost utilizes a lot of the elements described above, their implementation is often flawed. The result is a poorly-designed cart page that would likely see an increase in shopping cart conversions with a few small tweaks.
Vitacost utilizes a lot of the elements described above but their implementation is often flawed.
Mistake #1: Inclusion of an obtrusive search bar which leads people away from the cart page. It’s a good idea to include a search bar icon (as in the Amazon example) for people who want to continue browsing. But don’t make it too large.

#Mobile #cart optimization tip: Don't include an obtrusive search bar which leads people away from the cart. #ecommerce Click To Tweet
Mistake #2: Automatic inclusion of unclear “BOGO” product (buy one get one half price) that may confuse or annoy customers.
MIstake #3: Obtrusive promo code bar. This distracts attention from the main CTA and encourages customers to leave the cart to search for promos online. Promo boxes should be visible but not overly so. They should certainly be after a CTA.
MIstake #4: The shipping cost is set as “TBD”, which fosters doubt (generally speaking you should avoid abbreviations)
Mistake #5: The footer is too large. Does Vitacost want customers to finish the purchase or download the app?
Mistake #6: Product options – for removing or increasing items – are far too small and difficult to tap.
Mistake #7: The floating bar, which can be seen right at the bottom of the screenshot, takes up too much screen space on smaller phones.

5. Don’t: Lonely Planet

Where the Staples page effectively utilizes a minimal design, Lonely Planet excludes too many elements. There are no features to reduce hesitancy and build trust, no recommendations or product suggestions to increase the value of the purchase, and many of the buttons are difficult to click.
Lonely Planet excludes too many elements. They are left with a lot of space that could be used to improve cart ux.
Mistake #1: Space is poorly used. It would be better to have the cart populate the whole page, and utilize white space, rather than pop-out over the current content.
Mistake #2: No information about delivery, discounts or payment options is included. These would likely diminish the doubts and fears of uncertain customers.
Mistake #3: There are no related product suggestions.
Mistake #4: The buttons to increase or reduce the number of products are so small as to be virtually unclickable.
Mistake #5: The CTA – “Proceed to Checkout” – doesn’t look like a button.
Mistake #6: The pop-out format makes it difficult to tap the CTA from the left. Let customers use both their thumbs!

6. Don’t: Nike

The main issue with Nike’s page is the way various elements have been randomly included, with little apparent thought for how they might work if placed together or at different points on the page. There is also confusion about the CTA.
On Nike’s page various elements have been randomly included.
Mistake #1: Shipping discounts are only available to members. This adds unnecessary friction and is likely to act as a disincentive to those customers that don’t wish to join, who will think they are losing out. Offer customers the option to log in at the checkout stage, along with the option to sign up for new customers. The cart page should be exclusively for reviewing orders.

Mistake #2: The use of two CTAs. It is almost always better to have one CTA on cart pages because you are seeking a specific course of action. The only reason to offer multiple CTAs is to give customers the option between different checkout options. It would be better to show a proper form (either a login form or an address form) after a user provides you with his email address.

Mistake #3: “Accepted payment types” are not listed near to the checkout CTA. It’s a good idea to include these badges on your cart page, especially if you’re not as well-known as Nike, but the footer isn’t the place for them.

Mistake #4: The term “guest” may lead to confusion if customers don’t self-identify in that way (can you become a member if shopping as a guest?)

Conclusion

Most top-performing cart pages have a design that is clean and simple, yet also provides the right type and amount of information. As you’re redesigning your own, keep in mind that the purpose of cart pages is for shoppers to review and confirm their order, removing any unnecessary items and adding similar products. Any other desired actions, such as logging into their account or signing-up, can be left for the checkout page. So remember about these mobile shopping cart best practices and other shopping cart optimization techniques.

And remember, split-testing is key! Use the tactics described here to form your own tests and make a commitment to tweaking elements over the long-term. If you do that, you’ll almost certainly see steady increases in your conversions.

Get the 115-Point Ecommerce Optimization Checklist

Drawing on eight years of experience, we gathered all our top insights into one book: The Ecommerce Optimization Checklist of a 7+ Figure Online Store. If you want to increase the performance of all your pages – from the homepage to checkout, grab your copy here.


Growcode Ecommerce Blog / Ecommerce Optimization / Dos and Don’ts of Mobile Shopping Cart Design: 6 Practical Teardowns (In-Depth Guide)

Leave your comment