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

Footnotes

  1. 1 http://www.patternhead.com/
  2. 2 http://www.smashingmagazine.com/2008/01/15/isnt-it-sweet-mascots-in-modern-web-design/
  3. 3 http://www1.landsend.co.uk
  4. 4 http://www1.landsend.co.uk
  5. 5 http://www.sainsburyskitchenappliances.co.uk
  6. 6 http://www.sainsburyskitchenappliances.co.uk/
  7. 7 http://www.bathandbodyworks.com
  8. 8 http://www.lasenza.co.uk
  9. 9 http://www.boden.co.uk
  10. 10 http://www.swarovski.com
  11. 11 http://www.geraldonline.com/
  12. 12 http://threadless.com/
  13. 13 http://www.ikea.com/webapp/wcs/stores/servlet/OrderItemDisplay?storeId=12&langId=-1&catalogId=11001&orderId=.&newLinks=true
  14. 14 http://www.missselfridge.com
  15. 15 http://www.bestbuy.com
  16. 16 http://www.bbcshop.com/
  17. 17 http://www.scrap2coeur.com/
  18. 18 http://www.blaugallery.com
  19. 19 http://www.bloomingdales.com/
  20. 20 http://www.majestic.co.uk
  21. 21 http://www.goldsmiths.co.uk/
  22. 22 http://www.bloomingdirect.com/
  23. 23 http://www.laskys.com/
  24. 24 http://www.hmv.co.uk/
  25. 25 http://www.microsoft.com/windows/shop/default.mspx
  26. 26 http://www.shopify.info/
  27. 27 http://www.bigw.com.au/
  28. 28 http://www.bigw.com.au/
  29. 29 http://www.mtonline.ru/
  30. 30 http://www.microsoft.com/Rus/Licensing/where/ishops.mspx
  31. 31 http://www.studiobonsai.pl
  32. 32 http://www.beautyexpert.co.uk/
  33. 33 http://www.elc.co.uk/
  34. 34 http://www.craftsuperstore.co.uk
  35. 35 http://store.mozilla.org/
  36. 36 http://www.alohashirtshop.com
  37. 37 http://www.equip.co.uk/
  38. 38 http://shop.lego.com/Default.aspx
  39. 39 http://www.hqman.com/
  40. 40 http://www.hqman.com/
  41. 41 http://www.hqman.com
  42. 42 http://www.foxcubs.com/
  43. 43 http://www.beesandgees.com
  44. 44 http://www.woolworths.co.uk/web/jsp/index.jsp
  45. 45 http://www.tommybahama.com
  46. 46 http://www.canubelieveit.com
  47. 47 http://www.twentytwentyone.com/
  48. 48 http://www.chank.com/
  49. 49 http://www.loopdelou.com/
  50. 50 http://www.prestashop.com/
  51. 51 http://www.shopzilla.com/
  52. 52 http://tokonita.com/
  53. 53 http://dirtycoast.com
  54. 54 https://store.canon-europe.com/servlet/ControllerServlet?Action=DisplayPage&Env=BASE&Locale=en_GB&SiteID=canoncon&id=HomePage
  55. 55 http://www.diytools.co.uk/diy/Main/Home.asp
  56. 56 http://www.getelastic.com/add-to-cart-buttons/
  57. 57 http://www.getelastic.com/add-to-cart-buttons/
  58. 58 http://www.intersmash.com/300images/
  59. 59 http://www.intersmash.com/300images/

↑ Back to top Tweet itShare on Facebook

Co-Founder and former CEO of Smashing Magazine. Sven is now writing the Conterest Blog about Blogs, Content and Publishing - in german language.

Advertisement
  1. 1

    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 &

    -1
  2. 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
  3. 103

    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
  4. 154

    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
  5. 205

    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
  6. 256

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

    0
  7. 307

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

    0
  8. 358

    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
  9. 409

    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
  10. 460

    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
  11. 511

    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
  12. 562

    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
  13. 613

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

    0
  14. 664

    great article :)

    0
  15. 715

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

    0
  16. 766

    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
  17. 817

    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
  18. 868

    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
  19. 919

    @ 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
  20. 970

    SnapJar…very cool!!!

    0
  21. 1021

    good article . Thanks

    0
  22. 1072

    Thank you for this great article. Ralph

    0
  23. 1123

    Wecostumizedweb

    April 2, 2009 10:42 am

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

    0
  24. 1174

    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
  25. 1225

    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
  26. 1276

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

    0
  27. 1327

    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
  28. 1378

    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
  29. 1429

    Decent article… looking forward to borrowing some inspiration…

    0
  30. 1480

    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
  31. 1531

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

    0
  32. 1582

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

    0
  33. 1633

    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
  34. 1684

    Great Article i m seaching new idea regarding my website

    0
  35. 1735

    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
  36. 1786

    “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
  37. 1837

    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
  38. 1888

    Nice article. Thanks man for your great effort.

    1
  39. 1939

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

    they have a very good design, which is effective.

    0
  40. 1990

    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