Web Design Magazine | News, Tips, Blogs, Articles & Insights

Designing Better Add-To-Cart Buttons

Written by Pete Prestipino | Jan 15, 2009 6:00:00 AM

More than any other group of Web professionals, Internet retailers spend the most time focusing on individual page elements. They do this for good reason; each and every change they make (even small changes) produce a big impact. Sometimes it's not always for the better. That's why understanding best practices goes a long way towards getting your enterprise in the black.

Chances are high that the first add-to-cart button you encountered didn't make much of an impression. It's likely you understood it's purpose and you took the pre-determined action set forth by the merchant - buy and move down the sales funnel towards order completion. But as more merchants came online and user attention and loyalty became more difficult to secure, merchants began to get creative. For some end-users, merchants went overboard and made broader influences on consumers purchasing behavior - sometimes in good way, sometimes not.

From this trend came elemental testing. And one element that is often tested more than any other is the Add-To-Cart button. When redesigning an add-to-cart button, the elements tested are often the visual design, the text/copy and usability. Let's first look at button text and how wording can influence user behavior, as well as some general design choices related to add-to-cart buttons.

Terminology and Design: Choices for Add To Cart Buttons
A common rule of thumb in copywriting has always been "less is more" - why write ten words when five will do nicely, right? The some theory holds true to designing action-oriented buttons on the Web.

Perhaps the most common text on add-to-cart buttons many years ago was "Buy Now." But merchants understood that it's best not to limit interaction, and that verbiage (buy now) does exactly that. Think of it this way, if you were buying a suit in a brick and mortar store and an associate helped you find it, you can be pretty sure they would also ask "would you be interested in a shirt and tie today?" Chances are that you would for a few reasons - 1) you're in a buying mood, and 2) you probably need a new tie if you're buying a suit.

The phrase "Buy Now" implies that the shopping experience is finished - but smart merchants realize it does not have to be. As such, the phrasing "Add To Cart" gained a lot of traction and you can see those terms used frequently today online at most every Internet retailer. There are, of course, some variations depending on the type of retailer. Just look at Bloomingdale's Department Store and then at Target. Bloomingdale's uses terminology appropriate to the brand - Add to My Brown Bag - as their shopping bag has come to be known as part of the brand itself. Target, on the other hand, uses the more traditional "Add to Cart" terminology.


While the wording of an add-to-cart button may seem like a minor issue, it can have a major impact. Reinforcing a brand during the checkout process adds to the shopping experience.

As an aside, the text formatting of an add-to-cart button is equally important. A quick look around reveals that most successful merchants follow a standard pattern of using sans-serif fonts with high contrast color (for example white on red like Target above) and few stray from this norm.

Others issues to consider when it comes to button design are the use of capital letters. Best practice in Web copywriting advises not using all caps, instead opting for what is referred to as "mixed case" (capitalizing the first letter of each word) or even using lower case letters if design constraints permit. Clearly, the objective should be to make the reading of these buttons as easy as possible.