CONTENTS
If you were suddenly asked what calls to action (CTA) are, you might not know how to answer.
One thingâs for sure, though: theyâre on every website you visit.
Calls to action are those elements of a website that ask users to carry out a particular activity.
They usually come in the form of buttons or links.
And theyâre actually quite important, believe it or not.
For instance, a well-designed CTA may have led you to purchase a product you werenât sure about buying at first.
Still donât believe it?
Well, read on and see for yourself, then. đ
Weâre going to tell you:
- Why calls to action are so important for your eâcommerce.
- The most common types of CTAs for online stores.
- Tips to optimize them and increase your sales.
Are you ready? Here we go.
đ What are the different types of calls to action for eâcommerce?
If the previous definition didnât help you wrap your head around the concept, check out these examples:
- Add to cart.
- Complete purchase.
- Continue shopping.
- Subscribe to our newsletter.
- Rate this product.
- Learn more about this item.
Look familiar?
Those examples are all typical CTAs found in online shops. We could go on and on, but now you know what weâre talking about. đ
Although you may now be asking yourselfâŠ
â âWhatâs the big deal about a simple little button?â
Letâs put it this way â imagine that you want to get a tennis racket and decide to go to a physical store but, since the place is quite big, you donât quite know where to go to find one.
What would you do?
Youâd go ask an assistant, right?
Once you have your racket, you ask another assistant where the checkout is.
And, before you pay, the cashier tells you about a 2âforâ1 offer on tennis balls in case you want the full package.
The problem, however, is that online stores donât have assistants.
So no one can tell your clients âGo this wayâ, âHereâs how to payâ, or âGet this now because itâs on saleâ.
And CTAs are, to some extent, the ones fulfilling this function.
The calls to action in your eâcommerce are like signs that guide your users through your shop.
So if you use them properly, you can:
- Improve your siteâs usability.
- Increase conversion.
- Reduce your bounce rate.
- Instill a sense of urgency or confidence in users so they end up buying.
But how can you do all that?
Thatâs precisely where weâre heading. đ
đ 5+1 tips to get the most out of your CTAs (with examples)
Now that youâre clear on the difference well-designed CTAs can make in terms of sales, letâs move on to see how they can be optimized.
â 1. Make them visible
This is essential.
The last thing a customer wants to do is spend time scanning your website to find the âBuyâ button or guess at how they can subscribe to your mailing list.
Calls to action must be easy to see.
And there are a few tricks for this:
- Give them a contrasting color: our vision relies heavily on tonal differences, meaning your call to action will be easier to spot if you give it a dark color contrasting with the white background, for example.
- Make it âclickableâ: you must have seen how some buttons have a 3D effect and seem to âstick outâ of the screen on many websites.
- Size them up: Donât be afraid to make your buttons noticeably large. They must stand out (plus, small CTAs are difficult to click on if youâre shopping on your phone).
- Make use of whitespace: in general, calls to action stand out more when thereâs nothing surrounding them.
For instance, check out the simple (but effective) CTA design they use at Rubiks, one of our clients:
â 2. To be or not to be⊠original â that is the question.
And itâs no easy one either.
As you must have noticed by now, creativity plays a huge role in some websitesâ calls to action.
Thatâs the case of Mr. Wonderful.
On their websiteâs footer, they encourage you to download their phone app, but instead of using typical âDownload our appâ, they give it a personal touch that suits their brand image.
Etch this one into your permanent memory:
Rather than original, calls to action must always be easy to understand and clearly indicate whatâs going to happen.
Thereâs no point in having a fun and catchy message if, after reading it, readers ask themselves, âRight, but what happens if I click here? Is the product added to the cart? Do I buy it straight away?â
Youâll see this clearly, again, on Mr. Wonderfulâs website.
For the most important CTAs, such as âAdd to cartâ, they use the same text as any other online store.
Predictability is sometimes worth it. đ
â 3. Your main CTA must be above the fold
Most of your websiteâs pages will have at least one call to action.
For example, the âBuyâ button on product cards or an invitation to use an offer on your homepage.
Whatever the case, that CTA should always be put above the fold, which is to say, on the top section of the page so users see it as soon as the page loads without having to scroll down at all.
For example, this is what you see right after landing on Roseâs homepage.
They include a âBuy nowâ CTA to tell you about an active offer.
And if you pay close attention, youâll see how this holds true for almost every online store.
â 4. Organize your calls to action hierarchically (so your clients donât feel overwhelmed)
Can I put many different CTAs on the same webpage?
Well, you can, but you must display them in an orderly manner.
If you put them all close to one another, it can confuse your users and they wonât know where to click (which will have a negative impact on your siteâs usability).
Going back to the previous example of the physical store, itâs as if three different assistants came and spoke to you at the same time. Youâd be overwhelmed and even more confused. đ
But everythingâs clearer with a visual example.
This is Makariâs homepage. They have more than fifteen CTAs on this page alone (including the âSubscribeâ button).
But theyâve organized them hierarchically as follows:
- The most important is a banner showing the active offers.
- Right below that, thereâs a section where you can see the best products for you depending on your skin type.
- Then, thereâs a section with featured items and each of them includes a CTA leading to their respective product card.
- At the very end, in a smaller font, thereâs the box where you can subscribe to their newsletter.
This allows users to tell the most important CTA (the banner) from the secondary ones, as theyâre put in different sections in different parts of the page, which makes it easier for you to decide where to click.
â 5. Important information should be put together
The text surrounding your calls to action can serve to instill confidence in your users.
For example, you could add this information on top of the âBuyâ button:
- Warranty info
- Estimated arrival date
- A free shipping offer
Check out what theyâve done at ITS, another client of ours.
Each product card has a green (big and flashy) call to action: the âAdd to cartâ button. And next to those buttons, they tell you:
- Different delivery options
- Accepted payment methods
- How many people have purchased the product recently (as social proof)
- How long itâll take to get to you if you order before X time
- The minimum purchase for free shipping
Another option is to use scarcity in your favor with messages like âOnly X items left on stockâ (we have a whole post on how to use this mental trigger).
â Extra: Make adjustments and track the results
One last tip.
Youâve already seen how important it is to properly set up your calls to action and how to do so.
But thatâs not the finish line.
Once youâve created the basic design for your calls to action, run A/B tests to try different versions and find out which ones work best.
Here are a few ideas of small variations:
- Use different colors.
- Try different text versions.
- Change the wording slightly (instead of âAdd to cartâ, try âAdd to my cartâ).
- Use the first person for the text (âYes, Iâd like to download this guideâ).
- Change the text surrounding the CTA (try adding details about the warranty, shipping details, or the productâs scarcity).
Believe it or not, making just one of these small adjustments could have a huge impact on your conversion rate.
đ CTAs are also necessary somewhere else
You guessed it â in your online shopâs search results.
But thatâs only possible if you use an intelligent search engine, such as Doofinder, which allows you to include advertising banners and products on offer in the results.
This is something that, according to our clients, helps increase sales (a lot).
If youâd like to see for yourself, you can download Doofinder and use it on your website at no cost for 30 days.
Try it (make sure to put these tips into practice) and youâll thank us after seeing how much your sales have increased in just a month. đ
- Increase your eCommerce sales by 20%
- The 10 largest eCommerce sites in the world
- How to start an online shop from scratch