Click me

Constructing a Higher Converting Add-to-Cart Button

CONSTRUCTING A HIGHER CONVERTING ADD-TO-CART BUTTON Add to Cart A Study of the Top 50 Ecommerce Sites Add to Cart ADD TO CART What do the add-to-cart buttons of the top 50 ecommerce sites look like? The add-to-cart button is without a doubt the most important button of any ecommerce site. There's a lot of talk about what makes an add-to-cart button more effective, including color choice, button size and type of fonts. 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. So, we've taken a look at the add-to-cart buttons of the top 50 ecommerce sites to see how they stack up and uncover what you can learn from these mega etailers. BUTTON COLOR The majority of the top 50 ecommerce sites have an orange add-to-cart button. 20% 24% use blue use red Walmart* ebay Add to Cart Add to cart W 16% 32% *macys Zappos use green use orange add to bag Add to Cart 8% use grey VICTORIA'S SECRET ADO TO BAG * Orange may be the most popular color, but typically the best button color is the one that contrasts the most with the color scheme of your site. BUTTON SHAPE Most of the top 50 ecommerce sites have an add-to-cart button with rounded corners. 64% E Add to Cart LOWE'S O TARGET ROUNDED CORNERS Add to Cart + 2 add to cart 26% 10% RECTANGLE PILL ADD TO CART GROUPON E Add to Cart Buy! * Having adequate spacing around your button, regardless of it's shape, will help ensure that it stands out. Size-O-Matic SIZE The buttons of the top 50 ecommerce sites range in size, but the average is 144 x 34 pixels. Width Орх Iunbnlnlunlulmlm 100px 200px 300px mlullnlmlndmlmlul 22% 64% 11% 144px Add to Cart 34px O ADD TO CART Order Smallest Button Average Sized Button Largest Button * The add-to-cart button is the most dominant button on a product page. To help ensure it stands out, it's best to choose a good size in proportion to the other elements on the page. 8 WORDING Over half of the top 50 ecommerce sites use the word "cart" instead of "bag", "buy" or any other word. * It's typically best to choose wording that is clear and fits your audience. 54% 28% 10% 8% CART BUY BAG/BASKET OrHee D DIRECTV. KEA BARNES & NOBLE amazon Select Buy online Add to Bag Add to Cart DESIGN DETAILS Most of the top 50 ecommerce sites don't use an icon, but of those who do, the cart icon is the most popular. 62% 38% * Although only 8% use an arrow icon, studies have shown that they might convert the best. Without Icon With Icon 4% 8% 8% 18% Plus Sign Bag or Basket Arrow Cart #M newegg + ADD TO CART ADD TO BAG AM ADD TO CART WADD TO CART The Average Add-to-Cart Button of the Top 50 Ecommerce Sites While there might not be a one add-to-cart button that works for every site, here is what the add-to-cart button of the top 50 Ecommerce sites would look like if you combined their most popular characteristics: 144px Add to Cart 34px 32% 64% 54% 62% Most Used Color Most Used Shape Most Used Word Most Don't Use Details Orange CART ROUNDED CORNERS So there you have it. As you can see, there's a wide selection of add-to-cart buttons used by by the top ecommerce sites and even more variations used across the entire web. There isn't a one solution fits all button, so the most imporant thing to remember is that you want your own add-to-cart button to really stand out to entice as many customers to click them as possible. Fortunatley, you don't have to do it alone. If you don't have the time or resources to design your own buttons, or any part of your site for that matter, we can help. Vvolusion Visit to learn more. *The list of top 50 ecommerce sites was compiled using Alexa Internet, Inc.,; 1/Top/Shopping Sources:,,,,,,,,,,,, „,,,,, «TKOH

Constructing a Higher Converting Add-to-Cart Button

shared by Volusion on Oct 17
An add to cart button is an essential component of any ecommerce site. To learn about best practices and hot trends on some of the internet's most popular online businesses, check out our infographic ...



Did you work on this visual? Claim credit!

Get a Quote

Embed Code

For hosted site:

Click the code to copy


Click the code to copy
Customize size