Crafting The Perfect eCommerce Button

As an online retailer, the most important call to action for your store is probably the “Add To Cart” or “Checkout” button. It’s what gets your visitors to shift from a “browsing phase” and into your buyers funnel.

With this in mind, it’s a good idea to be focusing on your CTA buttons as part of your ongoing optimisation strategy. Now don’t get me wrong, there isn’t a holy grail or one-size-fits-all blueprint when it comes to this part of your eCommerce site, but there are elements you can tweak, test and optimise for better results.

So let’s rip apart the science of the eCommerce button and see what you can do to make it more effective without making your page look like a room rammed full of robots.

CTA Element #1: Colour

Your eCommerce call-to-action is ultimately what you want your visitors to click on the most, and because of this it’s best practice to give it some added punch to make it stand out from the rest of your website’s theme and colour scheme.

Take a look at our page on call tracking for example. We like to think of our branding as professional yet friendly, utilising a blue colour scheme, so in order to make our CTA’s stand out we like to use bright orange buttons that stand out from the rest of the page without completely ruining the overall feel. Nobody likes browsing around a blotchy, multi-coloured mess.

Experiment with different button colours and see what stands out in a way that compliments the overall design of your website while at the same time draws visitors in.

CTA Element #2: Wording

As much as the colour of your CTA is important, so are the words you use within it. Wording can be the difference between persuading a user to take your chosen action and boring them to death.

In the same breath, the words “Buy Now” and “Add To Cart” have become such recognisable calls-to-action that experimenting with the wording of your button could throw your users off somewhat. However there’s no harm in A/B testing this to see if it makes a difference.

Once again taking the example from our front page, you can see the wording of our calls-to-action are very descriptive of what they will be getting on the other side, i.e. seeing what Mediahawk does. If we had a button that simply said “submit” then it’s likely we would get a lower response.

CTA Element #3: Location

Where you actually place your CTA is also a critical factor, and is something that you should test within your site. User behaviour has changed quite dramatically over the last few years, so the previously obvious place to put your CTA — above the fold — isn’t necessarily the most effective one anymore.

Ubounce recently did a very comprehensive eCommerce CTA placement experiment where they tested placing their eCommerce button above the fold, at the end of the page, in a “minefield of clutter” (as they put it) as well as other treatment variables. Sometimes the most obvious place to put your CTA isn’t the right one.

As you’ll see in a minute, testing where you actually place your button can help increase your click through rate (CTR). Try challenging any belief’s you may have about your button placement and you may find some surprising results.

CTA Element #4: Size

This isn’t a call-to-action element that applies exclusively to eCommerce businesses, but playing with the size of your CTA can help gain more attention towards it. Let’s take a look at some examples of this in action:
Call to action example on a website.

Not On The High Street’s store has a great design and user interface, and this is seen throughout their calls-to-action as well. It uses a colour that breaks free from the rest of the page but also stands out due to it’s larger size. This really grabs a buyer’s attention, letting them know exactly what they need to do next.

Freshbooks example call to action.

A great example of a non-eCommerce CTA, Freshbook’s landing page is predominantly blue, but uses a very large and very green call to action with a clear value proposition that lets visitors know exactly what they’re going to get. You can swipe & deploy these ideas and put them in your own site.

Sometimes in the eCommerce world, size matters.

CTA Element #5: A/B Testing

If you’ve been paying attention, then you would have noticed that testing has been quite a prominent theme throughout this post. If you want to see significant changes as quickly as possible then doing some form of A/B or multivariate testing is a must.

Make sure you only test one element of your CTA; if you change the size and location of the CTA on your page and you gain an increase (or decrease) in performance then how are you going to know what caused it? Be patient and change only one thing at a time.

The amount of time you run your test for will depend on the amount of traffic you receive on a daily basis. It’s important that your test is statistically significant, so use a calculator, and you can be confident that your test has given you the right results.

How are you using your CTA to gain a greater response? Are you testing on a regular basis and finding some interesting results? Let us know in the comments below!

Image credit: donsolo

Share this post

{{ resourceTitle }}

Please fill in your details to gain access to the resource

Discover how Mediahawk can help

{{ errors.first('first_name') }}
{{ errors.first('last_name') }}
{{ errors.first('email') }}
A group of people studiying statistics from Mediahawk

Let's talk

Enter your contact details and we’ll be in touch within 1 working day.

Already have a Mediahawk account? Sign In

Speak with one of our team

{{ errors.first('first_name') }}
{{ errors.first('last_name') }}
{{ errors.first('email') }}
{{ errors.first('phone') }}

{{ formTitle }}

{{ formContent }}

Discover how Mediahawk can help

{{ errors.first('first_name') }}
{{ errors.first('last_name') }}
{{ errors.first('email') }}
{{ errors.first('company_name') }}