Our thoughts, work shares and insights

Web Design: Conversion Rate & Add to cart Button

13th May 2015

By Fanatic

We have recently been looking at the conversion rate in one of our eCommerce sites, and the ‘Add to Cart’ button became an area we identified as needing improvement, so we though we would share our findings.

Your website needs to work hard, and increasing conversion rate is always a focus for our web design. Here we share some of our thoughts and finding on what effect a  good ‘Add To Cart’ button has on the conversion rate of visitors to cart users. Indeed the thoughts below colt for all main conversion buttons, nit restricted to add to cart. for example ‘enquire now’, ‘call us’, or ‘download report’, but whatever the desired out come, or call to action, the button needs to stand out, and invite the click.

Button Colour

We find that although a lot is written about red being bad and green being good, colour is not as important as this. in fact it is most important to have a contrasting colour, which looks good in context of your web design. So if green is contrasting it will perform and active a high conversion rate. Perhaps given the choice you would use green over red, but the most popular colour front the top 50 commerce sites is orange, as seen on Amazon. A warm colour is cozy, blue is cold, green is not generally a popular colour. So make sure your primary button that you want to be clicked is a contrasting colour.

Amazon: Screen Shot 2015-05-13 at 11.32.52 Screen Shot 2015-05-13 at 11.33.46  Screen Shot 2015-05-13 at 11.35.19 Screen Shot 2015-05-13 at 11.37.31


An icon can greatly improve the usage of buttons generally, especially where there are multiple options. See below for an example from one of our web designs for a video sharing website. The button to upload and mark as favourite use icons to distinguish themselves where space is very tight. The videos are listed in a small space, especially on the responsive mobile version. Any icon used must be instantly understandable and add to the communication, otherwise use text as below in ‘claim’.

Screen Shot 2015-05-13 at 11.27.03


Button Hierarchy

Probably the most important aspect to consider in any web design when looking for better conversion rate, is the button hierarchy. In our web design, especially where usability is of particular importance we always split our buttons into three levels. Level one is for the primary action or call to action, for example the add to cart button. This is the largest button with a clear prominence on the page:

Screen Shot 2015-05-13 at 11.40.08


positioning within he whole page is also extremely important. For example on the screen without scrolling, but below the title and price as it reads in order as a human takes not he buying process: What is it? How much is it? Ok I’ll have one!

The primary button will also have space around it. It is the largest button, and the boldest colour, but it is the space around it that makes it important, and improves the conversion rate.

An example of a level two button is as above with the Add To Wish list button, which is still important, but clearly not as important as the primary button, and a level three button is for less important items such as sorting on a page or navigating ‘back’ etc.


The example above, and the examples front he biggest sites also show that the design of the button is important for improving conversion rate. Rounded corners make it friendly, a border adds to its prominence as a level one button, and a drop shadow (not too much!) stands it out front he page that bit more.

Conclusion: what button design gets the highest conversion rate?

The one that is contrasting, and stands out the most. It is an attractive button to click, which clearly moves on to the next stage. Above all, it is in a prominent position not eh page, and below or to the right of the price.





Favourite blog posts