6 Examples of Buy Buttons on Profitable Product Pages
August 11, 2022
August 11, 2022
By the time you’re visiting our website, the last online store you checked out will have lost sales due to abandoned carts.
It’s a stubborn industry-wide problem in ecommerce that’s seen a fair share of innovative solutions thrown at it, from persistent reminders that conveniently fill your spam mailbox to remarketing messages that keep your phone buzzing.
Despite these numerous attempts, buy buttons are the most promising solution.
To help explain why they are, we’ve gathered ten examples of buy buttons on profitable products pages. As we go over them, you’ll learn:
But first, why do buy buttons work?
Buy buttons are a more promising solution to abandoned carts than purchase reminders and remarketing campaigns because they’re preventive.
They make purchasing easier with convenient single-click checkouts at every customer touch point to discourage cart abandonment in the first place.
For your prospective buyers, nothing triggers reneging faster than the stark realization that they’re at the very start of a multi-step purchase process. First, the signup, then email verification, and on and on before the actual check out.
This lengthy and complex process essentially counters the benefits of impulse buying to ecommerce and contributes to the ongoing industry problem of abandoned carts. For instance:
Already, buy buttons have proven their effectiveness in tackling this abandonment problem. The following table highlights the massive impact buy buttons have had on some sectors through better checkout times.
By default, buy buttons improve your website and lead to better conversions. However, there are some visual considerations for using buy buttons that maximize their effectiveness. These include:
With these ideas in mind, let’s look at a few buy button examples from profitable product pages to understand their effectiveness.
Here’s an example of using contrast and sizable buy buttons to help draw the attention of your website visitors. Notice how the buy button is even larger than the company logo (green arrows).
Also, the black color creates a huge contrast between the “Buy It Now” button and the all-white backdrop while matching the orange-black theme of Caterpillar.
The result is a very visible buy button that’s aesthetically pleasing and emotive. A warm and welcoming orange coupled with a mysterious and intriguing black.
You need such emotional triggers for your buttons to go beyond being noticed and encourage visitors to take action.
Here’s an example from Outdoor Research of using size to establish a hierarchy for multiple buy buttons (green arrows).
Note how the “Add to cart” button is significantly larger and more visible than the “Get $20 off,” signifying importance and preference. Anyone who views both buttons is inclined to click on the first option, which is more beneficial to Outdoor Research.
Also, notice how the buy button maintains a top placement when scrolling through the product features and reviews below (green arrows).
This is an excellent strategy for keeping the buy button in the minds of the visitors as they learn more about the product's benefits and features.
In this way, the information about the product generates interest while the pinned buy button provides instant means of taking action.
Here’s an example by Evo of using the surrounding elements of your website to generate interest and clicks for your buy button (green arrows).
Observe how the buy button appears right under the warning “Sell Out Risk: High to Very High (1 to 2 remaining).”
The warning message is strategically written in red to signify danger and urgency, encouraging visitors to take immediate action and click on the buy button.
Meanwhile, below the buy button (2nd green arrow) is an assurance from Evo that taking action is fast and easy with same-day shipping. This assurance gives the reader another reason to take action and click on the buy button.
Here’s an example from Duckworth of using color to distinguish between two equally desirable actions for your website visitors.
Both buttons are similarly sized, signifying their equal importance to the store. Adding to your cart is just as beneficial to Duckworth as buying now, though different.
This difference is denoted by the different colors featured. The warm, orange color on the “Buy It Now” button nudges users towards this option without completely alienating the “Add to Cart” option.
The logic behind this strategy is that buying now closes the deal for Duckworth while adding to the cart enables deliberation despite the possibility of multiple purchases. Therefore, the preference is for the more decisive “Buy It Now” option.
In this example, Patagonia uses an animated buy button to draw your attention. The button inflates when one hovers a cursor over it, which sets it apart from the rest of the page (green arrow).
This animated effect is especially effective for attracting users who skim through this website and gloss over texts. The inflation effect stops these users midway and arouses more intrigue than a static buy button. In this way, the animated button gets more clicks.
Patagonia goes on to add supporting elements around the buy button. In this case, the store features a launch date (blue arrow) to help build anticipation and encourage users to join the waitlist.
How about this buy button from Toad & Co that’s built around customization options to generate interest and is animated to catch your attention?
The “Add to Cart” button changes from black to white when you hover a cursor over it and conveniently appears between several customizations that encourage purchase.
There are color options, size selections, installment plans, and even a wish list to help Toad & Co understand your taste.
This buy button works because it’s visible and takes advantage of the surrounding elements that help sell the product.
The main difference between buy buttons and links is their purpose.
Links are navigational tools that redirect a user to different web pages or a document, while buy buttons are enabling tools for actions within a web page, such as filling out a form.
Also, links can direct users to buy buttons, but the reverse isn’t possible.
Buy buttons are versatile conversion-boosting tools that are also applicable on:
A ghost button is a type of button with a transparent body, a thin borderline, and a text label within the body.
These buttons are excellent at keeping a user interface clean and minimal, but are more likely to be overlooked than regular colored buy buttons.
Here’s a comparison of a ghost button and a regular colored button on different websites.
While both buttons are visible, the colored button on the left is immediately striking and easier to spot when skimming through the webpage. Its green color against an all-white background creates more contrast than the transparent ghost button, making it hard to miss.
Share on LinkedIn: