Shopping basket/cart links and icons need to catch the attention of shoppers, and should help them to find the link to review the contents and make a purchase.

There are a number of ways of displaying the basket link, from a simple text link to permanent basket icon showing the contents and total value. I’ve been looking at a few examples from a selection of UK etailers…

Some retailers, such as Next, TopShop and ASOS, have opted for text links, which also shows the number of items in the basket, and on Next, the total amount to pay.

These links are all in the top right of the screen, and this is the
case with all of the examples here. Online shoppers have become
accustomed to this convention, and it makes little sense to move the
link elsewhere.

These three links tend to blend into the background, especially in the TopShop example. It could be argued that these links, which are important calls to action after all, should be made clearer and more visually appealing.

Next:

Next basket link

ASOS:

ASOS link

TopShop:

In the examples below from Amazon, Comet and Argos the basket link has been enhanced by the basket icon, which offers more of a visual cue for shoppers.

Amazon’s basket link is relatively subtle, and blends into the blue background, but at least the basket icon catches the eye. The same applies to Comet and Argos, and all three could be clearer.

Amazon:

Amazon basket link

Argos:

Comet:

In the example below from Play.com, by devoting more space to the basket link, using the icon and adding a highly visible checkout link, it has been made a lot clearer.

Play.com:

Play.com basket icon

Indicating the number of items in the shopping basket and the total value of goods is useful for shoppers as they go along, as well as being a helpful reminder for returning visitors.

Tesco, HMV, M&S and B&Q all provide information on the products which have been added to the basket, B&Q does this via a drop-down display from the basket link, while the other three have the contents permanently on display at the right hand side of the page.

Tesco’s basket link on the top right isn’t so clear, but the contents are summarised below, with a call to action that stands out. M&S goes further by offering visual reminders of the contents, while shoppers can edit the contents without going to the full basket page.

Tesco:

Marks & Spencer

B&Q

HMV

Having looked at several well known retailers’ sites, most seem to use similar links to those shown above, but there are other ways of showing the basket link and its contents.

US retailer Crate & Barrel provides one such example. It links to the checkout at the top right of the page, but also has a Flash bar which remains pinned to the foot of each page as you navigate through the site, though it can be minimised to allow you to see more of the page. 

This gives shoppers information of the number of items in the basket, and the total cost, and also provides a useful visual reminder of the products waiting to be purchased:

Crate & Barrel:

Other ideas include encouraging customers to spend more to qualify for free delivery by including this information in the basket summary, which is something Borders does for example.

Also, if users need to add a certain number of items before they can place on order, as on wine retailers’ sites for example, then a reminder next to the shopping cart link is a good idea.

It’s about making it as easy as possible for customers to buy from your site, so whether you choose to providing a summary of the contents or not, basket links should stand out clearly and shoppers shouldn’t have to work too hard to find them.