So, you’ve enticed a visitor with your speedy loading time and amazing value proposition. Now that they’re ready to buy, the next hurdle they have to take is adding the desired item to their cart.
Add to cart?
Adding an item to their cart refers to the action a visitor of a web shop takes when they put an item into their digital shopping cart. This action is usually performed by clicking a designated button on either the category overview page or the product detail page. Common variations include Add to Bag and Add to Basket. These phrases are then used in combination with respectively a Shopping Bag and Shopping Basket used on the website.
The ultimate micro conversion
Getting a visitor to click an Add to Cart button is an important micro conversion. Its significance stems mainly from the fact that it is often the first commitment that a visitor makes towards becoming one of your customers. Because this is such an important step for a visitor to take, I would urge you to set up event tracking for this action if you haven’t already done so.
Before the click or tap
Call-To-Action button
One of the most important aspects of determining whether or not a visitor will add an item to their cart is the Call-To-Action (CTA) button.
Shape
While it’s okay (even advised) to make the button stand out in regards to the shape, try not to go overboard with this. Make sure the button still has enough affordance to intuitively make people realize that this is the element that they should be clicking on.
Color
Most importantly you shouldn’t buy into the myth that one particular color of CTA button will always perform better than all the others. While it may be true that a green button performs best on website X (particularly if the rest of the design is mainly red), it would probably perform poorly on a website whose design is predominantly green-colored. In other words, it’s not that actual color that’s important, it is the contrast compared to other elements on the page.
Size
Similar to the item above, while you should make sure the item stands out, at the same time you should also be wary not to make it too big. After all, you wouldn’t want a visitor to overlook your CTA button because he is mistaken it for a banner now, wouldn’t you? Also, make sure to test the button on mobile and tablet to make sure it look well-proportioned compared to the other elements on those devices as well.
Position
The optimal position of the CTA button on the product page can be trickier than it might seem. Whenever possible, the web designer should set up the visual design in a way that the CTA and price are in close proximity to each other. This in order to prevent the visitor from having to look back and forth to know for sure the price they will be paying when they click the button.
Above or below the fold
With regards to the fold, you should consider the complexity of the product you’re selling. If the product needs to be explained to visitors first, try placing the CTA below the fold. In instances where the product is pretty self-explanatory, try placing the CTA above the fold. Of course, whenever possible you should use A/B testing to verify if this rule of thumb works best for your target audience as well.
Text
I’ve seen instances where changing the text on a CTA button increased Click-Through-Rate (CTR) by over 50% and conversion by more than 10%. One of the most important aspects to keep in mind here is the level of commitment or ‘no return’ a button implies. While ‘Buy Now’ represents a high level of commitment (in fact, my credit card might be charged immediately), the text ‘Add to Cart’ on the other hand, implies that additional steps need to be taken before there is a point of no return.
After the click or tap
Errors
Unfortunately, the first thing that happens after you click on a CTA is that an error will be shown. Most often these errors will alert you to the fact that you have forgotten to select one or more attributes of the item you intend to buy. Such attributes include size, color or amount.
In order to get visitors past this hurdle as soon as possible, make sure the error can’t be easily overlooked, and perhaps, more importantly, tells them clearly how to proceed. The error ‘Something went wrong’ is not helpful, ‘Please select a size first’ is.
Animation, notification or popup
After a visitor clicks the button, they should be notified that the item they intend to buy was added successfully to their shopping cart. As it turns out, there are quite a few ways of doing this.
Graham Charlton sums up the matter at hand accurately in his article on Econsultancy:
![Graham Charlton]()
“I think the best approach to this will depend very much on the type of e-commerce site and, of course, it makes sense for retailers to test these variations until they find the best solution.
It does make sense to have a clear indication that an item has been added to the basket, and to show the next steps in the process.”
Goals and data
By looking closely at your goals and data, you might even be able to distil the optimal solution for your website. For instance, you might ask yourself these questions:
- What % of visitors are buying more than one item in a single transaction?
- How likely is it that visitors would add more items if it were easier to do so?
- Are you aiming for maximum lifetime value, average order value, the number of transactions?
Redirect to cart or continue shopping?
If it’s likely that the vast majority of visitors will only order one type of items per transaction, it might be best to redirect visitors to your shopping cart and show a success notification there. However, if the data shows visitors are often adding more items per transaction, consider showing an inline popup on the product page to notify them of their successfully updated cart.
Recommendations
Summarizing the findings above: make sure your button stands out from the rest of the design in terms of both color, size and shape. However, make sure visitors on all types of devices will still clearly recognize your CTA element as a button they can click on.
For shops that often have visitors buying several different items per transaction: show an inline popup on the product page, and allow the visitor to continue shopping. If, however, your visitors will most likely buy just one item per transaction: take them to your shopping cart and show a success notification there.
Dutch translation: Verbeter je 'Leg in Winkelwagen' Conversie Ratio
He is the founder of ConversionReview. He has been building and optimizing websites for 15+ years now, and doing so with great success.
On top of his digital skills, Theo is also a trained psychologist and frequent speaker at events around the world.