13 Ecommerce Shopping Cart Design Tips to Cut Abandonment & Secure More Sales

Order summary, coupon code field, the subtotal, and a “continue shopping” button just in case a potential customer wants to add more products to their cart. 

Other than that, it’s like the Wild West.

Ecommerce brands are either one extreme or the other: Over-optimizing the shopping cart page to the point that potential customers are overwhelmed with too many options. Or, under-optimizing and not giving them the confidence they need to hit “proceed to checkout.” 

Unsure where to start? Fear not. This guide shares 13 shopping cart design tips to cut abandonment and secure more sales. 

Let’s dive in 👇

Shopping cart design tips

Here's a quick run down of the best shopping cart design tips you can use to reduce abandonment, increase order value, and secure more conversions. We'll cover each one in more detail below!

<design>1. Adhere to expected design<design>

People have been buying items online for the past three decades. Over time, people build expectations for what a retailer’s website should look like. 

It goes without saying that every website design should deliver A+ user experiences. If something isn’t in its place (like the shopping cart icon), shoppers can get confused. That’s an obstacle and a nudge towards ditching the site without making a sale. 

So, always make sure your “Checkout” and “Add to Cart” buttons are in the expected place.

It’s also a smart idea to adhere to expected branding designs on your shopping cart page. This applies to logos, fonts, colors, and layouts across your entire ecommerce website, as Olivia Tan, Co-Founder of CocoFax, explains:

EXPERT INSIGHT:

"It is advisable to use clear and simple designs, which besides harmonizing with the ecommerce branding, accentuate the buttons and key checkout fields: H2 titles, CTAs, available payment options, etc. It is important to avoid designs that are confusing, messy, and with too many elements. As it usually happens, when we talk about design, less means more."

~ Olivia Tan
Co-Founder, CocoFax

We can see this in action with Aday’s website design:

The shopping cart insert has the same branding as the rest of their website, eliminating any confusion someone might have after adding a product to the cart. This kind of consistency is key when it comes to lifecycle marketing and your overall funnel.

<friction>2. Reduce friction throughout the process<friction>

Speaking of obstacles, you want it to be as painless as possible for someone to add an item to their online shopping cart and leave with a purchase. So, think about any friction you’re inserting with your page’s design.

This shopping cart from Apple, for example, shows a fuss-free checkout experience. Customers have the option to have their item delivered or ready for collection:

Apple also gives the one delivery option. The paradox of choice—the concept of too many choices making a decision more challenging to make—isn’t an issue here. As few options as possible remove friction in the cart itself.

<trust>3. Showcase trust signals<trust>

More online shoppers are concerned about privacy than ever before. The vast majority (86%) of US consumers have attempted to remove or decrease their digital footprint. 

Those concerns have a domino effect on the number of people who exit their shopping cart without purchasing. Some 17% of online carts are abandoned because the potential customer didn’t trust the site with their credit card information.

EXPERT INSIGHT:

"In order to design a successful shopping cart page, it is imperative to make customers feel 100% confident with the brand and with the website."

~ David Adler
Founder & CEO, The Travel Secret

Help your potential customers overcome that by showcasing trust signals in the shopping cart, such as: 

• Your returns policy
• SSL certificates
• Money-back guarantees
• Payment logos like PayPal or Mastercard

Take this shopping cart page on Quince’s online store as an example:

The sticky bar makes it evident that the site is secure. There are also other trust badges—like free standard shipping, 365-day returns, and customer support details—to reinforce the fact that the ecommerce store can be trusted. 

<urgency>4. Reinforce your urgency or scarcity in the cart<urgency>

You can use various psychological tactics to increase sales and your shopping cart conversion rate, each of which can be built into the page’s design.

That includes:

• Scarcity. If you have limited versions of a product in stock, shout about it on your shopping cart page with messaging like “limited availability.”
• Urgency. Convince shoppers to buy something immediately with messaging like “order within the next 10 minutes for free delivery.”

We can see a mixture of scarcity and urgency in action with Boohoo’s shopping cart design:

It highlights that only two versions of the product I’ve added to my bag are available—giving me a reason to complete my purchase now instead of waiting.

<social-proof>5. Reinforce social proof in the cart<social-proof>

Did you know that people have a natural tendency to follow the crowd? 

It’s why the average consumer reasons 10 online reviews before making a purchase—and testimonials increase sales page conversions by as much as 34%. 

Social proof capitalizes on this by highlighting other people taking the same action you want your website visitors to—like completing a purchase. 

