Shopping Carts Gallery: Examples and Good Practices

Advertisement

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.

Screenshot Shopping Cart1
An unusual view of the shopping cart, a huge shopping bag accompanied by a mascot2.

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.

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

Screenshot Shopping Cart5
…however, sometimes6 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.

Screenshot Shopping Cart7

Screenshot Shopping Cart8

Screenshot Shopping Cart9

Screenshot Shopping Cart10

Screenshot Shopping Cart11

Screenshot Shopping Cart12

Screenshot Shopping Cart13

Screenshot Shopping Cart14

Screenshot Shopping Cart15

Screenshot Shopping Cart16

Screenshot Shopping Cart17

Screenshot Shopping Cart18

Screenshot Shopping Cart19

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,

    Screenshot Shopping Cart20

  • how much the products placed there cost,

    Screenshot Shopping Cart21

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

    Screenshot Shopping Cart22

  • inform about the possible payment options,

    Screenshot Shopping Cart23

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

    Screenshot Shopping Cart24

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.

Screenshot Shopping Cart25

Screenshot Shopping Cart26

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

Screenshot Shopping Cart29

Screenshot Shopping Cart30

Screenshot Shopping Cart31
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.

Screenshot Shopping Cart32

Screenshot Shopping Cart33

Screenshot Shopping Cart34

Screenshot Shopping Cart35

Screenshot Shopping Cart36

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.

Screenshot Shopping Cart37

Screenshot Shopping Cart38

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.

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

Screenshot Shopping Cart39Screenshot Shopping Cart40
Dynamic shopping cart on Hqman41

Screenshot Shopping Cart42

Screenshot Shopping Cart43

Screenshot Shopping Cart44

Screenshot Shopping Cart45

Screenshot Shopping Cart46

Screenshot Shopping Cart47

Screenshot Shopping Cart

Screenshot Shopping Cart48

Screenshot Shopping Cart49

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.

Screenshot Shopping Cart50

Screenshot Shopping Cart51

Screenshot Shopping Cart52

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,

    53

  • the shopping cart icon is difficult to recognize,

    Screenshot Shopping Cart54

  • the shopping cart icon is difficult to find.

    Screenshot Shopping Cart55
    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 Retailers56. 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.

Screenshot Shopping Cart57

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

Screenshot Shopping Cart59

