Shopping Cart Design: 9 Ways to Prevent an Abandoned Cart

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

Test this stuff out is it working like it should I don't know can you help me figure it out if it isn't?

Test

Test

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

H1

H2

H3

H4

H5

H6

‍

Let’s say you own a brick-and-mortar store. What if, every day, you watched your customers come in and spend 10-20 minutes browsing, comparing, and filling up their carts. Then, once they got to the checkout line, 70% of them just up and left!

To say nothing about who cleans up all those abandoned carts, such a phenomenon could utterly destroy a business. And yet, that’s exactly what ecommerce stores must endure every single day on their checkout page.

A fascinating Baymard Institute study places the average abandoned cart rate at 69.23%, especially on the checkout page, when there are a lot more reasons to get skittish. In fact, the same study also revealed the top reasons for abandonment during checkout. Discluding window-shoppers who never had any intention to buy, here’s what the poll found:

Among other things, the results of the study show us that checkout abandonment is not random or unprovoked; it’s actually quite predictable. Most shoppers abandon for the same reasons, and many of those reasons are surprisingly easy to fix with a proper shopping cart design.

These aren’t the only numbers crunched in the study; the Baymard Institute also calculated what the average ecommerce store has to gain through reinforcing the fundamentals of shopping cart design, based on estimates for a normal large-sized company.

By employing checkout page optimization techniques, the average ecommerce site can increase their conversions by 35.26%.

Apply that figure to the $738 billion in US and EU online sales from 2015, and you have $260 billion in total sales lost because of inadequate shopping cart design.

So what kind of checkout page optimization techniques reduce your abandoned cart rate? In this article, we list the 9 most effectual methods to keep shoppers and their carts from breaking up.

9 Master Techniques for Checkout Page Optimization

These shopping cart design tips provides the best solutions for preventing an abandoned cart.

1. Reduce Redundant Steps

According to the Baymard study, 27% of abandoned carts happen because the process is too long or complicated. Your first step in checkout page optimization, then, should be simplifying the whole darn thing.

A good start is to list out all the steps in the checkout process and identify redundancies. Be meticulous — account for every click, every moment of hesitation, every second spent scanning the screen for the next step.

With the list in front of you, you’ll be able to spot opportunities for getting rid of steps. For example, you could open a page with the cursor already inside the first form field; this way, your visitors don’t have to click in the field to activate it, they can just start typing directly.

As a rule of thumb, if you don’t need it, don’t ask for it. If you don’t need their telephone for an essential reason, that’s one less form the shopper has to fill out. Once again look for redundancies. For example, you can determine the shopper’s city and state just by their zip code — that’s two less forms the shopper has to fill in.

Last, it should go without saying, but have the option to copy the shipping address to the billing address. Filling out the same information twice is a needless chore that’s guaranteed to lose you more than a few sales.

2. Guest Login

The Baymard study also shows just how much people hate creating accounts — so much so that 35% will abandon their cart first. Luckily, it’s easy to satiate this third of your customers: just allow guest logins.

Guest logins require only the minimum amount of user information to complete checkout. This makes the process a lot faster and easier, harking back to our first technique. It also placates some of customers’ inherent ecommerce doubt, particularly new shoppers; guest login means the shoppers retain at least some of their privacy.

Additionally, you can offer social media login. This login shortcut may not retain privacy, but it does save time and spare the hassle of filling in the same old forms over and over.

3. Full Transparency

Online shopping comes with extra fears than in-person shopping. There’s a abysmal degree of separation between buyer and seller, and shoppers are essentially giving their credit card number and home address to a complete stranger miles away. On the checkout page, the last chance to escape, all these fears come to a boiling point.

To combat these inherent disadvantages, online merchants should be as open and honest as possible. Here are some ways to establish trust during and before checkout:

Price Up Front. Designers from the Dark Side — which is to say, designers who use Dark Patterns — will tell you it’s best to hide the price from your shoppers so they don’t get squeamish about money. But that’s counter-intuitive: appreciation helps you more than deception. Show prices upfront on the checkout page and let your customers decide. Even if they ditch this particular sale, they still might come back, whereas purposefully frustrating your shoppers leads to burnt bridges.

Live Chat. The ecommerce answer to a sales assistant, it always comforts a customer to talk to an actual person if they’re confused.

Information for Questionable Forms. “Why do they need my telephone number?” You don’t need to derail your whole shopping cart deign to answer this question: a small icon and hover text is all you need.

As always, you don’t want to sacrifice the universal UX just to make an extra sale or two.

4. Responsive

The age of desktop is over. This is the era of mobile, and responsive sites are no longer a luxury but a necessity.

The best strategy for responsiveness is to design the whole site with a mobile-first approach. Planning your site around the smallest screen from the start forces you to single out and plot only the most important elements first. The secondary elements that only appear on desktop are added later, after the main elements are already firmly established.

But hands down the most useful strategy for responsive ecommerce sites is saving the cart automatically. According to Think with Google, 90% of users start a task on one device and finish it on another. That means shoppers place items in their cart on mobile, where they can browse comfortably from their couch or wherever, and then switch to desktop for checkout, where the keyboard makes filling out forms easier.

