A key step in the online customer journey is “Add to Cart”. In the best case scenario, it enables the customer to complete their purchase and the etailer to generate revenue. But even if the customer does not complete their purchase, the action of adding a product to their cart signals strong buying intent and provides important customer behavior information to the etailer that can be used for personalized communications or recommendations to encourage future purchases.
In the retail environment, luxury consumers rely heavily on their sense of touch when making a purchase, coffee and wine purchasers use smell and taste to determine whether or not a beverage is worth their investment. However, the shift to online purchasing means that online consumers must trust their sight to make a buying decision. Quality product imagery plays a significant role in online purchasing. This reliance on sight carries to the color of the Add to Cart button.
Many articles exist about the shape, placement, size and text of the Add to Cart button. However, no definitive research points to one color choice that will skyrocket cart conversions. In this post, we share insights gleaned from researching the use of color by the world’s top 50 eTailers, and we offer suggestions to help other eTailers to identify the ideal color for their Add to Cart buttons.
When reviewing call to action (CTA) buttons on the top retailer websites, several best practices were apparent.
The Add to Cart button:
- Complements the overall brand theme
- Stands out from the rest of the page, so it is easy to find
- Has ample white space around it.
Consider these three examples:
Amazon’s BOB (Big Orange Button) color originates from the arrow in its logo. Against the ample white space, the button stands out in the sea of text without looking out of place. Amazon uses the orange as an integral part of its UI to highlight the information or actions its online customers have said is most important to their buying decision: Add to Cart, Search, Reviews, Prime.
Macy’s uses white space to highlight its products and red, taken from the star in its logo, identifies important information to the buyer including the “Add to Bag” button.
While Amazon employs monochromatic color choice across its site and Macy’s stays close to its brand colors, Office Depot uses complementary colors to signal important action steps for its customers. It has selected a blue opposite of its brand’s red to help the “Add to Cart” and “Log In” buttons to stand out. All three companies have made it effortless for customers to find action buttons by removing surrounding clutter.
Credit: Freshome (10 Color Theory Basics Everyone Should Know )
How should retailers choose the best color for their e-commerce site? In the eClerx Digital data set we collected – 84% of the e-tailers used 4 colors: green, blue, red and black, in that order. What we observed is that the most used add to cart colors correlated with the most widely used brand colors of blue, red and black. One can suppose that green is also used because it is a natural, inviting color that also instinctively says “Go” to users.
Based on our observations, eTailers have a few options to consider testing which colors may lead to higher cart conversions.
- Complementary brand colors?
- Contrasting brand colors?
- Monochromatic brand colors?
- A shade of green?
The key is to create a UX that feels natural to the visitor and complements your branding. In the end, testing is the only real way to determine what works best for your audience.
Thank you to Swati Sharma, Researcher, Domain and Market Intelligence Team, for leading this project and to the Digital Center of Excellence team led by Ryan Scott for providing the industry data.