On a shopping cart page, the following types of social proof can increase conversion rates:

• Testimonials from happy customers
• Endorsements from influencers or celebrities
• “X people just bought this” notifications 

Kettle & Fire, for example, showcases a customer review on the side of its shopping cart page:

This gives people the confidence they need to confirm their order. It reinforces and reminds them that other people out there made a purchase and are happy with their decision.

<analytics>6. Use Google Analytics' Funnel Visualization to analyze where you're losing people<analytics>

Granted, the shopping cart page is one of the most important pages of your website. But there are other pages your ideal customers visit on their way to completing a sale—such as the product and checkout pages. 

Luckily, there’s a free tool to help you identify where people drop off: Google Analytics.

Make sure you’re set up to track conversions on your ecommerce website. Then, head to the Explore tab and select Funnel Exploration.

You’ll see a detailed breakdown of the typical pages a customer visits pre-purchase—including conversion and abandonment rates. Use that to inform which pages of the checkout process need optimizing most:

<exit-intent>7. Use shopping cart abandonment exit-intent popups<exit-intent>

It’s not all bad news if you spot that one of the pages in your checkout process has a high abandonment rate. 

Using an exit-intent popup is a great way to stop abandonment at its source. If a visitor moves their mouse toward exiting the page, the popup triggers with the aim of guiding them toward completing their purchase or becoming a lead.

By offering an incentive (like a discount on their purchase), you can:

1. Encourage them to go ahead and complete their purchase there and then
2. Failing that, use the email address collected to send follow-up emails. The goal: return to the site and complete their purchase. 

Not convinced? Rudy Mawer used this type of exit-intent popup to generate 7,973 leads and over $50K in direct sales.

Here’s a template you can customize and add to your shopping cart page as an exit-intent popup:

You can check out more designs in our ecommerce template library.

Not only will you build your email list, but you’ll get cart abandoners to come back to your site and complete their purchase 🙌

EXPERT INSIGHT:

"If I can drive home one best practice above all others, it would be to collect visitor emails early during the checkout process and establish a drip email campaign for those who abandon.

A good conversion rate for ecommerce is only around 2%, so you are going to lose a lot of people to cart abandonment regardless of how good your shopping cart page is. Getting emails upfront is one of the highest-converting remarketing tactics out there."

~ Sebastian Schaeffer
CEO, Blogrolling

<objections>8. Address common objections in the cart<objections>

Ecommerce site owners often fall into the trap of only relying on their intuition to design shopping carts. That’s a big mistake—and your own knowledge is probably cursing you. 

Chances are:

Potential customers exit their shopping cart for reasons you would never think of. 

The only way to find (and fix) them is by asking. Use retargeting emails, on-site polls, or popup surveys to quiz cart abandoners on why they left the page. Reasons could be anything from unclear shipping costs to forgetting the product details of items in the cart.

Regardless of what you find, use that insight to tweak the design of your shopping cart. 

Let’s put that into practice and say Olipop customers abandoned their carts because they were concerned about the sustainability of their online order. 

To ease that obstacle and encourage future customers feeling the same to complete their purchase, they have a small note at the bottom of their shopping cart page: “Add $0.72 to make your cart carbon neutral.”

Common objections could be anything. One of the most common being: “I can’t afford it.”

This is where using payment plan tools like Affirm, Afterpay, and Klarna can be effective. If someone can’t afford your product in one lump sum, perhaps spreading the cost would save the sale.

Check out how ASOS promotes these as payment options during the checkout process:

Just make sure to find out your customers’ common objections, then put future visitors’ minds at ease by addressing them head-on in your cart and checkout pages.

<failed-payment>9. Try a failed payment popup<failed-payment>

Speaking of payment plans, these can be especially effective in the event of someone’s credit card failing.

Failed payments can happen for various reasons—spotty internet connection, their payment method not being supported, or insufficient funds in their account. 

Ready for the bad news? Data shows 62% of customers who experience a failed online payment won’t return to the retailer’s website to try again.

But there’s good news: a failed payment popup can stop them from leaving in the first place 🙌

Take a look at how Nectar Sleep does this with this popup that triggers when a payment fails:

Rather than accept a lost conversion, Nectar pushes people toward spreading the cost with a payment plan—a great strategy when selling high-ticket items.

SEE MORE: How Nectar Sleep Grew Revenue From $44m to Over $500m in 3 Years While Using ConvertFlow

<upsells>10. Try in-cart upsells and cross-sells to drive up AOV<upsells>

