Ecommerce Blog - The #1 Source for Ecommerce News, Tips and Trends!

Get ecommerce updates, news, and insider tips from the experts at PrestaShop!

Ecommerce Blog - The #1 Source for Ecommerce News, Tips and Trends!
 

< Back to the Blog home

The Importance of Call to Action Buttons on your E-commerce Site

If a customer isn’t clicking, they aren’t shopping. This is true for EVERY online store.

The call to action buttons on your e-commerce site play a major role in converting window shoppers into purchasing customers. They should be clear, compelling and guide the visitor towards completing a sale.

Let’s go over the importance, considerations and examples of what the best call to action buttons can do for your online shop.

What to consider for every call to action button

Placement – According to Ecommerce Consultant, James Gurd, your call to action button should be placed where the action is most likely to be taken. The location of the CTA can be tricky since it depends on several factors including: the goal of the page, the intent of the visitor and the complexity of what you’re offering.

Size and Shape – Your customers shouldn’t have to look around for the next step. Your CTA should be easy to find but not so large that they distract from what you’re selling or promoting. Try to avoid too much clutter by allowing some white space.

Color – The color should really stand out from on the page and catch the eye. It’s a good idea to test different colors to find out which one works best for your customers.

Text – The perfect CTA button should be clear and reflect a sense of urgency. Make sure to keep it short and simple!

Different call to action buttons for e-commerce sites

Ask yourself, when should I be using call to action buttons? Below are 3 PrestaShop store examples of different opportunities to encourage customers to take the next step.

Adding an item to the shopping cart

Fotoclub uses large orange buttons that simply say “Buy” – it’s clear, stands out and the use of a bright color is very appealing.

Show a customer what’s on sale


The Chic Nest does a great job with this banner on their homepage using a call to action button that guides customers to start shopping their sale right away.

Give your customers additional details

Fruitselect uses a CTA button to show their visitors what’s in their fruit baskets “Voir la composition” stands out but doesn’t take away the attention from the Add to Cart button.

Call to Action Button Resources

Are you looking for more call to action inspiration? Take a look at Cameron Chapman’s Call to Action Buttons guidelines, best practices and examples to give you some more ideas.

You should also surf the PrestaShop Showcase and browse by category to find online shops just like yours!

Want to create an online store with PrestaShop? Download PrestaShop for free today or check out our free Demo!

  1. Hi,

    Great article and I agree will everything. However, one of the first things I noticed about the default PrestaShop is the very first checkout screen (shipping) has a very small almost unnoticeable “next” link at the very bottom of the page. Even I had a hard time finding it and I’m an ecommerce developer. I think the PrestaShop developers should take your advice on this.

    Secondly, the next page then takes you to a “create an account” or login page. Creating an account scares many folks away from continuing the checkout process. In my opinion, this page should contain the entire create an account form instead. I realize there are plugins that will do this but at considerable additional expense to the client.

    There’s my two cents.

    Thanks for a great article.

    • Author: Natalie Beigel

      Date: January 28, 2014 at 3:36 pm

      Hi Joe!

      Thanks for your comment! You bring up some good points that I’m sure many of our readers are curious about as well. I agree, sometimes setting up an account can be scary for customers that’s why I suggest to offer your clients the option to use the Guest Checkout instead of creating an account. You can find more details in our documentation: http://doc.prestashop.com/display/PS15/Understanding+the+Preferences#UnderstandingthePreferences-Orders. There are also two different types of account creation, one of them is a quick account creation: http://doc.prestashop.com/display/PS15/Understanding+the+Preferences#UnderstandingthePreferences-Customers.

      Also, regarding the next link at the bottom of the checkout page, you install firebug on Firefox, right click inspect element in firebug and it will highlight a specific line. On the right it will tell you the line number in the CSS panel and then you right click that highlighted line and click copy CSS path. So now you know the CSS file, the specific line of the button and the CSS path of the button. In the default 5 step checkout, it is the CSS located in the global CSS line 192 and the CSS path is: html body#order.order div#page.container_9 div#columns.grid_9 div#center_column.grid_5 p.cart_navigation a.exclusive

      As always, make sure to backup before editing any files :) I hope this helpful. Please keep me posted on your results!

  2. Author: Freek

    Date: January 17, 2014 at 12:50 am

    I agree with Joe. This lesson is more for the Prestashop team and template developers.
    Or can we change these buttons and/or size of the bottons ourselves ?

  3. Great article, Natalie. What good are all the products and services posted and bannered on a web site if customers can’t purchase or order them easily? Getting people to listen to us is hard but getting them to take action is harder. Strong compelling offers and benefits are our best levers for moving customers to do something and take action. And these call-to-action buttons can definitely be the key to our success.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>