Add to Cart Buttons from 50 Top Online Retailers

A List of Website Buy Buttons from Some of the Biggest Ecommerce Sites

Buy buttons may be the one thing no ecommerce website should be without.  A lot of people have expressed thoughts on what makes a buy button better – be it brighter colors, bolder graphics, or a bigger size.  It makes sense to want to optimize your add to cart button, as the ultimate goal of any product page is to get that product into the shopping cart.  It’s common to hear that vibrantly colored flashy buttons attract our attention, subliminally compelling the shopper to click.  But if a big red button offered guaranteed clickability, surely every online store’s product pages would sport the same.  So how do the nation’s largest etailers treat the essential add-to-cart?  I grabbed a list of buy buttons from the top 50 ecommerce companies in 2008 to see how the buttons really did compare.

As you can see, they are not all big, bad, and red.  In fact, this collection of buttons resembles a bag of mixed-colored candy more than anything.  So how did the attributes break down?

Buy Button Color

Green  13 (26%)
Red  10 (20%)
Orange  10 (20%)
Blue  6 (12%)
Grey  4 (8%)
Yellow  3 (6%)
Pink  2 (4%)
Purple  1 (2%)
Black  1 (2%)

Buy Button Color Tone

Warm  25 (50%)  – That’s red, yellow, orange, and pink.
Cool  20 (40%) – That’s green, blue, and purple.
Neutral  5 (10%) – That’s black and grey.

Apparently brown just isn’t a hot button color in anyone’s book.

Add to Cart Call to Action

“Add to Cart” – 28 (56%)
“Add to Bag” – 10 (20%)
“Add to Shopping Cart” – 2 (4%)
“Add Items to Bag” – 1 (2%)
“Add” – 1 (2%)
“Add to Basket” – 1 (2%)
“Select Delivery Date” – 1 (2%)
“Add to Shopping Bag” – 1 (2%)
“Next” – 1 (2%)
“Order Now” – 1 (2%)

I guess the needy plea, “Buy Me Now, Please!” didn’t make the cut.  In terms of the use of “bag” versus “cart,” in general the retailers employing the “bag” are more likely to be associated with bags in their physical counterparts, like apparel retailers.  (When was the last time you pushed a shopping cart through Nordstrom?)

Extra Add to Cart Button Graphics

None  28 (56%)
Arrow  8 (16%)
Cart  6 (12%)
Plus Sign  3 (6%)
Bag  2 (4%)

Button Size

Does size matter?  Circuit City and the Systemax family of sites seem to think so.  Each of their sites uses a strikingly large green bar as their add-to-cart.  Never mind if green isn’t associated with the brand.  On the smaller side, Gap has chosen a barely-there concept.  The petite pale grey design certainly doesn’t stand out on their many-shades-of-grey site. Gap’s sister brands Banana Republic, Old Navy, Athleta, and Piperlime also appear to be taking the less-is-more approach.  I didn’t measure each button, but most fall within the realm of 1 to 1.5 inches.

Findability Still Matters

In the end, it doesn’t matter how fantastic your button looks, if it’s hard to find on the page.  (This is one argument for vibrant contrasting colors; the more attention it attracts, the easier it will be to quickly spot.)  Online shoppers are accustomed to quickly scanning pages to pull out relevant information.  A button that jumps off the page eases this process.  Most retailers stuck with common usability conventions and set their buttons in a sans serif font – although L.L. Bean seems to have missed the memo on this one.  Twenty-five of the buttons capitalized the first letter of each word, 20 put the whole call to action in caps, and 5 chose all lower-case.

The Gap and Target’s use of white on light grey is probably better avoided; some old printing conventions still hold true online, and high contrast between text and background is one of them.  As comparison, Musician’s Friend black text on lighter yellow background quickly jumps out and is easy to read.  All in all, many of the buttons are not readily identifiable out of context.  For me, Amazon, Victoria’s Secret, and Toys R Us maintain the company branding and are familiar enough to be identified, even without the corresponding site.  There doesn’t seem to be a clear set of guidelines that even the best-performingetailers use when crafting their buttons.  The best recommendations may still be to ensure that the button is clearly visible and stands out on the page, regardless of color or size.  For an older look at shopping cart buttons, Get Elastic rounded up a list of over 100 buttons in 2007.
Update:
After talking with some usability consultants at Internet Retailer Web Design & Usability 2010, it seems that green is indeed the preferred choice over red for usability studies examining effective buy button color.

The Websites:

1. Amazon.com
2. Staples.com
3. Dell.com
4. OfficeDepot.com
5. Apple.com
6. OfficeMax.com
7. Sears.com
8. CDW.com
9. Newegg.com
10. BestBuy.com
11. QVC.com
12. SonyStyle.com
13. Walmart.com
14. Costco.com
15. JCPenney.com
16. shopping.HP.com
17. CircuitCity.com (CircuitCity is now owned by Systemex Inc, which fell at #21 on the Internet Retailer list for 2008. Systemex also owns TigerDirect and CompUSA.  They all have the save Buy Button).
18. Netflix.com
19. VictoriasSecret.com
20. Target.com
21. LLBean.com
22. Macys.com
23. Williams-Sonoma.com
24. Gap.com
25. HSN.com
26. Zappos.com
27. Amway.com
28. Overstock.com
29. Avon.com
30. 1800Flowers.com
31. Nordstrom.com
32. Buy.com
33. SportsmansGuide.com (As owned by Redcats Group, who also have a lot of other websites I could have chosen from, but I didn’t).
34. NeimanMarcus.com
35. MusiciansFriend.com
36. Blockbuster.com
37. PCConnection.com
38. ToysRUs.com
39. Cabelas.com
40. BarnesandNoble.com
41. Scholastic.com
42. HomeDepot.com
43. VistaPrint.com
44. SaksFifthAvenue.com
45. Nutrisystem.com
46. Drugstore.com
47. Nike.com
48. Kohls.com
49. JCrew.com
50. OrientalTrading.com

This list of sites was compiled from Internet Retailer’s list of top 500 ecommerce businesses for 2008.  Omitted from the list is Peapod Inc, which is a login for current customers only site.

Other Stories You Might Like:

Dear Marketers on Facebook

Button Sluts and Web Actions

Employment Trends in Marketing and Media [Vis...

Ebook Libraries and Lending Services