Once you’ve worked on improving the conversion rate of your shopping cart page, start to think about improving another KPI: average order value (AOV). 

Driving up your AOV has a range of benefits—mainly around improving your profitability, return on ad spend (ROAS), customer lifetime value (LTV), and LTV:CAC ratio.

Say, for example, that your AOV is $20. Once you take out the cost to pack, label, and ship the item, you might be left with $15 revenue. However, if the order value is higher ($50), you can bundle the logistics cost and make more revenue. 

There are two tactics you can use to increase your AOV on the shopping cart: 

• Upselling. Recommending a higher value product instead of the one already in their cart—like a $40 makeup product instead of the $30 one they’re thinking of buying. 
• Cross-selling. Recommending other products that complement the one already in a shopper’s cart.

Here’s an excellent in-cart cross-sell on Maude’s ecommerce site. They recommend a best-selling hand wash to complement the body wash I’ve added to my shopping cart:

You can also set a spend threshold for customers to qualify for free shipping or discounts. This nudges people into adding more items to their cart to reach that discount threshold (driving up AOV in the process).

<fields>11. Minimize form fields in the checkout<fields>

People might want your product(s). But, none of them want to complete forms.

Every additional field they have to fill out is another task that might convince them to simply not bother completing their purchase.

EXPERT INSIGHT:

"Nothing irritates the typical user more than having to fill out an excessive number of input fields on a form. You want the checkout procedure to be as simple as possible, since if the consumer does not find it convenient, they are unlikely to return to the site."

~ Lucas Travis
Founder, Inboard Skate

Data backs this up:

• One study found that reducing the number of form fields from 11 to four improves conversions by 120%
• Another study concluded that ecommerce websites could reduce the number of default form fields by 20-60% without impacting conversion rate

All of that means one thing: keep your shopping cart forms simple.

Draw inspiration from Lumin Skin’s checkout page. It only asks for the information they actually need to fulfill an order:

Plus, the option to checkout with PayPal removes the need for most of these few form fields altogether. Customers with a PayPal account just need to sign in and purchase—with the entire checkout process taking just a few seconds.

There are other express payment options to consider experimenting with for your ecommerce checkout, too. For example:

• Apple Pay
• Amazon Pay
• Google Pay
• Fast Checkout
• Shop Pay

Be careful not to overwhelm people by providing too many of these options. But having a few of them can make the whole process a lot more seamless.

<process>12. Break up the checkout process into steps<process>

Sometimes, you can’t always meet the Holy Grail of four form fields—especially on a shopping cart page. You need large volumes of information about the customer to process their order and ship a product to them.

In that case, consider breaking up the checkout process into manageable steps. 

It’s what Jeni’s does on its shopping cart page. You’ll see the order summary and two forms upfront:

Not only does the entire process feel less overwhelming, but the retailer prioritizes collecting only the essential field (a customer’s email address), which can be used to send abandoned cart emails. 

It’s why marketers using multi-step forms have 86% higher conversion rates than those who don’t.

<progress>13. Add a progress bar for checkout steps<progress>

This next shopping cart page design tip is simple but effective.

Research shows that a long and complex checkout process was behind 18% of abandoned carts. By keeping them in the loop of how long they have before their order is confirmed, you’re not setting them up for any nasty surprises (i.e. a five-page slew of pages before the product gets shipped).

EXPERT INSIGHT:

"Include progress indicators on the checkout page to help users understand where they are in the checkout process. Add thumbnails of products throughout the checkout process as a way to reassure customers of their current purchases."

~ Harriet Chan
Market Officer, CocoFinder

Amazon does this on its ecommerce website. You’ll see which stage of the checkout process you’re in on each page—from welcome and address through to order confirmation:

All of this simply gives people a reference point for where they currently are in the checkout process and how far they have left to go.

Improve your shopping cart design today 

As you can see, the shopping cart on your ecommerce website is one of the most important pages. You need to put work into optimizing the page for maximum sales (and minimum cart abandons).

Use these techniques to improve yours. Play around with social proof, break up the checkout into multiple steps, and use Google Analytics to prioritize pages where most customers tend to drop off.

Whether you’re building from scratch or doing a redesign of your existing shopping cart page, ConvertFlow can help. 

You’ll find a bunch of high-quality popup templates to keep people engaged throughout the online buying process. This one, for example, incentivizes potential customers to complete their purchase with a discount code delivered to their email address:

The best part? Our integrations with platforms like Shopify and WordPress mean you can get up and running in just a few minutes.