By Nick Robinson, Client Analyst
A lot of what we do here at Trinity is trying to find the perfect page layout to maximize conversion rates for a given scenario. Within our efforts in the eCommerce sector, we frequently look at the product page template as the engine that drives conversion improvements initially.
The product page is where the actual “selling” takes place and it is here where the consumer, when motivated, takes the first real step down the purchase funnel adding something to his or her cart. Retailers are skeptical when I mention how this single change can drive a 5% sales increase. Consumers are visual and emotional, and different colors, sizes, and cues cause action in different types of people.
Product page designs vary greatly however, enough that one could easily write a book about variations and design alternatives. A few days ago I questioned if there was any definitive data about the product page, defining was what is the most popular specifications for “add to cart” buttons across the top 50 retailers on the web. That’s where the idea for this article and research came from. I wanted to get a complete sampling of how the top online retailers constructed their “add to cart” buttons. Specifically, I wanted to know the size of the button in pixels, the color, the action text, and the placement within the product page.
The winner in this category is green with 38% of the sites using this color. I would correlate the color green to meaning go, as in, “proceed to the next step”. The runner-up is orange, being implemented on 20% of the sample.
The apparel/accessories industry, which includes brands such as Calvin Klein, Burberry, Brooks Brothers, and Coach, prefer their button colors to be black.
Also interesting is that within the food/drug industry, Godiva chose brown as their color. Obviously closely related to the types of products they sell: chocolate and brownies.
The text written must direct the user toward an action. “Add to Cart” is used by 48% of the sites reviewed, while “Add to Bag” is used by 14%.
Sites within the books/film/music industry use text that directly relates to the products they are selling. For example, Scholastic uses “Get the Book”, and Fandango directs its users to “Get Tickets”. This would be a good a/b test to implement on your own site or a client’s site to see if product specific text converts better than generic text.
Two sites that sell customizable items communicate on the button exactly what your next steps will be. American Blinds uses button text that says “Build & Buy”. It is saying that you have to pick what options you want before you can place the item in your shopping cart. The same is true for Levolor’s text that says “Customize/Order”.
Button Height and Width in Pixels
38% of the sites that were reviewed have a height measure ranging from 20 pixels to 29 pixels, while 30% measure a range of 30 pixels to 43 pixels.
14% of the sites that were reviewed have a width measure ranging from 110 pixels to 117 pixels, while 12% measure a range of 103 pixels to 109 pixels.
Button Placement on Page
A majority, 58% of the buttons reviewed are in the upper right hand corner of the page. 24% of the buttons are in the lower right hand corner or low center of the page, while still being above the fold. Also 42% of the buttons are placed directly below the price of the product.
These are the practices that are most widely accepted among the top 50 e-retailers.
Add to Cart
Button Text: “Add to Cart”
Button Height and Width in Pixels: Height of 20 to 30 pixels and Width of 110 to 120 pixels
Button Placement on Page: Upper right hand corner of the page, below price, and above the fold.
If you would like to see the raw data for this analysis, please email email@example.com and we will be happy to send to you.
Interested in our services?