Mobile E-Commerce Checkout Best Practices

Summary

This article explores the importance of a mobile friendly checkout and 12 mobile checkout best practices that can help you improve your mobile e-commerce site to drive conversion rates. (5 min. read)

Mobile-friendly checkouts are more important than ever for businesses selling products online. However, conversion rates on mobile device checkouts often suffer in comparison to desktop checkouts.

In fact, e-commerce platforms now have more mobile traffic than desktop traffic, yet, according to SmartInsights statistics, mobile conversion rates are half of those on desktops.

Therefore, if you hope to succeed in selling products online, it’s absolutely crucial to have a mobile-friendly checkout on your website.

 

Mobile Device Users

In this article, we’ll give you 12 actionable tips for delivering the perfect mobile checkout experience.

 

Why you need a mobile-friendly checkout

So why are conversion rates so much lower on mobile devices?

One possibility is that many customers use their mobile devices as a means of browsing on the go, such as at a coffee shop or while using public transportation, and wait to buy until they get home.

However, they might forget to complete their purchase, change their mind between browsing and getting home, or not bother to finish checking out at home because the items they’ve selected haven’t been saved.

Plenty of e-commerce sites offer a poor user experience and a frustrating checkout process, which can lead to abandoned shopping carts. Therefore, a quick and easy mobile checkout is key to building your business’s brand and converting customers.

 

Best Practices for a Better Mobile Checkout

Here are 12 surefire ways to improve your checkout user experience to make it mobile-friendly and increase your conversion rates.

 

#1: Reduce clicks leading up to checkout

Added clicks while customers add items to their cart can result in wasted time and a frustrating user experience.

One way to reduce clicks when a customer adds items to their cart is a temporary or permanent pop-up showing the customer that they’ve successfully added the item. A temporary pop-up eventually disappears on its own, while a permanent pop-up requires the user to close it.

 

Mobile Checkout Add to Cart Example

 

(As shown with PerfectSense.ca after someone has added a product to the cart, they are automatically shown the contents of their cart, but can close out and continue shopping by clicking on the X at the top right).

If you’re unsure about which to use, statistics from Growth Rock show that about half of popular e-commerce sites use a permanent notification, but that there’s little difference in conversion rates or AOV (average order value) between pop-ups.

 

#2: Ensure a fast site speed

People on their mobile devices tend to be on the go. A slow website can be detrimental to conversion for any website, but that is especially the case on mobile.

 

Mobile Checkout Best Practices – Mobile Page Speed

 

Statistics from Crazy Egg show that page load times of over three seconds cause 57% of users to abandon their cart, so it’s imperative to make your site as speedy as possible.

If you need to improve your website speed, check out our previous article on how to speed up your Shopify storefront.

 

#3: Add upsells to your checkout

Adding ‘upsells’ to your checkout, or recommendations to customers for similar items they already have in their cart, have the potential to increase AOVs.

 

Mobile Checkout Best Practices – Add Upsells to Mobile Checkout Flow

People who are in a shopping mood can easily be enticed by an attractive upsell offer that shows them something else they might really enjoy.

According to A/B tests from Growth Rock statistics, AOV can improve significantly when upsells are added to a shopping cart—but not for every business.

However, no tests showed AOVs decreased when an upsell was added to checkouts, so this may be a good way to increase sales for your business and something you may wish to test yourself.

 

#4: Make it easy to add or remove items from the cart

It can be incredibly frustrating for shoppers if they have a hard time changing the products in their cart.

 

Mobile Checkout Best Practices – Change Quantity or Remove Products

It’s important to give users the option to change the quantity of their purchase easily, and to provide a “Remove” button next to each product in their cart on mobile and not force them to reduce the quantity to 0 in order to remove it.

It’s also important that the cart updates automatically once quantities are adjusted and that customers aren’t required to make an extra tap to an “Update Cart” button to make the changes.

By making it easier to change the contents of their carts, mobile customers are more motivated to buy and won’t abandon their carts.

 

#5: Highlight savings by product, not by order

Customers like to see the savings they’re getting on any given order, such as with a coupon or promotion, highlighting the product savings versus the total checkout savings.

 

Mobile Checkout Best Practices – Highlight Savings

However, statistics from Growth Rock show that seeing savings at the product level is significantly more important to customers’ AOVs than the total savings shown at checkout, as customers feel like they’re getting more of a deal when they can see savings on individual products.

If your mobile site doesn’t have savings shown at the product level when a promotion or coupon code is applied, adding this item is an easy way to improve AOVs.

 

#6: Create easy access to checkout buttons

Quick and easy access to checkout on mobile will ensure a seamless experience for your customers.