↑ Back to topShare on Twitter

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

  1. 1

    Seems like the less people have to think about how to order something on line the better, which has to do with the visual as well as the back-end components. I really like the examples, it would also be great to see a list of e-commerce plug-ins. Companies that offer back-end support for e-commerce to be placed into a website and give you the option to change the graphics with imagery, css etc. Anyone have any suggestions?

    2
  2. 2

    In my opinon the cart of the german “plus” store is cool too. Have a look: http://www.plus.de

    -1
  3. 3

    As usual I love your lists. They are very inspirational. Recently I came upon a site that uses drag and drop to cart functions at panic.com. I thought this was fun and new and maybe a direction in which future shopping carts would go. Would love to see more of this technology. A possible option for a future list?

    3
  4. 4

    Might of very less useful to me…but though its nice to have a look at different designs…its inspirational ….

    I love how you always break ur horizons and have look at different designs.

    0
  5. 5

    Another very nice shopping cart can be found on http://www.plus.de.

    I really like the idea :)

    -2
  6. 6

    Great post! And thanks for the link to Get Elastic :D

    0
  7. 7

    Interesting post, ive been experimenting with a shopping cart for a new site and got some good tips

    0
  8. 8

    very good post! I’ve been shopping online a few weeks back, looking for hardware, searching for cheap shops. Found several sites that only provided acces to “your cart” by clicking too many links first…

    Horrible experience!

    0
  9. 9

    Nice post!

    I didn’t realize so many people used Shopping basket :) This is definately good to know that people aren’t afraid to branch out from the ‘Shopping Cart’ keywords…

    I wonder, have you guys found any nice examples of Smaller Niche websites that have gone completely out of the Market/Mall tie-ins with their ‘shopping cart’ icons?

    1
  10. 10

    For those interested in a Web 2.0 Open Source eCommerce Solution – check out Magento

    The Varien blog – eCommerce Cache – also contains many examples of good and bad examples of many elements in ecommerce design.

    Thanks!

    0
  11. 11

    How about open source shopping carts? like Magento, OsCommerce, Comersus, Zen-Cart or Shopify. Well, you already put Shopify. Magento rules!

    0
  12. 12

    Interesting article, i think text works better than icons, I’m a big fan of “add to cart +”, positioned somewhere close to the information about the product.

    I like the drag and drop method of Vitaman global it’s a flash cart however. And I have a think for brunettes.

    0
  13. 13

    When I read the RSS heading I thought it was a collection of cart software. I used zen cart and magneto looks interesting. I thought about e-junkie’s cart, but my current fav is foxycart. CSS and AJAX goodness, it is fairly simple right now, but that was just what I needed at the time.

    http://www.foxycart.com

    0
  14. 14

    Very interesting article, especially because I’m just in the middle of a project of redesigning the store for a client. And, after getting really bored with the standard approaches of a shopping cart so I decided to make it really big and prominent and use it as a design element, combined with the search box. It IS a store after all and the shopping cart is usually one of the predominant things at a store!

    The design turned out remarkably interesting. Now I’m just waiting for feedback from the client and of course, I am hoping that they like it too :-)

    0
  15. 15

    like to see more ecommerce articles…good work

    0
  16. 16

    These are really cool stuff! Thanks for the post!

    0
  17. 17

    Very inspirational and as usual lot of information for the development community… but the truth is we get to do very less of these e-commerce stuff now-a-days…

    -1
  18. 18

    Another good one is Ikea.se
    NIce and clean. ..

    0
  19. 19

    Thanks a ton for this great post… been looking around for a while to get a good sopping cart system in place for my latest site: http://timothysykes.com/

    0
  20. 20

    Thanks a ton for this great post… been looking around for a while to get a good shopping cart system in place for my latest site: http://timothysykes.com/

    -2
  21. 21

    Great post looking for a good shopping cart

    0
  22. 22

    Nice one. This sector is growing and this kind of resource is always a good choice.

    0
  23. 23

    Every time I wonder when you guys are going to put something new on the site and every time you surprise me :) Great collection, I like the one from Lasenza best!

    0
  24. 24

    rmn, Shopify is a cool shopping cart service using ruby but it isn’t open source. Magento does have potential but it runs slowly. Hopefully it’ll get faster by end of beta. Prestashop is also in beta but seems closer to production. Their admin panel is the best I’ve seen so far.

    0
  25. 25

    Thanks for this, I have been hanging out for Magento to go full spead ahead, really like the look of it.

    0
  26. 26

    very good article! thank you very much and keep up the good work as usual!
    im glad to see such professional articles and ressources in the web -for free- ! That’s what makes the internet be of great value for me!

    PS: Theres a little mistake in one heading: “subtle” “subtile”

    0
  27. 27

    thanks, nice roundup. I was looking for a good shopping cart solution.

    0
  28. 28

    thanks, this is a big help to my project!

    0
  29. 29

    Great article, So many of the shopping carts at the moment looks the same, ZenCart, OSCommerce, you can spot them a mile off, nice to see some really good exmaples out there!

    0
  30. 30

    Impressive resource on a so specific argument!
    Thank you very much.

    1
  31. 31

    sandoba.de Entwickler-Blog

    February 8, 2008 5:11 am

    [...] Das Smashing Magazine, die englisch-sprachige Version des hierzulande wahrscheinlich besser bekannten Dr. Web, hat sich mit der Frage beschäftigt, wie man den Warenkorb in einem Online-Shop so gestaltet, dass dieser für den Kunden möglichst leicht aufzufinden und ebenso leicht bedienbar ist. Gerade dem Warenkorb kommt bei der Bestellung im Online-Shop eine hohe Bedeutung zu – schließlich will man dem Kunden bei der Bestellung keine unnötigen Hürden in den Weg stellen. [...]

    0
  32. 32

    Following a link from our agency blog I saw a rather large shopping basket icon on Perfect USA. What I find interesting is that only one of their products would actually fit in a real hand basket. Wouldn’t a shopping cart have been a better icon?

    0
  33. 33

    @ Jan and TanteHelga:
    Yes, the plus.de store is cool, but the most funny thing is the chainsaw advertising above all this kitchen stuff! (“Kitchen fun for cooking friends”…”Looking for a chainsaw? Grab it now!”). Have a look.

    0
  34. 34

    Great round-up of icons, design and usability. I’ll be sure to reference this for my next e-commerce site.

    0
  35. 35

    There is some really nice cart icons on that list… cool stuff. If i’m allowed a line of self promo, i did an unsual icon for cart on that site daalou.com. Peace

    0
  36. 36

    Great list of shopping carts! I never knew there are so many variations. Thanks.

    0
  37. 37

    Sweet list, i like the one which says Hello Stranger. I like it because it is text and icons. I dont like just text alone :)

    Job well done guys at smashing magazine

    0
  38. 38

    Excellent article that shows how many different designs there are of this. I’d like to know whether there is any preference to the use of basket or cart? Personally I prefer just the text link but having now seen the collection of graphics here it’s given me food for thought which I’ll discuss with our ecommerce company

    0
  39. 39

    There’s also a cool Rube-Goldberg mashup with shopping cart on http://producten.hema.nl/

    -1
  40. 40

    Does anyone besides me find it ironic that some companies use bags instead of carts or baskets? Generally, one puts items into carts/baskets until checking out; at that point, the goods would be transferred to a bag or carryall…

    0
  41. 41

    Wow!!

    Thanks for the article!! very very good!!

    0
  42. 42

    is it me or does anybody else think that list of cart icons at the bottom of the article are Fugly? Some look like pieces of crap…

    0
  43. 43

    I found an exceptional amount of educational resources in this post. Keep up the good work.

    0
  44. 44

    Web Designer Group

    February 13, 2008 5:02 am

    I think the post is best on shopping cart design and placing it in the page. All tips are very precious. thanks for such nice work.

    1
  45. 45

    WOW! so many creative cart icons.It is useful in my work for building website

    0
  46. 46

    web design, almog , media design

    February 18, 2008 5:53 am

    This is really good I am doing a couple of e sites right now , this well help me out
    thanks

    0
  47. 47

    For a me a shopping trolley is much more obvious than a shopping bag, even though it doesn’t make sense to me in real life as I use a shopping basket much more often than a shopping trolley. I think it is just what I have become used to, and for someone new to the internet it is probably quite different.

    0
  48. 48

    Check out this Dutch store for baby clothes: http://www.kleertjes.com
    In 2007 they won the Dutch award for Best Webstore.

    The have their shopping cart OUT OF SIGHT! It’s below the fold and has an unconvential design

    Weird huh

    1
  49. 49

    Totally agree. Great list but I’d like to see more future thinking and some ideas of what’s next.

    0
  50. 50

    i have to admit these posts really useful~
    great site and thanx~

    0
  51. 51

    Wow,great design.An online shopping cart is one example of an online tool that can do a lot for us. It allows my customers to easily shop your store and check out with a few simple clicks of the mouse. Nice posting&design,so informative. Thanks &

    0
  52. 52

    e-commerce platform

    April 26, 2008 8:52 pm

    This was actually a very inspirational article. Sometimes we forget about creativity and just do what seems right at the time. This articles reminds me that there are many ways to accomplish our goal which is to provide the best shopping cart software available. A great example is using a bag picture instead of a basket. That gives it a more bricks and mortar feel. Very cool article thanks

    0
  53. 53

    just took a look at the new canon store, what an improvement fom the previous store and checkout. more usable me thinks.

    Very Cool!

    0
  54. 54

    A very interesting website to teach people how to create a nice online shop for easy access and shopping, the usual add to cart and add to bag buttons have many variations. And of course the payment method, as well, I’d like to recommend http://www.worldofwarcraft.com. As I myself am a WoW player, cheerz!

    0
  55. 55

    Very good and useful article.
    I like the way of thousands shopcart designs and utilities.
    An interesting one is from Brazilian Shop: ,a href=”http://www.sapatoshow.com.br”>SapatoShow, its a Shoe store with variety of shoes, heels, mules,purses…

    Has some of your descriptions, right-hand, very visible, and the buttons Add To cart compatible with Design.

    0
  56. 56

    Hi i saw ur tutors n websites which is very helpful to design my online stores its really looks cool.

    0
  57. 57

    Positive and healthy creticism about shopping cart. You have cleared many potentiol issues about shopping cart.

    0
  58. 58

    Varien is a nice site with a lot of good articles. But the pages are way too long. they need to work on the usability of their own site! But a good resource overall.

    0
  59. 59

    some useful information on here – I have seen some good shopping carts also – styestylestyle.com have a and effective cart but I also like many on here..

    0
  60. 60

    I know I’ve come on this late, but thanks for the post. I needed a good shopping cart icon and you’ve helped -Link

    0
  61. 61

    Hi ,

    We’ve just created a list of “Checkout Buttons” :) I hope you’ll find it interesting.
    You can see the list on the Checkout Buttons page, as long with some interesting statistics about them.

    Cheers,
    Traian

    0
  62. 62

    We’re e-Commerce specialists and have to disagree with Ro London’s opinion:

    …using bags is better than using carts.

    It all depends on the real size of the product, eg.

    1. If you’re buying a ‘Hair Shampoo’, a ‘cart’ (shopping trolley) makes the most sense, as the commonest place to buy this is a supermarket, followed by a ‘basket’.

    2. If you’re buying a packed of ‘Incense’, a ‘basket’ makes sense.

    3. If you’re buying a pair of ‘Crocs’ (aussie slip-on rubber shoes), you’d put them in a ‘bag’, same for swimming gear etc.

    Now there are a few problems with this, for instance…….what do you put a ship’s anchor in if you buy one online? Probably a cart, as there’s no way it’s going to fit in a calico shopping bag or a handbasket. If you’re expecting someone to add large numbers of products, a cart will often make sense, unless the product is lingerie (or incense), in which case we’re right back to a basket.

    Instead of following a convention for shopping carts, use your head…A wood merchant might have an ‘add to pallet’, and a furniture shipper might have ‘add to container’, in which case you show an understanding of your client and their customers, increasing visitor hold and conversions.

    0
  63. 63

    Great information, bery useful. The site of Mimi Beauty has got some unique elemetns you might like.

    0
  64. 64

    great article :)

    0
  65. 65

    I think we will use some information from this article for avari hotels

    0
  66. 66

    I know Miva Merchant allows for customizing all images, css, layout, etc.. for a shopping cart. It can be used on it’s own or integrated into an existing site. http://www.mivamerchant.com

    0
  67. 67

    Good Article…Though I’ve realized a shopping cart that looks good and works well takes a bit of work to put together. I’ve been reviewing a few shopping cart services (those that have a clean design and simple interface) and I’m thinking about giving snapjar [www.snapjar.com] a shot. Any thoughts?

    Thanks!

    0
  68. 68

    Online shops should have a standardized look with a flavour of personalization. Customers should recognize the required steps to come to an order. This is one of the reasons I am in favour of open source platforms as OScommerce in an example as for instance Hadewich-kinderkleding.nl. I would encourage standards of certain aspects of the button as content and basic shape.
    Ton

    0
  69. 69

    @ ton,

    standards are good in any industry, but I don’t think OScommerce or Magento or any other ecommerce OS will be able to set any in online. Websites are distinct entities and like any person, they will have personalities. I agree that having standards will help users, but that I don’t see it happen.

    0
  70. 70

    SnapJar…very cool!!!

    0
  71. 71

    good article . Thanks

    0
  72. 72

    Thank you for this great article. Ralph

    0
  73. 73

    Wecostumizedweb

    April 2, 2009 10:42 am

    Wow! A lot of ideas for shopping cart button… glad i click this one :)

    0
  74. 74

    I am a shopping cart designer and I think that most useful information provided here is the icons, and the emphasis on ease of use, and flow of information.

    Whenever I design websites, I tend to keep a few things in mind

    1) Well organized layout
    2) Pleasant colors
    3) More use of icons, wherever possible, to keep things “visually driven”
    4) Search engine friendly URLs

    0
  75. 75

    good article but – has the writing of smashing magazine been outsourced to India? If non-native speakers are writing your articles, you should be sure to have somebody edit them! Just a suggestion.

    0
  76. 76

    good content! I’ve referenced this in an article on e-commerce buttons.

    0
  77. 77

    I was searching for some good idea about shopping cart, which I want to implement for my upcoming site. This article help me a lot to understand how good design is effective. I am really inspired from this and follow the guidelines for my site.

    0
  78. 78

    Great Article i m seaching new idea regarding my website , shopping online around the world but , i m going to fine new unique name for my web .
    University

    0
  79. 79

    Decent article… looking forward to borrowing some inspiration…

    0
  80. 80

    Does anybody have any data to support what works best? We (bulbby.com) are working with a textual shopping basket on top of the page and quite frankly I’ve never even considered to test other possibilities. Did anybody experiment (A/B testing or whatever) and collect (solid) data?

    0
  81. 81

    @Ron at bengeltje.com we just run test with Google Weboptimizer. It’s a standard feature in Magento you should try it.

    0
  82. 82

    All these shopping cart designs are very nice but I like the simple ones. I think you are really doing a great job.

    0
  83. 83

    All these products are really good, I like that but i think the Avon KIMBERLI HUGGINS Products are also good one as health point of view and those products available in reasonable price

    0
  84. 84

    Great Article i m seaching new idea regarding my website

    0
  85. 85

    Great article – even though I’m only just finding it. Was really useful in convincing my boss to let me redesign our ecommerce site header. Which has really upped it’s usability.

    0
  86. 86

    “If the company is going to sell screwdrivers, colorful shopping bags are probably not the best option for the shopping cart icon.”

    … Why? lol Same principles apply, regardless of what you’re selling.

    0
  87. 87

    We recently created an eCommerce site http://www.happywitch.co.uk and the shopping cart icon was key. The site is for children’s toys and accessories and so we ensured the shopping cart icon design matched the style of the products we were selling.

    0
  88. 88

    Nice article. Thanks man for your great effort.

    1
  89. 89

    Look at http://www.sliponline.nl,

    they have a very good design, which is effective.

    0
  90. 90

    Because of characteristics of our business industry, our website does not have ajax add to cart functions: http://www.magestore.com/magento-customer-attributes-extension.html . However, I think all of online retailer store should have this functions

    0

↑ Back to top