Best Practice to Create an Impactful Cart Page

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:

When the shopping cart is empty, remind your shoppers that the cart is empty and they should add products. You can provide shopping instructions, a call to action or product recommendations like 10 users are looking at this right now that tempt users to add to their 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

Users can review and make their final purchase decisions when they are viewing the full cart page. There they review and compare the items they have chosen, check whether the total is within their budget or whether they get free shipping, can they apply coupon code & get savings etc. So, design your full cart page in such a way that it assists your shoppers in their buying decision.

1. Identify how many items are in the cart:

Just like in the mini-cart you want to identify how many items are in the cart on the full cart page. This lets the user know how many items they have added to their cart.

2. List product image and details:

The final purchase decision is made on the full cart page, so it's important that this page clearly summarizes the items. 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.

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:

Allow your users to easily edit the product on the cart page itself without having to navigate to the product page. He might have some doubt regarding size or colour, so it should have an option to update it within the cart page.

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:

Users will want to know how much they’re spending, highlighting the summary box differentiates itself from the rest of the elements on the page, making it easy for users to see. Assure that the elements in the summary box are aligned, good alignment bridges the visual gap between every element in your design, helping users process the information faster.

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:

This is the most important button on the full cart page. Your button should be highlighted and placed in the users' path (above the fold). Keep the relevant text on the checkout button. Avoid contextual labels like “continue” for the checkout button, instead use “pay now” or “proceed to checkout”.

10. Display payment options:

Showing a wide range of payment options and methods on the cart page will increase the chances of your users proceeding to the checkout page. However, you want to present this information in close proximity so the user can see all the available payment options and methods in a single view. This allows the user to view them as a collection mutually exclusive of choices and can compare the options.

Conclusion

1. Place the cart icon on the top right corner of the store homepage so that customers can easily locate it.
2. 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.
3. Provide a clear text link, delete icon or button to remove an item from cart and name it remove instead of delete.
4. Show coupon codes next to the promo code box on the cart page.
5. Use “pay now” or “proceed to checkout” for proceeding further after the cart page.
6. 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.