107 Add to Cart Buttons of the Top Online Retailers
Add to Cart buttons – they may be small, but no online retail store can do without them. 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.
We’ve collected over 100 Add to Cart buttons from the top online retailers of 2006 to give you some design inspiration. And we’ve summarized some usability guidelines that you can apply to your own Add to Cart button. Ok, there are actually 111 shopping cart icons, but 107 just looked cooler.
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
And now for some stats, because percentages make it cooler.
| Button Text | Button Graphics | |||
| Add to Cart | 58.0% | None | 48.2% | |
| Add to Bag | 9.8% | Arrows | 17.9% | |
| Add to Shopping Bag | 9.8% | Cart | 14.3% | |
| Add to Basket | 6.3% | Shopping Bag | 7.1% | |
| Add to Shopping Cart | 4.5% | Plus Sign | 5.4% | |
| Buy | 2.7% | Combo | 4.5% | |
| Buy Now | 1.8% | Unique | 1.8% | |
| Add Item(s) to Cart | 1.8% | |||
| Add Item(s) to Bag | 0.9% | |||
| Add to My Bag | 0.9% | |||
| Add to My Brown Bag | 0.9% | |||
| Add to My Shopping Cart | 0.9% | |||
| Order Now | 0.9% |
How the Add To Cart Button Can Reinforce Your Branding
At first the “Add to Cart” button may seem like a minor detail, but it has the potential to create an emotional connection with your brand. Your choice of shape, color, font and button text all affect that connection.
Urban Outfitters’ felt pen lettering echoes the brand’s edgy, street persona (it may however be at the expense of findability as it does nothing to stand out on the screen). Northerntool’s plus sign icon resembles a screwdriver head. Petsmart’s little red doggie ball is fun, playful and instantly recognizable. Bloomingdale’s signature “big brown bag” icon captures its cachet. And Polo’s timeless, deep navy blue button brings harmony between its online and offline identity.
Button text is also of great importance. “Add to Shopping Bag” sounds more appropriate for high end department stores than “Add to Cart,” which is more believable for a WalMart or Target. “Order Now” may work for long time catalog brands now accommodating online orders. In the UK, “Add to Basket” is more prevalent terminology.
Button Design and Usability
Button Text
Web copywriting emphasizes scannabliity — perhaps the golden rule of web copywriting is don’t use 5 words when three will do. How much more should this rule apply to a small button? Nevertheless, we found 15% of the top etailers going long. Harry and David’s “Add To My Shopping Cart” — though personal — is a mouthful.
“Buy Now” may be a stronger call to action than “Add to Cart”, but may subtly suggest the user is finished shopping or is making a commitment to purchase without time to review the order. The beauty of “Add to Cart” is that it is non-committal and assumes the user is still looking around. And if you’re a good e-salesperson, you’re showing suggested products and a “continue shopping” link from view cart page (or you are using an in-line cart with Ajax’y goodness).
Text Formatting
General web usability guidelines recommend sans-serif fonts with high contrast color selection (high-contrast white on black or dark blue rather than low-contrast like Chadwick’s blue-on-blue).
All-caps are generally discouraged in web copywriting. Mixed case is the easiest to read, although all lower case is also easy. We found 45% of “Add to Cart” buttons using all-capitals. Walgreen’s slaps white all-caps text on a light colored, tiny button with a gradient and an icon, forcing some users to squint.
Button Placement
If you offer helpful features on your product pages like wishlists, enlarged photos, color switching, alternate product views, email to friend, size chart, view cart or check out buttons, make sure the “Add to Cart” button is obvious, bright and prominent in comparison. Less important functions can be lighter colored buttons or simple text links.
Stacking Text
Stacking text is not a good idea for links or navigation buttons, and the same goes for “Add to Cart” buttons. Users have come to expect some form of rectangular shape, and when quickly scanning a page, it may take longer to distinguish button from decoration, and even become frustrating. No need to reinvent the wheel, stick to the convention.
What if You Use A Button From a Template?
Even if you don’t use a custom designed “Add to Cart” button for your shopping cart, choose a button that complements your site’s theme (complements does not infer it must be the the exact same color). And make sure you pick one design and stick with it. Ecommerce thrives on trust, and random buttons erodes customer confidence.
What do you think is the best button in the collection? What about elsewhere on the web?
Here is an interesting related blog post on calls to action in general:
http://www.grokdotcom.com/2007/02/15/large-red-buttons-oh-my/
I find it interesting that over 15% of sites use red as the Add to Cart button color.
Petsmart and Target are my favorite of the bunch (even though the Target button is red, so is it’s brand)
Ha - someone pointed out that eBags uses “Add to Cart” and not “Add to Bag” hmmm…ironic.
Victoria Secrets is the best I think (not looking at the sites, just judging by the buttons
AllOfDesign.com
Well we know what Jakob Nielsen would say…
“It’s a CART! Don’t call it anything but a CART!” But that’s a good point that for some e-tailers, a “cart” doesn’t work as well as “bag.” People aren’t total idiots, if you keep your product page layout fairly clean the cart/bag/basket/buy now button’s gonna stand out without someone having to read it. But I definitely agree that you should keep the length of text short as possible. Not drawn out like “add this item to my shopping collection of purchases so I can see them nicely when I check out” type of button, ha ha.
I like Istockphoto’s “Add to Lightbox” because it’s a designer’s term, and pretty appropriate. I think there’s room for innovation here.
I was hoping you would use research to backup your points.
That is a great idea Marcel. It is also something I’d like to see. Has anyone done button testing of size, color, text, iconography?
For more buttons do check out this similar collection of webbdesign buttons.
http://www.dragnet.se/webbdesign/button_collection.html
Well, it aint pretty but give it to JC Whitney for at least doing something diferent.
Add to my brown bag and Victoria Secrets are the best with the friendly sfae feeling and emotionally charged bag design.
Fantastic collection
I really find it kind of hard to tell what’s the best to do when it comes to website design or button designs. I think that the best thing to do is to make your visitors feel secured and safe when they visit your website and that can be achieved by having a rounded edges in your website ot button. However, we need to always test and see what works and what doesn’t.
Good article.
Important no Know this.
I referenced this article in my website,
elojas - software, artigos e tópicos sobre ecommerce>
Good point about the actual text implying different things for different brands. I’m curious if anyone has ever a/b tested different wording on their ad to cart buttons?
Very interesting to see how few sites us “Buy Now”. Also, I’m surprised at the small size of the button for most e-tailers. I can’t stand it when I have to go searching for the add to cart button.
I’m trying to convince some people to switch from buy now to add to cart.
Thanks for helping build a case :)
- Ophir
@ Jason,
I recently read a Marketing Experiments study where they tested registration landing pages, and tested a form with a green button and an orange button. The orange button converted much higher.
Marketing Sherpa also did a study and recommended larger buttons always get more clicks. Steve Krug of Don’t Make Me Think fame also recommends larger buttons for higher conversions. I see a lot of these buttons are smaller, but each product page *may* have bigger buttons also, I’ve seen various sizes of add to cart buttons on ecommerce sites, depending on whether you’re in the category / browsing area or on the product page.
We took all of these from product pages, not category pages. I would be suspect that color affects conversion unless the base site colors were similar to the lower converting button (so it doesn’t stand out). I do believe that larger helps.
45% of all “add to cart” buttons are all caps. I never really paid attention but that number seems rather high doesn’t it? I know it’s a cliche, but whenever I see anything in all caps it repels me. It really does look like screaming.
I do like the “Add Item(s) To Cart” verbage. To me putting the word “Item” in the plural form, as opposed to singular, says, Hey, no need to stop at just one item, feel free to keep shopping.
I’m surprised people still use “Buy Now” as it implies commitment and shoppers hate that :D
Impressive collection. I guess I never paid much attention to the various designs, but definitely distinctive when put side-by-side.
Another important safety tip about the color red and a call to action; 10% of the male population won’t be able to see it because they’re color blind to red.
Hello,
This is a nice inspirational blog for web designers like us. Thank you for this. The shopping carts are quite good and very unique too.
This is a good article. It was quite helpful for me. Thank you.
Some of the designs definitely stand out from the others. Overall a good collection and will pay more attention to these buttons from now on.
This is a simple and nice collection of all the icons for shopping cart. Thanks you for sharing this.
thanks for this. it is very useful
Very usefull collection, thank very much.
Very useful, I’ve updated my add to cart button – check it out http://www.impact-computers.co.uk
Great article , very useful collection , thank you
very useful collection , thank you
Well it aint pretty but give it to JC Whitney for at least doing something diferent.
PS, we nofollow all comment links. I’m seeing a lot of “hey nice post” comments here with keyword link text. Come on folks…
I am currently testing different colour versions of the same add to cart button, red, green & gold on different stores. They all have the same text “ADD TO CART” and the same shape the only difference is the colour. I will endeavour to post the results here.
I am also running a longer test on one shops where the red ADD TO CART button turns green on mouseover and the white text turns black. This test is based on the “green for go principal which all drivers should be familiar with so it should be interesting.
These results will take a while but again I’ll endeavour to post them here.
What is interesting is that Overstock uses a red add to cart button and then once in the cart they cahnge to green “progress buttons” with a padlock and blue “go back” buttons”. Something else to test!!
Good collection of buttons, inspires to create more good buttons.
Great idea. I’m really interested to see which of the texts on the buttons generated the most click throughs and which the worst. Will have to go and run some tests.
Thanks for the awesome collection..
That is a real gr8 collection a lazy designer like me will want :)
Thank you for your blog post. I had been tearing my hair out trying to get this to connect. I appreciate the help!
This is a great post. I was wondering what would be the most looked at shopping cart buttons for my site. Thanks!
I’m surprised people still use “Buy Now” as it implies commitment and shoppers hate that…
Hi
These are so beautiful and amaizing buttons.
This collection of buttons plus the study supporting it is a wonderful resource for the web. Good job! - Kudos!