Shopping Carts Gallery: Examples and Good Practices

• By Sven Lennartz
• February 7th, 2008
• Carts, E-Commerce, Showcases
• 88 Comments

Imagine that you are designing an online-store. Since stakeholders are only interested in the number of sells, the success of your work directly depends on how well you manage to drive users to the “Checkout”-button. In this case you might want to consider some design approaches which will set you apart from your competitors. After all, the probability that they’ve done it wrongly is extremely high.

One of the simplest examples of flawed design decisions is the incorrect use of the shopping cart icon — a traditional icon which stands for the virtual holding place for any products of the store. Used properly, this little yet powerful element can help users to buy a product as quickly and painless as possible. As such, it is essential for the purchasing procedure and therefore deserves to be considered carefully during the design process.

An unusual view of the shopping cart, a huge shopping bag accompanied by a mascot.

In this post we present attractive, creative and user-friendly shopping carts, bags, trolleys, buckets and baskets — any kind of carts as they are used in the online-stores. Besides, we also cover related creative ideas, design approaches and usability guidelines.

But simple text link is enough, right?

Yes, sometimes. However, in many cases it depends on what kind of products the company or store is going to offer. If the company is going to sell screwdrivers, colorful shopping bags are probably not the best option for the shopping cart icon. In such cases a clearly visible text link might be sufficient. However, if you’d like to attract customers’ attention in a shoes store, you might be better off with some slightly more attractive design elements.

Landsens uses a simple text link for the shopping cart functionality. It’s one possible solution, but probably not the most effective one…

…however, sometimes a text link can be enough.

In both cases the question of how subtle shopping cart functionality is presented is the question of the store design. Shopping cart and checkout-icons have the most significant function for both customers and store owners which is why it requires a thorough design decision. And if there are effective replacements for boring text links then why not use them?

1. Attractive shopping carts

Quite often designers tend to design shopping carts in an attractive way, preferring visually appealing elements to standard trolley icons. It’s interesting that most stores which specialize in products for woman shopping carts look much prettier compared to computer electronics stores. The purpose is quite clear: shopping carts are supposed to motivate users into buying the products.

In most cases designers limit the shopping cart to its primary function — to stand for the virtual holding place for any products a customer selects from the online store. However, in some cases shopping carts are more informal, look similarly to real shopping carts and try to communicate emotions.

2. Shopping carts can improve usability

From the usability point of view it is better to offer users a brief but complete overview of the ongoing shopping process. The basic reason for that is that users can verify that the system works properly and they’ve interacted with the system properly.

In order to achieve that, shopping carts can be combined with further functionalities of the store. Since users expect the shopping cart in the right-hand side at the top of the page, it might be reasonable to include further options near the shopping cart and thus encapsulate the whole shopping process in a compact and always visible site element.

E.g. it might be useful to

• provide customers with the information of what is inside the shopping cart,
• indicate the minimal requirements for successful ordering,

  

• how much the products placed there cost,

  

• put a link to the checkout-section which might help users to finish the shopping process immediately,

  

• inform about the possible payment options,

  

• offer some help in case users have lost track of the process.

  

Providing this information immediately, a store offers users a permanent overview of the shopping process. It saves visitors a number of clicks, so they can better focus on the choice of products they prefer and feel more comfortable navigating the store.

3. Shopping cart supports the content

Shopping carts can also be used for the simple purpose of illustration. Instead of using them in the header of the online store, designers place them right into the content — e.g. in the description of a given product. Apparently, often it works as there are many examples of where this approach is used throughout the site.

Shopping cart supports the content: Bigw uses the trolley both in the header and in the headings of its store pages.

A “traditional” design: the shopping cart is often placed right to the “Add to a shopping cart”-link.

4. Subtle use of shopping carts

Just as shopping cart is sometimes visible at the first glance, sometimes it is designed in a rather subtle way. This is a first option to consider if you are about to design the store with a rather unspectacular profile. Let’s take a look at some examples of how this can be done.

Being subtle, shopping carts can also be highlighted with a distinctive color which sets it apart from the overall design of the site and makes them more recognizable.

5. Creative use of shopping carts

Apparently, shopping carts don’t necessarily have to look like a traditional shopping cart. From the users’ perspective that might be not the best design decision to use as it should be immediately recognizable and memorable. Nevertheless some designers tend to choose creative approaches.

A shopping cart which looks like a… shopping cart. You can also place multiple items in it.

Dynamic shopping cart on Hqman

6. Shopping cart is embedded into the logo

Sometimes designers tend to integrate the shopping cart into the logo of the store. In many cases the colors used in the logo then are also used for the shopping cart icon throughout the online-store.

7. Shopping Cart Gone Wrong

Although it is quite easy to follow the basic guidelines of the shopping cart design, many (way too many) web-sites often make the very same mistakes:

• the shopping cart icon is not clickable,

• the shopping cart icon is difficult to recognize,

  

• the shopping cart icon is difficult to find.

  
  Although the shopping cart box is on the right place and is being highlighted with the green color, it is so heavily overcrowded by other elements that it’s really hard to focus the attention on it.

Shopping cart: where to place?

Traditionally shopping carts are placed on the right-hand side at the top of the page. Over years users got used to this convention as they could see it over and over again on a number of online-stores. However, as the height of the box may grow with the number of selected products, sometimes it may become necessary to prefer a vertical placement of the cart box to the more usual horizontal orientation.

In such cases the shopping cart is often placed in the right-hand sidebar. In both cases the position of the shopping cart should remain consistent on all pages.

Further galleries of shopping carts

Few months ago Jason Billingsley has collected 107 Add to Cart Buttons of the Top Online Retailers. These little, rectangular, sometimes colorful clickables connect the product to the shopping cart and are an extension of your branding. It’s important to put some thought into what your “Add to Cart” icon looks like in your shopping cart.

Shopping Cart Icons were collected by Ro London few years ago. In his opinion using bags is better than using carts.