Statistics from UX Matters show that 49% of users hold and interact with mobile phones with one thumb. Therefore, it’s important to add action buttons like “Check Out” buttons where they appear at the bottom of the screen so that the user doesn’t have to stretch their thumb. 

 

Mobile Checkout Best Practices – Tappable Buttons

 

However, it’s also important that the button is fixed and not so far down the page that the user has to scroll to get to it. If you can’t make the button fixed, a way to do this is to put checkout buttons “above the fold”—what the customer sees on the page without having to scroll—which is standard for many mobile e-commerce sites.

 

#7: Save customers’ carts

Since mobile users are way more likely to abandon their cart, a “Save Your Cart” feature on your mobile site that captures an email address is key for conversions. 

 

Mobile Checkout Best Practices – Automatically Save Carts

 

One Growth Rock test saw a 250% increase in account creations by adding a save your cart link to checkout. If possible, add a prompt that will ask users when starting a new session if they’re missing items in their cart and ask them to sign in.

Ideally, this function would save users’ carts up to 30 days to help them return to their purchase and convert sales.

 

#8: Provide a guest checkout

According to Econsultancy, not having a guest checkout option and forcing users to sign in or create an account can kill your conversions. Only giant brands like Amazon can get away with no guest checkout. 

 

Mobile Checkout Best Practices – Allow Guest Checkout

 

Make sure you have this guest checkout option available for customers and that it appears above the fold.

Also, if possible, see if integrating checkout options through Facebook or Google up your conversion rate.

 

#9: Show a clear estimate of total costs

As we discussed in our blog about the importance of offering free shipping, customers don’t like hidden or surprise costs at the end of checkout and this can lead to abandoned carts. 

 

Mobile Checkout Best Practices – Clearly Show Total Costs

 

Make the estimated shipping costs, taxes and total price clear and above the fold. Ideally, add an option to collect the user’s current location to determine sales tax and delivery costs instantly.

If possible, next to or close to shipping costs, show estimated shipping arrival for orders that can ship quickly, which might increase customer conversions if they can see how quickly their order will arrive.

 

#10: Reduce distractions at checkout

As we mentioned earlier, mobile users are often in settings such as coffee shops and on public transportation, which can be highly distracting. Keeping distractions on your site to a minimum will help your customers stay focused.

 

Mobile Checkout Best Practices – Reduce Distractions

 

For example, a “Continue Shopping” button in the cart isn’t useful in the cart, since users can just tap the back button, click to the homepage or use the full navigation. If you currently have this on your site’s checkout, consider replacing it with a Save Your Cart button.

Also, try removing your full navigation from the mobile checkout page to reduce distractions.

 

#11: Reduce time spent checking out

Cutting down on checkout time is also crucial for keeping users happy and focused. 

 

Mobile Checkout Best Practices – Reduce Checkout Time

 

Some of these best practices include:

  • Incorporating address detection into checkout;
  • Adding instant field form validation that will let users know right away when a field is formatted incorrectly, rather than forcing them to submit at the bottom of the page before identifying the incorrect formatting;
  • Implementing specific keyboards like number pads for phone numbers or email keyboards for email address entry;
  • Automatic credit card detection;
  • TabIndex (Next/Previous) buttons in the keyboard so users can easily transition from field to field;
  • Limiting long dropdowns on things like credit card expiration date; and
  • Avoiding long checkout pages by only incorporating fields that are absolutely necessary and breaking it up into multiple pages while making it clear to customers where they are in the checkout process.

The more of these options you can incorporate into your checkout, the faster the experience for the customer will be and the fewer customers you’ll lose.

 

#12: Offer multiple payment options

Having different payment options can be great for customers who are somewhere public and can’t physically pull out their credit card (or who might be too lazy to get off the couch!).

 

Mobile Checkout Best Practices – Payment Options

 

Try testing the effect of offering PayPal, Google Pay, and Apple Pay on conversion rate. Make it an option to both check out and pay with these options.

However, don’t overwhelm customers with too many payment options. Make the buttons clear where they lead if users will leave your site and make the most common payment option(s) the most prominent.

 

Improve Your Mobile Conversion Rate Today

Mobile Friendly Checkout Design Best Practices

 

After reading this article, you should have plenty of ideas about how to improve your mobile conversions for your e-commerce site.

However, if you’re working with Shopify and you’d like expert guidance to help you implement these changes, Marketplace Solutions can take care of improving your mobile site for you to drive sales.

Contact Marketplace Solutions today to discuss how we can help build your mobile e-commerce business! 

Get Started >

 

Ask us how

New to Shopify?

Try Shopify Free 14-Days

Stay Connected

Laisser un commentaire