The Subtle Art of “Add to Cart”


Consider Cart Abandonment

Every online shopping cart is designed to keep the shopper on the path to conversion. Out of a wide variety of approaches, four distinct cart methods have emerged. While some methods are designed to push the shopper towards checkout, others are designed to increase average order values. In this article we’re going to explore the different methods of adding an item to the cart and discuss how each method can affect shopping cart abandonment.


First in our list of cart adds is the “click-to-cart” mechanism. On some sites, after you find the product you want, when you click the button, you’re taken directly to the shopping cart page. From here, you can make slight changes to your order and proceed to checkout. Examples of this type of shopping cart add can be seen on the websites of ecommerce giants like and even smaller upstarts like Jenier World of Teas.

cart abandonment

Add-to-Cart Considerations

  • This method pushes the user one step closer to checkout, encouraging an immediate conversion. After clicking the button, the consumer lands directly in the shopping cart. There is no mistaking; now is time to buy.
  • Click-to-cart mechanics proactively work to reduce cart abandonment. By minimizing the number of steps between landing page and checkout, users have fewer chances to abandon.
  • After landing the user on the shopping cart page, cross-selling becomes a precarious tactic. You don’t want to redirect users away from the shopping cart page, as that would defeat the purpose of the click-to-cart button. You can see Apple’s elegant solution to this problem above. They allow users to add items to the cart with a single click.


Expanding Cart View

The Expanding Cart View method is much less aggressive than the click-to-cart mechanic. As the examples from Burberry and Cost Plus World Market show, with this tool, the contents of the user’s shopping cart are displayed in a roll-out window following the cart add. This method keeps the user on the same product page after the button press and adds a subtle, elegant touch of class.


Cart Considerations

  • The Expanding Cart View is stylish and sleek and allows shoppers to continue to focus on the product they’re currently considering.
  • In addition to adding an item to the shopping cart, this method serves as a type of wayfinding device. The user’s eye is drawn to the movement of the expanding cart menu, which teaches the shopper how to check their current order.
  • While this technique isn’t quite as aggressive as the click-to-cart method, docking the shopping cart to the page header gives the user a direct pathway to checkout from any page on the entire site.
  • The trade-off in facilitating easier continued browsing is that it becomes easier to abandon a cart. Statistics show that website abandonment rates decline as a customer moves further down the conversion funnel. An expanding cart view keeps the consumer at the product level.


Intermediary Add Page

The intermediary add page has been popularized by ecommerce titan and many other big names have followed suit, such as When a user adds an item to the cart, they’re directed to a brand new page, as seen below, that confirms their action. From here, the user is strongly encouraged to move onto the cart and complete checkout.


Cart Considerations

  • The result of a user click is unmistakable. Any continued shopping is paused in order for the consumer to see exactly what’s been moved into the shopping cart.
  • Although the calls-to-action strongly encourage movement into the shopping cart, the header navigation remains, giving users the user the ability to continue shopping. Determined customers will likely continue shopping.
  • By dynamically creating a page each time a product is added to the cart, retailers are given a tremendous opportunity to cross- and up-sell. Amazon achieves this famously, using more than 50% of page real estate to promote related items.


The Modal Window

On some sites, a cart add is followed by a modal display window that gives users the option to continue shopping or checkout. This lightbox displays over the rest of the page, making the user pause for a moment and interact with the new window before they continue shopping or checkout. This method is particularly popular among office supply vendors, like and, whose website we’ve spent a good amount of time analyzing.

addtocart_officedepot1 addtocart_officedepot2

Cart Considerations

  • A pop-up window filled with products and buttons is hard to ignore. The user is given a clear indication that their item has been added to the cart.
  • Modal windows are an exceptionally effective way to cross-sell related products. As seen in the images above, it’s as simple as entering a quantity to add additional items to your order. The impulse buyer may be tempted into adding a few products in a row, as the recommendations shift with every add.
  • Although the customer can continue shopping by pressing one of two buttons or tapping the escape key, the prominent call-to-action encourages movement towards checkout.


Subtle Notifiers

Some stores take a much less aggressive sales approach, and it’s reflected in their add-to-cart mechanisms. When a user clicks the “Add to Cart” button on, for example, the button’s color fades and the text changes to, “Added.” This simple, subtle technique is entirely unintrusive and allows the shopper to move at their own pace.


Cart Considerations

  • This system makes shopping for multiple items an extremely simple, point-and-click process. Each click is another item added to the cart.
  • Shops like offer a huge selection of goods that are often bundled together by users. This system facilitates that perfectly, helping raise the site’s average order value.
  • With careful implementation, subtle notifiers are a great way to reduce cart abandonment. Once an order has been carefully constructed of multiple items, users may be reluctant to let their cart expire.

The Big Question
When we compare systems like this, it invariably boils down to the one, big question,

“Which method is best?”

This answer has two parts, and the first is, “it varies.” No one system is clearly superior to the rest, but one may be best for your specific business. If you’re going for the big, single sale, automatically pointing customers’ browsers to the cart is a great way to sell aggressively. If you’ve found cross-selling within a category of products to be particularly effective, then a modal window is a good way to get more cart additions before moving to checkout. If you’re a company that thrives on orders filled with products from a variety of categories, then perhaps a sleeker, subtle add-to-cart is the best way to go.

The second part of the answer is, “always test.” Experiment with different add-to-cart functions and see which performs best for your site. You may have an idea of how you’d like your site to function, but there’s no substitute for empirical evidence. Keep an eye on cart abandonment rates and conversion rates. In the end, let the sales numbers do the deciding for you.

For more information on optimizing your website to generate the most conversions from your traffic, contact UpSellit. Our experts are fluent with every type of checkout mechanic and can help put you on the pathway to reduced cart abandonment rates and increased revenue.


Written by Joe Rosenthal

Leave a Reply

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