A call to action is a signpost on the path toward a goal. Like a mile marker nudging a runner along during a marathon, or an arrow pointing a hiker to the summit.

Calls to action let your visitors know where they are, and what they should do next. There are a million different ways to use CTAs to inspire certain behaviors. Heck, you could probably find 10 different CTAs on this page. Download. Subscribe. Learn more. Share.

Websites are always trying to get your attention and, after that, get your action. Here’s a call to action example from Amazon. At a glance, it looks like Amazon just wants you to sign up for Amazon Prime. And that’s true – this call to action is indeed designed to generate Prime signups. But there is lots going on in this CTA.

Call to action from Amazon

Look at the Without Prime column:

  • The headline is black, cramped, and boring
  • The prices are in red and look like a warning
  • Instead of using a button, which makes people think “click,” they just use text
  • The text reminds you that you’ll be “without fast, free shipping”

Now let’s look at the Prime column:

  • The headline is soft blue and has a smiley face
  • Instead of red numbers, which say “STOP!”, they use green numbers, which say “GO!”
  • That yellow button jumps off the page
  • The text in the button talks about “benefits”

So much goes into a good call to action. This post will look at nine things to keep in mind as you build CTAs for your store, along with call to action examples of each. Shall we?

What is a call to action?

Calls to action, or CTAs, are used by websites and apps to trigger certain behaviors. Calls to action come in various formats – including buttons, images, and text – and encourage people to take certain actions. Calls to action commonly implore visitors to browse products, sign up for newsletters, and share content on social media.

