How to Build a Better Add to Cart Button

With the holidays coming up, your add to cart buttons should look nothing less than their best. Check out this post to see how you can make them stand out from the crowd and attract more clicks.  

ButtonDesign

What’s the one thing every customer has to do to buy your products?

It’s simple: Click that infamous “add to cart” button.

Although it may seem like a minor detail, your add to cart buttons are critical to your success. You’d be surprised at how much a simple design change can improve conversion rates and affect the overall shopping experience of your store.

So how do you build the best add-to-cart buttons the world has ever seen? For starters, follow these three design tips that will set your buttons on the path to more clicks:

 

1.  Use color and contrast to make your button stand out

There’s been a lot of talk about which color is best for your add to cart buttons. In one corner, we have people saying red converts best, and in the other, there are those who swear that green will turn your button into a lean, mean conversion machine. The truth is, however, that they’re both wrong. There isn’t a “one color fits all” solution. 

Instead, think of choosing your button color in terms of visual contrast. The color that converts the best is usually the color that stands out the most from your site’s background and color scheme. For example, if you use a lot of red in your site’s color scheme, a green add to cart button would contrast well and have a better chance of receiving more clicks than a red button would.

Take a look at the add-to-cart buttons in these examples to see what I mean:

 

atcbutton1-updated

 

addtocartbutton2-updated

The first image’s add-to-cart button blends in with the other elements of the page, while the second image’s button contrasts strongly with the surrounding elements and stands out. That second example, with its visual contrast, is what you want to mimic with your own buttons.

 

Pro tip:

Use the color wheel to help find a high contrast button color.

colorwheel

The color wheel shows all three primary colors, with their complementary colors located directly across them. Those complementary colors are also the ones that contrast the most with their primary counterparts. For example, the highest contrasting color to blue is orange, which is another reason the orange button stands out so well in the example above.

 

2. Make sure your button is large enough and has adequate space

You know that saying, “The bigger, the better?” That definitely applies to add to cart buttons (up to a point). In general, the larger a button is, the more likely your users will notice it and be compelled to click. That doesn’t mean your button needs take up half of the page, however. You just want it large enough that it’ll stand out from other elements on the page.

If your product pages use large fonts and images, your add to cart button might need to be larger than a site that uses smaller fonts and images to ensure that it’s noticeable. Also, adding extra spacing and removing clutter around the button will help grab more attention and generate more clicks.

To see this in action, let’s look at an example. Which of the two add-to-cart buttons below does a better job of grabbing your attention?

 

rvupgrades1
rvupgrades2

I think we can agree that the second button wins. It’s larger, doesn’t have to compete with as much clutter and has more spacing between itself and the elements that are near it.

 

Pro tip:

See if your button stands out is by taking the “one second test.” Look at your product page and ask yourself: “What do my eyes focus on within the first second of looking at this page?”

If you perform the one second test on the second example above, you probably focus first on the product photo and then on the add-to-cart button, in a left to right motion. You might even look at the button first, which is great.

On the other hand, when you perform the one second test on the first example, where do your eyes focus?  Chances are, you focus on the product image, and then don’t know where else to look. That’s because there isn’t enough size difference and spacing around the add to cart button to let the viewer know where they should focus next.

 

3. Utilize design details

If you want your buttons to get clicks, they need to look like buttons, so use design details to make that clear from the get-go. Features like a subtle gradient, shadow or better yet, an arrow, subconsciously tell your customers “Click here!” by drawing the eye and indicating that there’s something more for them to do.

Like the other tips, this rule is best illustrated with an example. Which of these two buttons do you find more interesting?

buttonaandbuttonn

Button A has a simple flat, solid color with zero additional design detail.  Button B, on the other hand, fades from light to dark green, has a slight drop shadow, border and arrow.  Its design makes us wonder: What would happen if we hovered over it? Or better yet, clicked on it? (Well, nothing in this case, but it’s the thought that counts.)

 

Pro tip:

