11 Cart and Checkout Page Elements to Boost Your Shop’s Conversions
Congratulations! Your prospect has added your product to their shopping cart—probably thanks to that stellar product page you offered them. But your website’s work is hardly finished. Indeed, there are many miles to travel between the “Add to Cart” and “Purchase” CTAs; and the smallest of missteps can still send your visitor right off your site.
To put it kindly, cart abandonment and checkout abandonment rates are not exactly low across the board. The Baymard Institue has documented an average online shopping cart abandonment rate of nearly 70%. And of those 30% that do move from the shopping cart to the checkout page? 25% of them drop out during checkout.
We’ll let you do the math on that one.
So how do you hold onto some of those clearly-interested prospects? Here are our top 11 tips for moving them through the funnel, ultimately reducing your abandonment rates and increasing your revenue:
1. Offer a cart summary with full product details
Once a product is in the prospect’s cart, let them keep looking at it! An image of what they’re about to own will be the dangling carrot that moves them through your checkout process with a little more enthusiasm than they’d otherwise have.
But we’re talking more than images. Show the color, size, number, and price of each item; and offer a link back to its product page in case your prospect wants to take another look at the specs before finalizing the purchase. If you don’t link back, users will end up taking themselves out of the checkout flow when they search out the product page again to confirm the details.
And once they’re out of the flow? You run the risk that they won’t come back.
2. Show the total cost at all times
Sticker shock is real—even when the difference between the subtotal and total cost of an item is minimal. Indeed, hidden costs are the highest-ranking cause of cart abandonment in most studies. Don’t make your prospects feel deceived: Have your shopping cart reflect the total cost (including taxes and shipping costs!) with every new item added.
If taxes and shipping are a matter of location, consider including calculators on your cart page. Users can then enter their zip codes to see the total cost before they move to the checkout phase. Because no surprises = more conversions.
3. Let users edit their carts and save items for later
This is really a matter of ensuring your prospect feels in charge throughout the entire checkout process. Don’t make them feel locked into a purchase; and don’t make it look like you’re giving them the ultimatum of purchasing NOW or watching their wishlist disappear into some black hole in the internet.
That won’t do either of you any good.
Instead, let prospects add and delete items, update quantities, and transfer items to a wishlist on the cart page… and until the very last step of checkout. In-cart revisions will keep users in the funnel. And wishlists mean conversions for you, later—either when prospects return to your online shop of their own accord, or when you send out reminder emails about the items they’re sitting on.
4. Give your shopping cart memory
Not everyone abandons a cart because they’ve suddenly decided they don’t want your product. Maybe their boss just walked by their cubicle and they had to quickly close that browser tab. Maybe they realized they left their credit card at work and can’t do any online shopping until tomorrow. Maybe they put the item in their cart on mobile, but they feel more comfortable sending credit card information from their laptops. And so on.
If your shop’s cart refreshes each time a prospect returns, you’ve either helped them forget about that product of yours they once wanted, or you’ve frustrated them by making them repeat the search-and-add. Not everyone will be willing to do this. So keep a persistent cart, and reduce consumers’ amnesia and irritation.
5. Give your CTAs a hierarchy
Your shopping cart should offer only two CTA buttons: one to “Continue Shopping,” and another to “Checkout.” That’s it.
Typically, the primary call to action is the “Checkout” CTA. Of course, you’ll determine through testing whether it’s better for your business to guide prospects through the funnel as soon as they put an item in their cart, or whether enough prospects go back to browsing and still make the purchase that your “Continue Shopping” CTA can be most conspicuous.
The point is there’s a hierarchy. Your primary CTA should be the most standout element on your cart page. It should be of a color that contrasts with the other elements on the page, and have a lot of white space around it. Your secondary CTA will be accessible, but not as visually compelling (and not the same color as your primary CTA).
While we’re at it, your “Checkout” CTA should be positioned at both the top and bottom of your cart page. Give prospects the easiest possible access to that next step, at all times.
6. Test the timing of account creation
Your prospect has moved from your cart page to checkout… they’re on a roll! The first thing you’ll have to determine is whether to force registration or enable guest checkout. While we’d recommend the latter, what you decide will be a matter of what your business priorities are—and what ultimately tests best on your site.
If you decide to prioritize user preferences in your checkout, you’ll probably offer four options. In this scenario, returning users can either log in with their passwords or sign in with social, while new users can either checkout as guests or create an account.
Then again, you may discover that giving new customers two options means overwhelm and fewer conversions. In which case, try defaulting to guest checkout, but offering a button to “Create an Account” at the top of the page. This strategy makes sense if your business is prioritizing sales over collecting new customer information.
If you do want to prioritize long-term customer relationships in your checkout, it’ll probably mean forcing account creation before prospects can make their purchases. However, there are ways of doing this that may not feel so “forceful.” Including microcopy that tells prospects about the benefits of registering, for example (personalized shopping, faster checkout, discounts, free shipping), will go a long way toward reducing user frustration.
If you took a look at that Baymard study we linked to above, you probably noted that forced account creation is the second leading cause of checkout abandonment. So consider how willing you are to lose some customers for the sake of more complete data about the ones you do keep.
7. Ask new customers if they’d like to register after their first purchase
As far as we’re concerned, post-purchase is the “sweet spot” of new customer registration. Offer the option on your confirmation page. If you’ve given users a remarkable checkout experience, they’ll be all the more likely to sign up (after all, they’ll want to come back!). And since you’ve got most of their information at this point—because they completed the purchase—all they have to do is choose a password and click that CTA to “Create an Account.”
8. Make your coupon code field inconspicuous
If your shop offers coupons, don’t keep a prominent coupon code field. Prospects who don’t have the code will feel less “special,” or like they’re missing out on something. Many of them will go on a coupon hunt, and 8% of them will abandon the checkout process altogether when they can’t find one.
So if you want to offer coupons, try one of these:
- Offer a coupon link that only displays an input field when users click on it. This way it won’t be conspicuous for prospects who aren’t looking for it.
- Put your promo codes directly on your site (in a banner at the top of the page, for example). This way no one will feel left out when they get to checkout.
- Only show coupon fields to visitors who come to your site from your marketing emails or from affiliate links.
9. Display contact information and include a live chat feature
Your prospects may realize they have questions halfway through the checkout process. They may decide they’d feel more comfortable completing their purchases with you over the phone. Don’t impede their inquiries or deny them the option of phone orders.
Email and a contact form are both great; but live chat and a phone number will ensure prospects can reach you while they’re still on the page. A link to your FAQ page (make sure it opens in a new tab or in a modal window!) is also a wise UX move here.
10. Enclose your checkout by avoiding external links
We can’t stress enough how important it is to keep prospects in that purchasing funnel. You want them to have tunnel vision until the end. That means no peripheral distractions… and no sending them off your site!
11. Prioritize ease and speed on your forms
The form is the final phase of the online shopping experience… and, let’s be honest, probably its least exciting aspect. So you’re aiming for two things here: ease and speed. Here’s how:
- Keep the checkout form to one page. And if testing suggests you shouldn’t, give users a progress indicator. The point is that users can see how many steps remain, and know they’re making progress.
- Ask only for the information you need… nothing more. (This may mean eliminating fields like password verification.)
- Use on-screen validation and clearly communicate user errors.
- Offer drop-down lists or auto-fill fields (i.e. an address finder), as well as a check-box that lets users auto-populate the shipping address fields with the billing address they’ve already entered.
- Display information buttons that describe what users should put in the field, explain why your business needs certain information, and offer tips (i.e. what makes a strong password).
- Ditch the in-field placeholder text for labels above the fields.
Each of these elements may seem inconsequential in and of itself. And yet, you’ve filled out your fair share of checkout forms; and you probably know from experience what a considerable difference they make.
And terrific user experience is, ultimately, the driving force behind all of the above.
That’s a lot of tips at once, we know! It may be useful for you to see examples of some of these best practices in action; if so, sign up for free e-commerce website builder trials from the links on this page. You will find a plenty of best practices for other components of your website there, too!)
If you want more details about any of the best practices mentioned above, check out our blog and ecommerce website builder reviews.