Andras Marcell Marko

Sep 28, 2017

posted by Andras Marcell Marko

Cart and Checkout Pages: e-Commerce Site Best Practices Part 4

Notice: Undefined variable: post_id in /nas/content/live/yuspify1/wp-content/themes/yuspify/single.php on line 38
ecommerce site best practices tips on cart page

Cart page and check-out has to be clean and well-structured. Just think of how repugnant a cluttered conveyor belt could be (behind a filthy cashier monitor and an arrogant cashier). How frustrating could be to stand in the queue having to listen to other customers’ chatter.

Cart page (or cart segment on the cart-checkout single page) must have the following basic functions: to enable the customer to add items / remove items / revise the items.


Bellroy checkout page

Image 1.: If you opt for a single page checkout which is getting more and more pushed by prefab store-providers like Prestashop, Woocommerce or BigCommerce, this vertical page segmentation scores the most:


One page checkouts have higher conversion rates then 2 pagers

In e-commerce the more time it takes to go through the checkout, the more likely the customer is to ABANDON the cart and has a low probability to return. E-commerce giants sell immaculately pre-set, well-proven single-page templates like this on the Image 1 where the 4 clusters (cart review, shipping, payment and billing info) are well-visible and eye-catchingly separated.


Ajax cart demo view

Image 2.: The customers always want to have a clear overview where they are, how many steps are left behind or how many steps they have to complete. If our checkout is a 2 pager a progress bar is always an essential element.


Cart page has a characteristic that stands out from the other pages of the webstore: while we would like the customers to stay longer on the other sites, we want the them to slide over softly the cart page. A good metaphor could be a streamlined, steep but still safe and comfortable slider that is oiled to get users forward without frictions.


Must-have segments of the cart page


Made e-store shopping basket

Image 3.: – Essential contents of a well-structured cart page ( Image 3 ): product summary and details, shipping methods, well-visible final price with its components (price, shipping, tax) excerpts from the terms and conditions (return policy and privacy), promotion and voucher code area, paying options, complimentary products and a well-visible gateway or area to checkout. At setting up the webstore from template all the e-commerce providers will hold your hand and keeps on notifying you not to forget any of these.


Communicate simply

„Checkout” is the most prevalent, „continue to checkout” and „proceed to checkout” are also runner up but less and less frequent. „Shopping Cart” or „Cart” is slowly losing its prominence „Shopping Bag” started to rise especially in the fashion retail.

Security Seals. A Baymard survey shows that Norton is the most trusted, McAfee is the second. However they strengthen trust, cart pages started to sacrify these to become more minimalistic.




Cart page of Made e-store

Image 4. : The customer must have a clear view of the goods in the cart. Also he must have what he is going to see at unwrapping the package. Image, attributes ( price, color,size ) should be present. Voucher also should be here but in a well- separated cluster. Another information that make it more unique could also be here but in a different color.


Avoid asking redundant and non relevant questions

Many users leave because they are tired to type in extra details e.g. about their greater region (London – Greater London – its obvious where London is), landline phone number and cell phone number etc. – confusion around postal address and address where the bill to be sent.

Majority of the users will have the same billing and shipping addresses. Pre- filling the billing address area with the shipping address is always better than leaving it blank and make the user race another round.

Bellroy checkout column

Image 5. : Asterisks should be well visible. But the best is to evade asking for non-mandatory information. Notifying that this is a required field is not enough, the textbox should be stroked at least.

When our form asks to create a password it’s not to place of rigorous password obligations like „the password has to contain uppercase letters, number and a special character like @”


Real-time user validation

Don’t wait until your users submit the form, validate them real-time. In order to avoid frustration, validate the customer inline to notify him if he have typed a wrong format of postcode or you cannot ship into his country. (Image 6.)

Items can not be shipped outside the country

Image 6.: This should have turned out earlier.


Some Cart Abandonment Aces

Session Expired-message: the first-class ticket to kill a purchase to make the customer re-type all of his details.

Edit or Update Shopping cart. After another item added all of customer details are forgotten and I have to retype everything… this is another top-tier cart abandonment trigger, however not in case of Macbooks. (Image 7.)


Cart page of Ajax

Image 7.


Too many fields destruct the experience



Magento-powered checkout page

Image 8.: Magento-powered single checkout page: delivery address and payment details. All the details needed can be typed in the same pages.


Read our eCommerce Site Best Practices Series:

Part 1 – Home Page
Part 2 – Category Page
Part 3 – Product Page
Part 4 – Cart and Checkout Pages
Part 5 – Navigation
Part 6 – Personalization

Sign up for email updates

Get regular tips and updates from the world of eCommerce and big data.

We take your privacy seriously. No spam. See our Privacy policy here.

Recent Blogposts