Best Practice to Create an Impactful Cart Page

Navneet Yadav
Mar 18, 2020 · 7 min read

What does the ideal Shopping Cart page look like?

The Cart Page is a gateway between the product page and the checkout page that shows a summary of the items and quantities added to their cart, and a total of how much it will cost them. Users can apply Discount code on the cart page and check his final savings before proceeding to buy it.

The online store allows shoppers to find products that they wish to buy, add them to their shopping cart and checkout after paying the amount. This might look simple, but it's not. Every shopper doesn’t follow these 3 simple steps to purchase.

Often a simple linear funnel looks like a round table discussion. Most of the shoppers do a comparison once they put the products in the cart to see if they find the same products at a cheaper price somewhere else.

Shoppers generally use Shopping Cart as a holding area just like a fitting room to try and compare with different products.

So it’s important to have proper interaction and information presentation with the shopping cart. It needs to help shoppers in not just understanding what exactly they are about to purchase, but also in making final decisions about what they should buy. Well-designed shopping cart pages can help to increase conversions and minimize abandoned carts by shoppers who change their minds.

Let’s follow these best practices to create an impactful Shopping Cart Page. They are:

1. Locating the Shopping Cart on the Homepage:

Shoppers should be able to spot the shopping cart icon on the homepage. The standard rule is to place the cart icon on the top right corner of the store homepage. One thing to keep in mind is never placing cart icon in dark bars instead place it in white backgrounds as shoppers might have missed locating it due to dark web colours.

2. Show number of items in the cart icon:

When a shopper is adding products to the cart while exploring other products, always show no. of items he has placed in the cart already even if it is zero.

3. Remind customers to add products to their shopping cart:

4. Mini Shopping Cart:

This is similar to a cart page that allows users to check all the products that he has added to the cart page without switching to the cart page. Users can check his add to cart items while being at the product page to track the amount of money he is about to spend.

  • It should have a View Bag or View Cart button to let the user proceed to the cart page first before proceeding to the checkout page to review his items once and apply the discount coupon.
  • Once users review the add to cart products, he should be able to edit or remove items within the mini cart shopping experience.
  • If a user decides to remove an item within the mini cart provides some sort of validation that the item has been removed.

5. Notify users when an item is added to shopping cart:

When a customer adds an item to their cart provides a confirmation message that the item has been added to the cart. Users don’t want to search the page to find out if an item was added, and you surely don’t want them to leave the shopping process to find out if an item has been added to the shopping cart or not.

Full cart page

1. Identify how many items are in the cart:

2. List product image and details:

3. Link cart items to full product details:

Your Cart page should provide users with easy access from the cart to the product detail page. Some users need additional information to make a purchase decision, they want to return to the product page in order to read more information or review product details. It’s important to link both the product image and product name to see more information.

4. Allow users to edit an item in cart:

5. Allow users to remove an item in cart:

Provide a clear text link, delete icon or button to remove an item from cart and name it remove instead of delete. Most importantly, once a user clicks the remove link, instead of removing the item immediately asks if the click was intentional.

6. Allow users to calculate shipping in the cart page:

Allow your user to calculate shipping in the cart page if your shipping charges vary for different locations. If the user is logged in then fill the shipping location based on the default delivery address.

7. Highlighting the order summary box:

8. Discount Coupon Field:

Coupon code fields are useful for giving customers special discounts. However, putting a coupon code field at the beginning of your form without promo codes available on that page can hurt your conversion rate. The coupon code box acts as a trigger that prompts users to search for a coupon if they don’t have one. Rather than having your user abandon the cart to find a coupon through Google or search for your site, provide coupon codes next to the promo code box.

9. Checkout button:

10. Display payment options:

Conclusion

  1. The cart should include product image and details (size, colour, price) enabling the user to differentiate an item from other similar items that they may be considering.
  2. Provide a clear text link, delete icon or button to remove an item from cart and name it remove instead of delete.
  3. Show coupon codes next to the promo code box on the cart page.
  4. Use “pay now” or “proceed to checkout” for proceeding further after the cart page.
  5. Show a wide range of payment options and methods on the cart page to increase the chances of your users proceeding to the checkout page.

Urban Tech

The Urban Tech

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store