var kofs8zuhmcllmrp7,kofs8zuhmcllmrp7_poll=function(){var r=0;return function(n,l){clearInterval(r),r=setInterval(n,l)}}();!function(e,t,n){if(e.getElementById(n)){kofs8zuhmcllmrp7_poll(function(){if(window[‘om_loaded’]){if(!kofs8zuhmcllmrp7){kofs8zuhmcllmrp7=new OptinMonsterApp();return kofs8zuhmcllmrp7.init({“u”:”17210.372763″,”staging”:0,”dev”:0,”beta”:0});}}},25);return;}var d=false,o=e.createElement(t);o.id=n,o.src=”https://a.optnmstr.com/app/js/api.min.js”,o.async=true,o.onload=o.onreadystatechange=function(){if(!d){if(!this.readyState||this.readyState===”loaded”||this.readyState===”complete”){try{d=om_loaded=true;kofs8zuhmcllmrp7=new OptinMonsterApp();kofs8zuhmcllmrp7.init({“u”:”17210.372763″,”staging”:0,”dev”:0,”beta”:0});o.onload=o.onreadystatechange=null;}catch(t){}}}};(document.getElementsByTagName(“head”)[0]||document.documentElement).appendChild(o)}(document,”script”,”omapi-script”);

1. Not All Calls to Action Are About Sales (Not Now, Anyway)

In ecommerce, the ultimate goal is sales. That’s why so many ecommerce CTAs tell us to buy or shop or add something to our basket. But there are plenty of CTAs that have nothing to do with generating sales. Or at least they have nothing to do with generating sales right now. Instead, lots of calls to action that are designed to generate leads, inform shoppers, and encourage sharing.

Let’s look at some call to action examples that encourage users to take all sorts of actions besides making a purchase.

The social proof CTA

All of these clickable buttons from Casper display different types of customer reviews. The buttons are essentially the company’s selling points – the 100-night trial, the incredible comfort, etc. – and each one shows visitors just how much customers loved their Casper experience. Calls to action like this bring shoppers closer to a sale even though “add to basket” is nowhere in sight.


Social proof calls to action

Pipcorn, which makes popcorn snacks, has video calls to action that also act as social proof. Each short video features a Pipcorn fan explaining their favorite “mini moment” and, of course, explaining what they love about Pipcorn.

Call to actions pushing testimonials

The sharing call to action

There are numerous calls to action in these two images from HubSpot, and none of them has anything to do with sales. These CTAs are designed to make it easy to share HubSpot’s content on social media, email, or anywhere else (the last icon is “copy”).


Call to action with social buttons

CTAs to share content

The mailing list CTA

In these three images, we see a discount, then a free download, then an offer to answer questions. In each one, the CTA is designed to get an email address. That email address can be used to send marketing materials and additional offers to nurture future sales. Unlike CTAs that say “Buy now!” these CTAs essentially say, “Let us email you so you might buy later.”


Discount code for newsletter signup

CTA for newsletter signup

CTA to get in touch

2. Calls to Action Can Appear Just About Anywhere

There are no rules for where you place your CTAs. Here we see that Foodora, a food delivery service, wants visitors to enter their address to confirm that delivery is possible. Foodora knows that if a hungry person selects food, gets out their credit card, and starts fantasizing about dinner, they won’t be happy to learn that they live too far away. That’s why there’s a big call to action telling you to Check now if delivery is possible.


CTA from Foodora

Even if you scroll down, you can’t shake the Enter your street address text field and button: It follows you down the page.

CTA pinned to the top of the page

We’re big fans of CTAs with dynamic placement, as well. For example, if you want to sign up for our newsletter, you can do it at the top of every blog post.

CTA for a newsletter signup

If you scroll down, you’re still going to have a CTA giving you a chance to enter your email address.

CTA pinned to the bottom of the page

HubSpot also does a good job of getting their CTAs in front of visitors, no matter where those visitors might be on the page. This image shows how a HubSpot page responds when you scroll down a bit: The top two calls to action (Subscribe and Get started) stay pinned to the top, and the sharing CTAs stay pinned to the bottom.

HubSpot CTAs

One final example of great call to action placement. This heart lets you add an item to your wish list. Not only is the design catchy – a heart is better than a rectangle that says Add to wishlist – but it also doesn’t intrude on the product image itself. It’s always there, but never in the way.


CTA to add something to a wish list

3. Supporting Text Gives Extra Juice to CTAs

A call to action can only say so much. Most CTAs are roughly the size of a button, so there isn’t always space to brag about features or deals. These next call to action examples prove that you can make your CTAs more clickable with some supporting text.

The actual call to action here contains two words – SHOP NOW. But those two words have lots of help. Starting at the top: In the main navigation, the word CLEARANCE is in a different color, immediately catching shoppers’ eye. Just below that, there is a note about free shipping. Below that, the word CLEARANCE again. Then a fat number, then another note about free shipping. SHOP NOW is not the focal point. At all. Instead, SHOP NOW is just the vehicle to take advantage of all the cool stuff on the rest of the page.

CTA promoting a clearance sale

Here are some CTA examples from car manufacturer Tesla. First, Tesla lets visitors know that if you want to Shop now, you can get a car in less than 14 days. Meanwhile, custom-built vehicles (Build your own) are available in one to two months. Text is used to set expectations, explain options, and guide the visitor exactly where they want to go.

CTAs from Tesla

Next up is a CTA example from Audible, the audio book outlet. The call to action itself is enticing and informative, with words like “free” and “trial” reassuring the visitor that there really isn’t any downside here. And on top of that, there is a ringing endorsement about how this is the “perfect first listen.” Interestingly, this quote comes from an Audible employee named Alex. But hey, doesn’t matter. The end result is a CTA supported by convincing text.

Audible CTA with testimonial

This next call to action, which encourages visitors to shop for high-end passport wallets, has cheeky copy about how there are no passport stamps included with the product. Notes like that might offer the final little push toward a purchase that Shop now never could.

Cheeky text next to a CTA

More harmony here between the CTA and surrounding text. New and discover absolutely support each other: Discovering new things is way better than shopping or browsing for new things. Little turns of phrase like that can have a huge impact on the effectiveness of your CTAs.

Good copy on a CTA

4. CTAs Don’t Have to Be Boring Buttons

Websites all across the web are doing interesting things with CTA design. After all, there’s no rule that says CTAs have to be colored rectangles.

Here, for instance, is a newsletter signup, and the word Subscribe is nowhere to be found.

Join us CTA

This CTA design from Boss is embedded among dozens of products. It absolutely captures the visitor’s attention: You expect to see another article of clothing, and instead you get an invitation to look at a new collection.

A CTA embedded in a product list

In this page promoting its social advertising capabilities, MailChimp uses faux advertisements as CTAs. Click on the Google ad, and you go to a page explaining MailChimp/Google integration. Click on the Instagram ad, and you go to a page explaining MailChimp/Instagram integration.

Social media solutions from MailChimp

Never a slouch when it comes to design, Apple cooked up a beautiful call to action for the iPhone X. Can’t decide where to click? Doesn’t matter. The entire thing is linked, so you can click anywhere on the screen with this new-age CTA.

Massive CTA from Apple for the iPhone X

Here are a few more beautiful call to action examples. There are standard CTA elements like Shop now, but in each of these, the entire screen is a clickable call to action.

KKW Beauty CTA

Huge CTA with small button

Small button with a big CTA


5. Stand-out Calls to Action Can Guide Visitors Where You Want Them

If there are certain products you want to push or certain deals that you want shoppers to be aware of, you can adapt your calls to action to nudge people exactly where you want them to go.

Calvin Klein does exactly that with this Sale call to action. They’re happy for you to click on Women or Underwear, but the CTA encouraging visitors to check out the sale stands out. And of course shoppers love a sale, so it’s a win-win: CK shows you items that are ready to move, and the shopper immediately learns about the best deals.

CTA from Calvin Klein

The software company Zendesk uses this tactic to funnel people to its “Support” product. When you hover over the Products tab on the Zendesk website, lots of options pop up. But one option pops up bigger than the rest – Support. The size and placement of this call to action show that Zendesk wants you to check it out.

Product-related CTA from ZenDesk

Here is another call to action, from Nike, that immediately catches the eye. You can Shop now, which would make any ecommerce store happy. The other option, though, is Customize and buy. The subtle inclusion of a color wheel catches our attention and reinforces the idea that you can get creative with your customized shoe design.

Nike CTA

6. Being Tricky With Calls to Action Is Lame

Every now and then you’ll find calls to action that are a bit misleading. These are no fun.

Instead of utilizing the strategy we just discussed – creating eye-catching CTAs to direct visitors toward best deals and services – these CTAs do the opposite. They use colors and placement to guide users toward items that they specifically don’t want, often to prevent the customer from churning.

To cancel your subscription at this website, you have to answer a couple questions. No big deal. But the last step is submitting the cancellation – and then things get tricky. There are two buttons, and everything about them is counterintuitive. For starters, they are inverted: Generally when two buttons are side-by-side, the button that means “proceed” will be on the right. Here, Submit Cancel is on the left. In addition, the Back button is colored, which instinctively draws the user’s attention.

Deceptive CTA

Here’s another example of deceptive CTAs, once again relating to a subscription cancellation. When you signal your intention to quit, you go to this page. You get one last sales pitch to renew your subscription:

Confusing call to action

After you scroll through the sales pitch, you can go ahead and confirm the cancellation:

Call to action

After you click Yes, it’s all over. Or so you thought. Instead, clicking Yes simply takes you to another page:

Cancellation of subscription

You are forced to scroll some more, and eventually submit answers to questions. And then, you have to cancel again.

Confusing CTAsAt this point, you have answered the same question – Are you sure you want to cancel? – two times. You have also navigated across multiple pages, and if you dropped out of the process at any point, the cancellation wouldn’t go through.

This kind of thing has all sorts of downside. The best case scenario is that the churning subscriber – who is presumably already less than 100% satisfied with the service – succeeds with their cancellation. The worst case is that the CTAs confuse the user enough that the cancelation doesn’t go through. That would mean (a) they have to go through the cancellation steps again, or (b) they are surprised next month when they are billed for a service they thought was canceled.

7. It’s Fine to Use CTAs More Than Once

With calls to action, sometimes you have to repeat yourself. And that’s fine. If your CTAs are tastefully designed and create value for shoppers – for example, leading them to the best deals or newest offers – then they won’t mind seeing them more than once. Or more than twice. Or more than… well, let’s just take a look at a few call to action examples that utilize the say-it-more-than-once strategy.

This page gives users every chance to shop. The placement of these calls to action ensures that, on desktop or mobile, the visitor is always in close proximity to a button that’ll help them shop.

Page with numerous CTAs on it

Let’s check back in with Audible, whose homepage is littered with calls to actions. Each and every CTA button on this page has the word “free,” which is surely no accident. Audible also uses “try” three times, and “trial” once. It’s like a one-page “free trial” drip campaign.

An Audible page with multiple CTAs

8. Be Careful With Calls to Action That Require Apps

In the beginning, CTAs were mostly intra-site. In other words, the “action” in “call to action” kept the visitor within the website they were already on – visit a page, go to checkout, add something to a basket.

Then we saw an explosion of social CTAs. In addition to browsing products or making purchases, calls to action started encouraging users to post images on Pinterest, share articles on Twitter, etc.

The next evolution: using calls to action to let people share stuff on apps. Here, for example, are some of the new icons that you’ll find on the web – WhatsApp and Slack are the first two. WhatsApp is a mobile messaging app that also has a desktop app; Slack is a desktop and mobile workplace collaboration tool.

Social CTAs

CTAs that encourage sharing are awesome. But the thing is, when you incorporate apps like WhatsApp and Slack into your calls to action, it requires integration with technology that is not simply off-site, but also off-browser. And even in 2018, these integrations are not always smooth.

Here is what you might see when you click on the Slack CTA. Nobody wants to click on a call to action and then see a note that you need to contact your administrator.

Failure when using Slack CTA

Same thing can happen with WhatsApp. Instead of sharing an article via WhatsApp, you might be asked to sign up for WhatsApp – even if you’re logged in to the desktop app.

WhatsApp signup page9. CTAs Can Be Used as Navigation Tools

Calls to action are great navigation tools: You benefit because you can guide your visitors exactly where you want them to go, and your visitors benefit because they have a clean experience navigating your site.

Here are two call to action examples from Hugo Boss that are designed to help visitors navigate the massive selection of categories and subcategories available.

Hugo Boss shopping CTAs

Hugo Boss CTAs for navigation

This call to action takes it a step further – men and women, yes, but also boys and girl. On sites with endless options, CTAs like this can save your shoppers time and effort as look for products. And we want to do anything we can to reduce the time it takes them to get to checkout.

Calls to action to help shoppers find productsCall to Action Conclusions

Alright, so there are nine CTA rules to keep in mind as you build your store. Let’s recap what we went over.

1. Not all CTAs are about sales (not now, anyway)

CTAs can serve lots of purposes, from increasing social engagement to encouraging newsletter signups.                                     

2. CTAs can appear just about anywhere

Calls to action are worthless if no one can see them. Pin them to your top navigation or have them appear when visitors scroll.

3. Supporting text can really give life to calls to action

A call to action might just be two words – Shop now – but those two words can be more effective with text that supports the CTA.

4. CTAs don’t have to be boring buttons

Bored with buttons? There is no rule against making an entire section of your website a clickable call to action.

5. Stand-out CTAs can guide visitors where you want them

If you have certain products or offers that you want your visitors to see, use colorful, attention-grabbing calls to action to get them there.

6. Being tricky with calls to action is lame

The same tactics you can use to deliver value to your customers can also be used to trick them. Which isn’t cool.

7. Sometimes asking once won’t work

Don’t be shy with your CTAs. People scroll, they get distracted, they might not be paying attention 100 percent of the time. If your calls to action are designed to help, nobody will mind seeing them more than once.

8. Be careful with calls to action that require an app

Incorporating social media and email into your CTAs can really help boost engagement. Just be careful when you take that next step and put CTAs featuring apps like WhatsApp and Slack on your site. The tech isn’t always flawless.

9. CTAs can be used as navigation tools

CTAs can be used to funnel your traffic where they want to go.

What to learn more?

17 Easy Ecommerce Store Design Tricks to Skyrocket Sales Now

40 Amazing Examples of Ecommerce Website Design

6 Lead Generation Tips for Ecommerce

The post 9 Rules for Building Killer Calls to Action appeared first on Oberlo.