Smashing Magazine - we smash you with the information that will make your life easier. really.
Shopping Carts Gallery: Examples and Good Practices
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.
The Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Author of several books. Runs the business.
(2 votes, average: 5.00 out of 5)
Loading ...- 80 Comments
- 1
- 2February 7th, 2008 12:51 pm
In my opinon the cart of the german “plus” store is cool too. Have a look: http://www.plus.de
- 3February 7th, 2008 12:57 pm
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?
- 4February 7th, 2008 1:24 pm
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.
- 5February 7th, 2008 1:53 pm
Another very nice shopping cart can be found on http://www.plus.de.
I really like the idea :)
- 6February 7th, 2008 1:59 pm
Great post! And thanks for the link to Get Elastic :D
- 7February 7th, 2008 3:16 pm
Interesting post, ive been experimenting with a shopping cart for a new site and got some good tips
- 8February 7th, 2008 4:04 pm
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!
- 9February 7th, 2008 4:17 pm
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?
- 10February 7th, 2008 7:37 pm
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!
- 11February 7th, 2008 7:45 pm
How about open source shopping carts? like Magento, OsCommerce, Comersus, Zen-Cart or Shopify. Well, you already put Shopify. Magento rules!
- 12February 7th, 2008 7:58 pm
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.
- 13February 7th, 2008 8:13 pm
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.
- 14February 7th, 2008 9:36 pm
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 :-)
- 15February 7th, 2008 10:29 pm
like to see more ecommerce articles…good work
- 16February 7th, 2008 11:15 pm
These are really cool stuff! Thanks for the post!
- 17February 7th, 2008 11:35 pm
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…
- 18February 7th, 2008 11:39 pm
Another good one is Ikea.se
NIce and clean. .. - 19February 8th, 2008 12:26 am
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/
- 20February 8th, 2008 12:27 am
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/
- 21February 8th, 2008 1:02 am
Great post looking for a good shopping cart
- 22February 8th, 2008 1:20 am
Nice one. This sector is growing and this kind of resource is always a good choice.
- 23February 8th, 2008 1:33 am
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!
- 24February 8th, 2008 1:59 am
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.
- 25February 8th, 2008 2:27 am
Thanks for this, I have been hanging out for Magento to go full spead ahead, really like the look of it.
- 26February 8th, 2008 2:38 am
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”
- 27February 8th, 2008 3:51 am
thanks, nice roundup. I was looking for a good shopping cart solution.
- 28February 8th, 2008 3:55 am
thanks, this is a big help to my project!
- 29February 8th, 2008 4:13 am
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!
- 30February 8th, 2008 4:34 am
Impressive resource on a so specific argument!
Thank you very much. - 31February 8th, 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. [...]
- 32February 8th, 2008 7:14 am
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?
- 33February 8th, 2008 8:54 am
@ 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. - 34February 8th, 2008 11:23 am
Great round-up of icons, design and usability. I’ll be sure to reference this for my next e-commerce site.
- 35February 8th, 2008 2:27 pm
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
- 36February 8th, 2008 11:33 pm
Great list of shopping carts! I never knew there are so many variations. Thanks.
- 37February 9th, 2008 4:17 am
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
- 38February 9th, 2008 7:55 pm
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
- 39February 10th, 2008 3:30 am
There’s also a cool Rube-Goldberg mashup with shopping cart on http://producten.hema.nl/
- 40February 11th, 2008 6:30 am
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…
- 41February 11th, 2008 7:53 am
Wow!!
Thanks for the article!! very very good!!
- 42February 12th, 2008 1:09 pm
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…
- 43February 12th, 2008 1:52 pm
I found an exceptional amount of educational resources in this post. Keep up the good work.
- 44February 13th, 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.
- 45February 14th, 2008 6:23 pm
WOW! so many creative cart icons.It is useful in my work for building website
- 46February 18th, 2008 5:53 am
This is really good I am doing a couple of e sites right now , this well help me out
thanks - 47February 18th, 2008 8:55 am
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.
- 48February 21st, 2008 8:14 am
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
- 49March 10th, 2008 11:28 am
Totally agree. Great list but I’d like to see more future thinking and some ideas of what’s next.
- 50April 6th, 2008 9:59 pm
i have to admit these posts really useful~
great site and thanx~ - 51April 21st, 2008 9:21 pm
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 &
- 52April 26th, 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
- 53April 28th, 2008 11:08 am
just took a look at the new canon store, what an improvement fom the previous store and checkout. more usable me thinks.
Very Cool!
- 54May 20th, 2008 8:24 am
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!
- 55June 10th, 2008 8:54 pm
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.
- 56July 2nd, 2008 3:35 am
Hi i saw ur tutors n websites which is very helpful to design my online stores its really looks cool.
- 57July 15th, 2008 12:26 am
Positive and healthy creticism about shopping cart. You have cleared many potentiol issues about shopping cart.
- 58August 7th, 2008 8:32 am
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.
- 59August 27th, 2008 8:37 am
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..
- 60September 1st, 2008 7:49 pm
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
- 61September 24th, 2008 11:55 pm
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 - 62October 8th, 2008 7:37 am
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.
- 63October 30th, 2008 5:55 am
Great information, bery useful. The site of Mimi Beauty has got some unique elemetns you might like.
- 64November 9th, 2008 12:38 pm
great article :)
- 65November 10th, 2008 3:04 am
I think we will use some information from this article for avari hotels
- 66November 21st, 2008 3:56 pm
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
- 67December 3rd, 2008 9:19 pm
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!
- 68December 7th, 2008 1:05 pm
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 - 69December 16th, 2008 4:15 pm
@ 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.
- 70December 20th, 2008 7:47 pm
SnapJar…very cool!!!
- 71February 5th, 2009 10:01 pm
good article . Thanks
- 72February 9th, 2009 12:38 pm
Thank you for this great article. Ralph
- 73April 2nd, 2009 10:42 am
Wow! A lot of ideas for shopping cart button… glad i click this one :)
- 74April 12th, 2009 8:29 am
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 - 75May 31st, 2009 6:02 pm
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.
- 76
- 77September 28th, 2009 6:21 am
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.
- 78October 28th, 2009 5:47 pm
We are the professional shopping cart provider for full set ecommerce service, we have many shopping cart that is in operation now.
Our team is experienced, and we are excellent. If you want to obtain the high quality service by the low price, please give us an
opportunity to work for you 30 days, in which you can understand us sufficiently, you have the final right to determine if you choose
us to work for you.
Content of our work:ecommerce shopping cart website design, ecommerce shopping cart development, Payment & Shipping integration,
Host maintenance, eCommerce marketing, eCommerce shopping cart SEO, Assist you to sell your products to China! etc.
Our website( If the following website cann’t be displayed, search “IECSP” with Google, then you will find us) - 79November 9th, 2009 9:34 am
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 - 80November 10th, 2009 9:05 am
Decent article… looking forward to borrowing some inspiration…
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- The Big Showcase Of Online T-Shirt Stores - http://bit.ly/5Tq8uA
- @ilmv oh ok then ;)
- @ilmv no, the SM Book will not be out of date :) We made sure it contains universal design, usability and marketing principles.
- Apple ad bombing Windows 7 on Google - http://bit.ly/28ctPq
- Atatonic - a fresh CSS framework - http://bit.ly/4oOV2w (via @umutm)
- @HrvojeKC yes, that's an interesting idea. Maybe when the waiting is over, we'll write a detailed post about it.
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?