What does the ideal shopping cart page look like?

The shopping cart, or basket, page is a gateway between (more often than not) the product page and the checkout process.

In this post I’ll look at the purpose of this page, the essential features and information to show, and some examples from retailers.

NB: the ideal page will be different between sites. As so often, it’s about testing and experimenting to find the optimal blend.

What is the purpose of the shopping cart page? 

It’s the last stage before customers enter the checkout, so it performs a number of roles:

• Confirming the contents of the cart and the total cost to customers.
• Answering any questions customers have before they progress to checkout.
• Increasing basket value with relevant cross-selling.
• An opportunity to modify the contents of shopping bags.

So let’s look at some shopping cart/bag/basket page essentials…

A clear call to action

Some customers will have no need to review details – perhaps they’re confident that they’ve added everything correctly, maybe they’re in a hurry.

A clear call to action helps them to enter checkout quickly without any need to linger on the cart page.

Here, a nice clear blue button signposts the way for Threadless shoppers, while the PayPal button will be familiar to users.

Clear delivery costs 

It’s easy enough for most products, just make your standard shipping costs clear, as Norman records does here:

Unexpected shipping costs were the number one reason given for checkout abandonment in a recent survey.

This is because many sites, especially in the US, wait until customers enter checkout before making shipping options clear.

There are reasons for this. For example, the sheer size of the US means that flat rates aren’t always possible as they are in the UK. Also, delivery methods may vary according to location.

One solution to this is to deal with shipping options and charges on the cart page, as House of Fraser does here.

Voucher codes

Though some retailers leave voucher/promotional code entry until almost the last step of checkout most customers will be expecting to enter codes sooner.

They will want to know if the code works successfully, and the total price after the discount has been applied.

Here, Macy’s places a clear promo code box on its shopping cart page:

However, there are potential drawbacks when showing promo code boxes like this. For people without codes, the box tells them that they may be missing out on a better deal.

The obvious response in the above example is to search for ‘Macy’s promo code’. From this search, customers may not return to the checkout.

One solution would be to make the promo code option less obvious, as in the House of Fraser example above. It doesn’t stand out too much so people not on the hunt for codes may not notice it.

Security reassurances

People will have concerns about payment security, and recent data losses by TalkTalk and others fuel such worries, so some sites will want to offer reassurances that their card or other payment details are safe.

There are a number of approaches to this. In my view, much has to do with how the retailer builds trust in a broader sense.

This includes:

• Good site design and user experience.
• Site reliability and performance.
• Good customer service.
• Knowledge of the brand.
• Social proof – reviews and word of mouth.

There are also more direct reassurances, such as security logos. Or, as M&S does here, the language used on the basket page: ‘your secure bag’ and ‘checkout securely’.

The other option is to add logos which back up checkout security: Norton Secure, Verisign etc.

Payment options

Summarising available payment options helps reassure people that their preferred method is available.

Displaying logos, as Firebox does here, is a simple way to get this information across.

Returns information

This should be shown around the site, but it useful to provide links to relevant information on the shopping basket page so customers have no need to look elsewhere.

Here, Kitbag shows links to delivery and returns information but displays these in a pop-up so customers don’t have to leave checkout to find out.

Cross-selling

Here, Joseph Joseph adds related items to the bottom of the basket page.

They’re relevant to the product, but the retailer prioritises the checkout button so that these items don’t interrupt the user journey.

Contact options

Displaying clear contact details provides an option for customers to ask any questions and for the retailer to deal with last minute doubts.

A clear phone number, as shown below, is one way. Live chat is another good option for immediate contact.

Promote your free delivery threshold

If you offer free delivery for orders of a certain size, then it’s good to promote it when customers get near to that limit, as John Lewis does.

Allow for easy editing of basket contents and quantities

People may add things by accident or change their mind. Let them edit basket contents easily on the basket page.

In summary

In a nutshell, the shopping cart page needs to provide the visitor with all the information they need to progress to the checkout without any lingering doubts.

These are the most common features used on product pages. Do let me know in the comments if you’ve seen other useful examples.