Fix Your Cart & Sidecart

Fix your cart and sidecart by following the best practices in eCommerce, user experience, and design. This checklist uses battle-tested tactics and is backed up by over 100,000 hours of research from leading research companies, such as Baymard Institute, CXL, Google and dozens of blogs.

Boost revenue per user, profitability, customer experience
The proven way

What do you get, once you improve your Cart and Sidecart?

By improving your cart and sidecart, you help people to buy products a lot faster, and help them to proceed to checkout with grater certainty - and greatly increase the likelihood of people moving on to the checkout flow, and ending up purchasing something. You improve the site’s usability, customer experience, and bottom-line profit.


→  Category  →  Product  →  Cart  →  Checkout  →  Confirmation  →


Consider just using a sidecart

This serves the same purpose and enables users to see the order totals and make adjustments faster and more conveniently.

Have the following sections covered

The site-wide pre-header

A great place where to introduce information about delivery, returns, and unique selling points! Make sure the Return policy is clear, visible, and friendly.

The cart minimized header

Show a back option, cart title (and amount of items in the cart), cart sharing options (via social and via email or URL), and support contacts! This will provide a great deal of value for your users. As a bonus show a success state as soon as an item has been placed in the cart!

The delivery progress bar

Push people to add more to the cart, and show a Free delivery threshold progress bar! How much does the user have to add to the cart to get free shipping - show it visually (You are €9.00 away from free shipping!)

The payment options

Promote and show the key payment methods people can use and boost trust and authority.

The cart items

The item(s) the user has in the cart: Thumbnail (link to product), brand, the product title (link to product), variation selected, price, save for later (add to wishlist), price incl. discount and saving if any, edit quantity (+ - and also freeform numerical input) and remove the item from the cart - and separator if more than one items in the cart.

The saved items

If the user has added something to the wishlist and saved it for later, show a section on the sidecart, so the user can quickly add more to the cart!

The redeem a coupon

Present a compact and minimal call to action to redeem a coupon or a gift card, which will lead the user to a dedicated slide-in view. These allow people to enter the code in the input and show clear validation of success and error. As a bonus, you can present available coupons too to push new visitors toward sales faster. Make it simple to remove the promotion and add it right back too for extra points!

The shipping calculator

Present a compact and minimal call to action (incl. time and cost estimate) to open up the shipping costs and calculator view slide-in. Once opened allow the user to choose the destination (country or county, zip, etc you use) and show the free shipping progress bar too. Top up the emotions by showing around three benefits to indicate why your shipping is so good for the user or environment. After the user has made changes, show the updated cost estimate immediately, and later reflect the selection to checkout too. Enable a clear path to return to the previous screen and to update the costs.

The order summary

Always show a clear and accurate overview of the costs ahead, including shipping, taxes, product totals, discounts, and order total to pay.

The sticky call to action bar

Especially on mobile, keep the bottom of the screen for calls to action such as Back and Proceed to checkout together with the total to pay amount. It helps users to proceed faster to checkout.

The pre-footer: The payment options

Showcase different options people can use to pay, and bet big on buy now and pay later options. Make people trust you more, and help them get products faster and more conveniently.

The bonus checklist

Coming soon!

The “please avoid” checklist

Avoid poor page speed

One two three four five six .... Bye-bye. Speed equals money in your pocket. Remember that, keep your Google page speed index above 90 on desktop and above 70 on mobile.

Avoid poor design, bad use of colors, and low contrast

It has been proven with research, that every 1 USD you invest in design and user experience improvements brings back 100 USD on average ( Do not underestimate design, first impressions, and color psychology. Keep navigation and call to action of high contrast.

Avoid reinventing the wheel

Instead, use plugins, and ready-made software to cover these core guidelines.

Emptying the cart and instead keeping the cart session alive as long as possible

Users often add items to their cart and return to them at a later time. You will miss out on some purchases because the items disappear from the cart unexpectedly for the users.

Too prominent ads and promotions inside the cart

Help people to make the purchase, and better try to upsell right after the purchase or via email marketing automation.

What next?

Fuel your eCommerce site with more growth.