Try using an arrow. This shape, in particular, has been shown to increase how often a button is clicked. The reason behind the arrow’s success is that it implies that clicking the button will take you somewhere else. This is good, because it also signals to your customer that they don’t necessarily have to commit to purchasing right then and there. All you’re asking is for them to take the next step…which then often leads to a purchase.

 

Booyah!

There you have it. If you want more of your customers clicking your add to cart buttons, you should design them in a contrasting color, make them large enough to stand out, provide plenty of space around them and add some design details.

So what are you waiting for?  Go create some bigger, better, bolder, brighter buttons. And don’t forget to link to your site and show them off in the comments below.

Happy selling!
-Wes Asbell, Volusion

12 Responses to “How to Build a Better Add to Cart Button”

  1. Lucian

    I have a stupid colour for my ad to card button right now…
    http://www.iuni.ro/
    But i ll consider your advices and i ll change it

    Reply
  2. Volusion Enhances Responsive Design & Mobile Shopping Experience | Mobile Design Deal

    […] merchants can also customize the Add-To-Cart button design to match their site’s overall design. The Add-To-Cart button will now be available on category […]

    Reply
  3. Travis

    Hi,

    Thank you for much for the post, I changed my button based on this and even though my site is Pink, I think the red button looks better then a green button would (because it still stands out and kind of goes with the theme). Though I would like your feedback, and also what do you think about the add to wishlist, should I change that color. My website is http://blog.bdancewear.com/. Thank you

    Reply
    • Matt Winn

      Hi Travis, excellent question. Had a chance to speak with Wes, and here’s what he had to say:

      “Choosing the “right” button color can be a little difficult. I definitely understand that the pink/red button matches your theme , but the I would also consider that this means it might also blend in more. A green shade button would standout more and contrast with the other colors of your site. So it’s really a question of what’s more important to you, a button that matches or one that stands out more? You could select a green shade that is a little more subtle and might work a little better with your shade of pink. Perhaps you’d like this color a little better: #65E29F. This shade of green is pleasant and not too harsh or off-putting.

      For the wishlist button, I would recommend just leaving it as is. This way the main focus remains on the add-to-cart button, which is the main action your want a customer to take.

      I would also, recommend keeping track of and seeing which button color gets more clicks. So maybe try the red button for a little while and then change it to green to see if there is any change in your conversions. Thanks for reaching out!”

      Reply
  4. liz

    great article thanks

    Reply
  5. Sully

    My website http://www.bombtechgolf.com is primarily Green and I have gone with Orange buttons and fear going RED…will look too christmas like….

    Reply
    • Gracelyn Tan

      Hi, Sully,

      I passed your comment along to Wes, and here’s what he said:

      “Hey Sully,

      I think your orange add-to-cart button stands out very well on your product pages. One reason orange works so well on your site is because you have a minimal amount of color surrounding the buttons which really helps it standout. I also really like how you are promoting free shipping right there on your product pages, that is definitely helping turn your shoppers into buyers.

      -Wes”

      Reply
    • Tim Faber

      Sully – Great Looking site. We manufacture hair and skin products…have 5 Volusion sites…and will be setting up a new site (Volusion) for one of our products. Did you have site custom-made or is this a template? Thanks

      Reply
  6. Bijou

    Hi Wes,

    Thanks for the great tips, such seemingly small changes do have a huge impact! Using your tips we have just changed our ‘add to wishlist’ button and made it much more subtle, also made the ‘add to bag’ button bigger for our Volusion store http://www.bijoujewellery.co.uk

    We have changed from ‘Buy Now’ to ‘Add to Bag’ do you think this is a better button text? Thanks!

    Bijou

    Reply
    • Gracelyn Tan

      Hi Bijou,

      I passed your comment along to Wes, and here’s what he said:

      “Hey Bijou,

      I am so happy that you’ve been able to implement some of these suggestions. Your add-to-cart button stands out very well on your product pages. I would suggest keeping ‘Add to Bag’ as your call to action. It’s less demanding to ask a customer to just add an item to their bag as opposed to buy it now. It will put them at ease that they don’t have to fully commit right then and there. Like you said, little things can make a huge impact.

      -Wes”

      Reply

Leave a Reply