Putting it all together, you can see that almost all of your customers will use the mobile version of your site at one point or another. Make sure it’s up to task.

In Divvit, you can easily see and compare how many mobile and desktop users your site has. Simply go to the Analytics Explorer and select “Device” under Dimensions.

5. Testing

You always want to test your designs with actual users to determine, quantitatively, how successful they are.

A/B Tests can settle disputes with concrete data. In this type of test, users are given different versions of the same screen with a single variable changed. This reveals with statistical evidence which screen performed better so you know how to handle the tested variable.

You can even conduct your own DIY A/B tests with Divvit. Design your two different versions and make sure they’re each live for equal amounts of time. Try to give them the same time periods as well; testing one version on Monday and the other on Tuesday may disrupt the results, as Monday may be a different kind of sales day than Tuesday. After each version has had it’s turn, simply check the analytics to see which performed better.

6. Regional Considerations

Despite what you may have heard, business is personal; good business leaders consider the personal preferences of their customers.

One such consideration, most relevant to shopping page design, is geography. Where on Earth are your shoppers located? The location of your shoppers can reveal multiple opportunities for customizing and catering your store to their specific needs:

Reevaluate shipping costs — You’ll earn more conversions with less expensive shipping to your most popular areas. You can even offer special promotions for shipping deals in these areas.

Reevaluate fulfillment and shipping stations — You may even benefit from moving a fulfillment/shipping station, or even creating a new one, based on where most of your shipments go.

Payment methods — Different countries prefer different payment methods, so give your customers the choices best for them. For example, UnionPay is big in Asia, especially China, so customers here will appreciate this option. Just ask the 8% of shoppers from the Baymard study who abandoned their cart because there weren’t enough payment methods.

Any opportunity you have to personalize the shopping experience to your particular customers is an opportunity to increase conversions… seize it!

7. Smart Forms that Show Error Immediately

You’ve probably experienced this before, so you know how frustrating it is: you spend all this time filling out an entire page of form fields, but when you hit submit you have to start over because of a single error. That’s the kind of bad UX that can lose a sale on its own.

The best fix is a UI pattern called “smart forms,” which tells the user immediately that the form was filled in incorrectly. You typically see this pattern utilize a red border around the form and red text to explain the error.

Busted Tees, above, uses form fields well in general. They even incorporate autocompletion of city and state based on the zip code, which we mentioned in the first technique. If you’re looking for a checkout page to emulate or learn from, theirs is a good first stop.

8. Persistent Checkout Reminders

It’s understandable to lose a sale because the total cost was too much or the delivery time was too long. It’s harder to forgive losing a sale because the customer just plum forgot.

More and more, ecommerce companies are drawing added attention to their carts. Some use colorful icons, while others use numbers to indicate how many items are already included. Some have extravagant pulldown menus as reminders, while others have the cart content displayed on the page at all times.

BlackMilk Clothing knows checking your cart is a common — if not habitual — part of online shopping, and takes advantage of it. While it rightfully looks simple on the surface, it still maintains all the cart essentials in that tiny dropdown menu: product list, prices (both individual and total), selected size, remove option, and the number of total products in the menu display. They even include product pictures in the menu for an extra touch.

Another strategy is to activate a reminder pop-up on exit. Sometimes visitors forget they placed items in their cart, so it’s useful to set an automatic reminder if they try to leave without checking out.

By giving persistent checkout reminders to your shoppers, you can stop an abandoned cart before it even starts.

9. Single or Multi-Page Checkout

Last, we have the great debate that has torn ecommerce owners for… well, a few years. On the one hand, single-page checkouts are faster, but on the other, multi-page checkouts break up the data forms so it’s not so overwhelming. Here’s a succinct explanation of the pros and cons for each:

Single Checkout Page

The single checkout page goes faster, with less loading times and no navigating to new pages. That means they’re no risk of back button errors, like losing all the forms they already filled out because they hit Back on their browser. Single-pagers also don’t need progress bars; shoppers can just scroll down to see how much they have left.

However, if there are too many forms on a single checkout page, this could overwhelm the customer. This format could even cause an abandoned cart if shoppers get intimidated by the initial sight of a page full of forms. Only stores that don’t need many forms should use single-page layouts.

Multiple Checkout Pages

Wizard or step checkouts are more relaxed and casual, but at the expense of time. There’s no risk of overwhelming the shopper because the forms are broken up into digestible sizes, so if you require a lot of information from customers, this is the method to use.

The amount of time can be annoying, especially if the customer has to guess how long it is. For multi-page checkouts, it’s always smart to include a progress bar so customers know how many pages to expect.

Conclusion

By the time your customer reaches the checkout page, they want to give you money… you can only give them a reason not to. Use these shopping cart design techniques to remove obstacles and open up a clear path to a completed sale.

Matt Ellis

Freelance Content Creator

Matt is a freelance online content creator, specializing in eCommerce, content marketing, and web design. For over a decade he’s been sharing his industry knowledge through ebooks, website copy, and blog articles, just like this one.

Matt is a freelance online content creator, specializing in eCommerce, content marketing, and web design. For over a decade he’s been sharing his industry knowledge through ebooks, website copy, and blog articles, just like this one.