Can a Single Change of Color Make Your Add to Cart Button Work?
Every owner of an e-commerce store has one thing in common: we want better conversion rates. Even if we can achieve a 90% conversion rate, we will not be happy until we reach 95%. So every small detail is ripe for change—that includes Add to Cart buttons.
However, can a single change of color make your Add to Cart button work? If your conversion rate is low, can changing the color boost it to a more respectable level?
To see if it can, let’s look at some of the most popular button colors and the choices behind them.
Use Red for Urgency and Hunger
Out of all the button color choices, red is probably the most popular.
Image Source: blog.amasty.com
Red is a color that is full of emotion. It is the symbol of love, lust, danger, passion, urgency, and energy.
It is the color of Target, London Buses, Coca-Cola, KFC, and Netflix.
It may be a decade old, but Getelastic’s study into button colors is still helpful today. Looking at the buttons in the study, you can see a large number of red ones are present out of the 107 that were analyzed. The businesses chose them for a reason.
Performable ran a test on their button—red vs. green—and the results surprised them: a 21% increase in conversions for the color red. Why is this? Is it because red is the better color for Add to Cart buttons?
Image Source: hubspot.com
Perhaps it’s because their page is broadly green and red stands out better.
In fact, green and red are complementary colors which means that they are perfect for standing out in contrast to one another other while remaining visually pleasing. Try it out for yourself.
This means that on a predominantly green webpage or site, a red button may well be your best choice. However, as you can see, there are several different color harmony choices, and all of them are effective. The only thing to keep in mind with Add to Cart buttons is that they must stand out.
Image source: optinmonster.com
Green = Go!
Another popular choice for button color is green. This color is all about the natural. It creates a sense of health and promotes wellbeing. It’s also the color of the GO light on traffic signals.
So many companies see it as a natural color for a cart button. It says, “Go on. You can advance.”
Although, is it as simple as that?
We have already seen the importance of color harmony, so if your page is predominantly red, a green button may well be the best choice. Though on a mainly yellow site, a green button is going to get lost by the wayside.
Despite the cited study with the 21% increase in conversions when switching AWAY from green, choosing green is not always a bad choice. If it fits, use it.
Trust me; I’m blue
The third most common Add to Cart button color is blue. Blue is probably the most common color used in B2B websites and communications.
The three largest B2B companies in the world are IBM, Microsoft, and GE, and they all use blue. In fact, 6 of the top 10 B2B companies have blue as a primary or secondary color for one main reason—it exudes trust.
The color blue slows down your heart rate and reduces blood pressure. So when you’re scared or worried, blue can help you to calm down.
For an e-commerce site, this can be useful when selling high-ticket items. You want your potential customers to feel relaxed and secure and that they are making the right decision. But, wouldn’t blue be of better use on the page itself?
When to choose blue
Again, as with red and green, your choice of blue as a button color comes down to your other color choices. Blue can stand out against orange or red. What’s more, because blue is the color of communication, logic, and coolness, it can help your customer click.
Still, always go back to your brand colors to make sure that the button does not blend in with everything else.
So much, in terms of button color, comes down to making sure it stands out.
How do the big guns do it?
You’d expect the big players in e-commerce to have their conversion rate optimization set up perfectly. Companies like Amazon or eBay have been selling online for decades now. So let’s take a look at how they do it.
The biggest of the big beasts, Amazon’s Add to Cart button has gone through a number of changes over the years. Nevertheless, one thing that has remained surprisingly consistent is the color.
It is the absolute perfect BOB—Big Orange Button. For Amazon, it must work.
Amazon’s core brand colors are black, white and orange. Black and white compliment each other perfectly, while the orange stands out and draws the eye. With their latest logo, Amazon has put this to good use.
Image Source: Amazon
That orange arrow points straight to the Try Prime button, drawing you towards it, even if it’s only a small button.
The cart button is the same. In a sea of text, the orange button and golden stars draw the eye, highlighting both the option to buy and social proof.
Who else does the same?
Just like Amazon, AliExpress uses a BOB. Perhaps it’s to be expected that AliExpress sometimes seems like an Amazon clone. Other big retailers that do the same are GearBest (although their Big Orange Button is more like a Giant Orange Button) and BangGood.
Instead of a BOB, eBay uses a blue button. It still stands out despite the fact that a lot of text and buttons use this color on the page.
Image Source: eBay
One other thing eBay does is use green to highlight the seller information. It wants you to trust them, and green is great for building trust.
Apple uses a blue button. They use it differently though. On each product page is a small Buy button hidden in the top corner. This button takes you to the shop page for that product. Once on the shop page, you can only Select, not buy now.
Image Source: Apple Store
Only once you’ve gone through the customization phase can you Add to Bag. Again, the button is blue.
Kit & Ace use a matte blue Add to Bag button. It matches their brand colors.
Image Source: Kit & Ace
Urban Outfitters use a dark gray Add to Bag button. It also matches their brand colors.
Image Source: Urban Outfitters
H&M uses a light gray Add to Bag button with a stylized H&M bag. It matches their brand colors as well.
Image Source: H&M
See anything in common?
Especially for fashion brands, button colors strictly stick to their brand colors. This does not mean that they blend in, but it does mean that they feel unified. That perhaps tells us something about the use of changing your button color on its own.
Does button color alone do much?
With different retailers using different buttons, it appears that the only consensus at the top is to use your brand’s color.
We see different shades and tints of orange, red, blue and green dominating, with grays and blacks also showing up.
Button copy is essential
The color should match your brand and also stand out, but the words on that button are equally important.
We can see that the above fashion retailers use Add to Bag far more often. eBay uses Buy it Now and Add to Cart, while Amazon has their own Add to Basket. All of these have gone through changes throughout the years, and you can see all of it in this study.
Think about placement
Instead of changing the button itself, you may want to test its placement. Amazon’s is on the right, eBay’s is in the middle, and many others are somewhere between the two. Making sure that it has plenty of empty space around it is key.
To conclude, your button color is just one of many factors for a successful Add to Cart button. Your button should naturally fit into your overall design while still standing out; this is true for both the design and the copy.
The only way you can truly know is to test it out. Keep your brand’s guidelines in mind first and foremost and make sure to always listen to your customers.
What Add to Cart button color do you use? What have you discovered about how your customers interact with it?
Smart Persuasion starts here!
Convertize.io offers Behavioral Messaging, Personalisation, A/B Testing & Optimization for eCommerce, Travel and Saas websites