{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.


That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.


Sorry about this, there is a problem with our search at the moment.
Please try again later.

Call to action buttons need to jump out at the shopper and leave them in no doubt about the next step they need to take to make a purchase.

It's not enough just to place a link to buy or add an item to baskets on the product page; retailers need to think about making the button stand out from other elements on the page to attract as many clicks as possible. A good button can increase conversions, so it's worth testing variations to find the most effective design.

Here are a few tips for call to action buttons on e-commerce product pages, as well as a few examples, good and bad.

  1. Colour: the button needs to stand out from the background, as well as any other icons or images on the product page, so a colour should be chosen which contrasts, preferably a bright colour.

    As well as being important for contrast, different colours may have some impact in shoppers' minds; they may associate green with go for instance, and therefore be more likely to click.

    There is an interesting chart on call to action colours in this post, which concludes that orange is the best to use, something Amazon, B&Q and Play.com may have taken note of.

  2. Wording: shoppers should be in no doubt what the button is there for, so language should convey the action they are expected to take, while being concise enough to stand out. It should start with a verb that conveys action; 'buy', 'add' etc. Users expect to see phrases like 'add to basket' and 'buy now', so it's wise not to deviate too much from this kind of language.
  3. Size: It's the most important link on a product page so shoppers need to instantly see it without having to hunt around. It should therefore be the biggest link on the page. The bigger it is, the more chance it has of being noticed.
  4. Positioning: Above the fold, obviously, but also somewhere where users' eyes are likely to be, just below the price, or to the right of the product listing.
  5. Give it some space: putting the call to action to near other graphics, links or images will make it harder to find. Make sure there is some space around it so it stands out from the rest of the page. 

Here's how some of the top UK retailers (loosely based on this Hitwise HotShops list) do it. A number of these retailers, including M&S, ASOS, Next and Dell could be better, especially when it comes to the size of the buttons.

Amazon, B&Q and Play.com provide excellent examples though, using high contrast colours and big icons that stand out well. 

Amazon UK

Amazon knows how to do it. It has its buttons in yellow and orange, which contrasts well with the white background and makes the button stand out, as well as making it the biggest button/link on the page. It is positioned prominently above the fold with plenty of space around it.


Argos call to action

The green colour stands out well against the white background, though the button itself is quite small. Wording is clear and concise ad conveys the fact that shoppers can buy online or collect in-store.


The button on Play.com is orange against a white background, so good contrast there. The product page contains plenty of visual distractions, so it would stand out more if made bigger. As for the wording, nice and clear.


Tesco call to action

Blue against white is fine for contrast, but with a lot of blue on the page another colour would do a better job, especially when there are several other calls to action and links on the page.

Marks & Spencer

On M&S, a brighter colour for the call to action, and a more prominent position on the page would make it stand out more.


Epson button

On Epson's product pages, the bright blue stands out well, and it is placed prominently just below the price. On this particular page, the call to action should be more distinguishable from the play video link.


Next call to action

Not a great example, the colour is too dull and the button could be bigger, so it doesn't instantly leap out at you on the page.


There is already a lot of black on the page, so the call to action here is nowhere near as clear as it could be. A bigger button in a brighter colour would stand out much more than this.


The colour is enough to make it stand out from the background on the product page, but a larger button would catch the eye more.


This is a good example; a big icon in a bright colour. It contrasts well against the white background, and holds a prominent position on the page, so there's no danger of people missing it.

Graham Charlton

Published 22 June, 2009 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (9)

Save or Cancel
Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

Thanks, I'll sort those images out. I think this is one area where a lot of e-commerce sites can learn from Amazon.

Of the retailers mentioned here, I think B&Q and Play.com are closest, but none make the calls to action quite as clear as Amazon.

over 7 years ago


Scott Brooks

Graham, we've been driving this point home for years at American Express and it still seems like our design agencies don't get it completely.  Well said all around!


over 7 years ago


Paul Bratcher

Glad you like our button..

over 7 years ago


Craig Sullivan, Customer Experience Manager at Belron International


I've got stacks of examples of where button designs improve clickthrough or conversion rates (especially when the design is bad to begin with).

Colour and contrast with context/background/site is important, size too and especially the wording/action.  Buttons that 'look' like buttons and are distinct from the background in terms of design also help stuff.

My mantra - big sod off, honking, off-brand buttons may work better <grin>

Seriously though, multi-variate test your buttons and see the results.  You can then get a good balance between branding, design and revenue/actions!


over 7 years ago


Craig Sullivan, Customer Experience Manager at Belron International


Are you doing multi-variate testing with buttons to find the optimal configuration for the primary call to action?  If you aren't, I strongly suggest you do this as it will save oodles of time.


over 7 years ago

Jacob Salamon

Jacob Salamon, International Marketing Director at Bazaarvoice

This is a great article, Graham -- excellent tips.

On the B2B side, I tend to really admire Omniture's Calls-to-Action.  They are always large, clear, action-oriented, and attractive (glossy highlights, etc.).  I started testing Call-to-Action buttons earlier this year to great success.

Here is an example of our latest call to action design, which is our highest-converting button to date:

This button has:
1. Bright, unique colour
2. Clear wording with a verb
3. Large size
4. Prominent placement above the fold
5. Space to breathe

Thanks again for your tips.

over 7 years ago


Hassen Rasool

Hi Graham,

In the interest of maintaining the integrity of the B&Q Brand, I would be the first to advocate the BOSS being consistent on both sites, however these are separate propositions with separate teams working on them.

We hopefully will be heading towards neutralizing the differences between the two.

about 7 years ago


jennifer duncan

Well its great to find such ideas I was thinking to implement some good call to action example and found your blog. I appreciate your effort and really like your advice to be implement for better conversion. That's what everything for us :)

about 6 years ago



Thanks for the info on this blog, it's funny because when you read this it all seems so obvious and then you look at some of your Websites and realise that you haven't actually followed all these rules and can improve your site.

almost 5 years ago

Save or Cancel

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.