codal insights

How To Prevent Shopping Cart Abandonment On Mobile

August 7th, 2019

Unfortunately, 69% of eCommerce shopping carts are abandoned. While cart abandonment happens on all devices, it happens more frequently on mobile, at a rate of 81%.  These statistics beg the question: how do you prevent cart abandonment when customers are shopping on their phones?

You create and maintain mobile sites and apps using the best practices from leading  eCommerce mobile app development and eCommerce website design and development agencies, like Codal. While the best practices detailed below are not exhaustive, they’re certainly an important place to start. They will cover prevention measure specific to the checkout phase, as well as elements independent of it.


Shopping cart abandonment typically occurs during checkout. Checkout design must be geared towards speed and efficiency for customers.

Form Fields and Input Interactions

First and foremost, reduce the number of form fields. 

The checkout process is only made possible by form fields. However, having them in excess is detrimental to the checkout process and can result in cart abandonment. Fewer form fields not only speeds up the checkout process, but also gives shoppers  less work.

A multitude of form fields displaces information, making it harder to keep information consistent and accurate, and as a result a greater chance for providing the wrong information. 

Make sure to provide keyboards that correspond to the form field they’re supporting. For instance, if the form field is for a phone number, give users a numerical keyboard; likewise, if the form field is asking for an email, provide an alphabetical keyboard that includes “@” and “.com” keys.

 Another way to make completing forms easier is via autofill.

Example of a keyboard corresponding to the form field it wishes to fill (source).

Manually filling out field forms increases the potential for input errors and is time consuming. But designing for autofill capability eliminates these pain points that annoy customers during checkout. 

Example of form fields autofilling (source).

It’s worth noting: Safari is currently the most used mobile web browser as of April 2019, but those using iPhones will need to change their settings to enable autofill as a default. However, Google Chrome, the second most popular mobile browser, autofills by default.

If you’re unsure whether or not to cut a form field, or if you just want to make sure your fields are as user-friendly as possible, refer to this checklist:

  1. Needed or needless: Is the form field absolutely necessary?
  2. Description: where is the label? Is there placeholder content still present within the field? Is the form field labeled required (*) or optional?
  3. Visability: is the form field easily visible? Is the entirety of the form field visible when the keyboard is present?
  4. Autofill: provide field defaults based on available history and/or frequently used inputs and values 
  5. Typing: is copy and paste into the field permissible? Which keyboard is appropriate for the field?

Use this checklist while reviewing each and every one of your form fields. Yes, this takes time and seems like a lot of work. Well, it is. But these are important questions to ask and address early on in the design process. 


There ought to be no surprises for customers before, during, and after the payment process. 60% of shopping carts are abandoned due to hidden costs, leaving users feeling deceived and cheated. 

When designing your mobile online store, make all costs visible before the transaction even starts, including shipping fees, taxes, and any other extra costs relevant to the purchase. Another way to remain transparent with customers is by including a price calculator, so they can see all their charges and totals.

Shopping cart abandonment is reduced by 8% by simply providing more than one mobile friendly payment option. While some options may be more popular than others, not all users will want to use the same payment option. However, one thing is for certain: no one likes fumbling around trying to enter their credit card information into form fields.

Easier and more mobile friendly options should be offered to customers completing transactions on mobile. Solutions include PayPal, Apple Pay, or Amazon Pay, all of which can be performed at the singular click of a button. Even Venmo is now a mobile eCommerce payment option for Shopify merchants! 

And instead of entering credit card information into form fields, designers can incorporate the ability for users to take pictures of their credit card in order to populate the information to complete the transaction. This kind of functionality mitigates the potential for human error caused by manually typing in credit card information, as well as expedites the payment process, which satisfies users desires for a speedy checkout.

Remember to be careful as to not offer too many payment options. Customers overwhelm easily. Given too many options users will bail on the sale all together. 

Optimizing For Mobile

Until now, the topics covered have been concerned with checkout specifically. However, there are other elements that contribute to mobile eCommerce cart abandonment. 

The mobile user experience is drastically different from that of the desktop user experience. Differences between desktop and mobile experiences include interaction techniques, readability of the site, reason for visiting the site. It’s these differences in the context of eCommerce that dictate a purchase or cart abandonment.

Designing For Touch

Designing for touch is a major priority for any mobile optimization project. Instead of clicks, designers need to consider gestures, which are physical movements made by the user in order to activate a specific function. Executed properly, gestures provide efficiency and ease during the mobile shopping experience.

Reference of common gestures made by users courtesy of The Next Web.

Likewise, designing for touch also means taking thumbs into account, as they are the primary point of contact between user and  phone. The placement of the most important elements of mobile eCommerce sites or applications should  be contingent on how customers hold their phones, and where their thumbs land as a result. 

Heatmap demonstrating where thumb placement typically occurs.

Take the Amazon screenshot below: Amazon’s placement of important elements is in accordance with the heatmap above as the logo and subtotal are in a harder to reach area; whereas the checkout button and other products are within an easily accessible zone.


67% of mobile users will leave a mobile site due to poor navigation. Successful mobile navigation is discoverable, accessible, and requires little screen space. 

The homepage is usually the designated navigation epicenter of a site, especially for task-oriented sites like eCommerce. Homepages must include a search function for more specific navigation. 

There are (generally speaking) two types of shoppers: those who browse your site’s catalogues and those who know exactly what they wish to buy; these shoppers are the ones who benefit most from the search function. 

Mobile guidelines for the search functions include a text box and a “search” button. The text box should be able to handle up to 20 characters. If after someone uses the function and there are no search results don’t give users a blank page. Instead, provide a brief “no search results” message in addition to recommended products. 

Often adjacent to the search function is the navigation menu, which should answer the following four questions:

  1. Where is the user?
  2. Where else can the user go?
  3. What will users see when they arrive?
  4. What can the user do when they get there?

Design a menu that is as intuitive as it is informative. Additionally, the navigation menu should be consistent throughout the entire mobile site. How the menu looks on one page should be how it looks on every page. Consider the various types of menus and which one would best enhance your mobile eCommerce site.

Shopping Cart Abandonment: Goodbye Forever?

To completely eliminate shopping cart abandonment from your mobile eCommerce site is impossible.

Therefore, ensuring a positive mobile experience is imperative. Customers who had poor experiences on a particular mobile site are 62% less likely to make purchases on said site in the future. But with the implementation of design best practices, like the ones detailed above, preventing shopping cart abandonment is doable.

Whether your mobile eCommerce site or application is up and running or it’s in the development stage, consider user experience research services or an audit in order to figure out where and how you’re either succeeding or lacking in terms of the best practices above.

For additional solutions and support, consider contacting an eCommerce web development company, like Codal.

Lia Bischoff


Lia is a Content Writing Intern at Codal. Fascinated by the intersection of design and technology, Lia writes about development, usability, web design, innovative technology, and industry best practices. During her free time, Lia can be found reading books (slowly), playing chess (poorly), and doing an ungodly amount of CrossFit (relatively well).


codal insights

3 Signs You’ve Officially Outgrown Your Ecommerce Platform

codal insights

How To Prevent Shopping Cart Abandonment On Mobile