Should you make your add to cart section sticky?

Note: a sticky section is a section which stays in place on a page. For example, if you scroll down the page, the whole page scrolls but the sticky section stays in the same place.

The design and UX of the add to cart section (buttons, options, quantity controls) is debated a lot.

• Should we make the add to cart button sticky?
• Should we make the entire section sticky?
• Should we hide some selections (size, color, flavor) or show all?
• Should we show all sizes as buttons or shove them in a dropdown?
• In what order should we present the different options?

This case study is about the first question. It shows the results from a simple AB test.

What was tested:  having the entire add to cart area be sticky versus not sticky
Where it was tested: on desktop devices
What kind of website: an ecommerce site in the supplement space.

The variation with the sticky add to cart button, which followed the user down most of the right side of the page showed 7.9% more completed orders with 99% statistical significance. For ecommerce brands doing $10,000,000 and more in revenue from their desktop product page traffic, a 7.9% increase in orders would be worth $790,000 per year in extra revenue.

Sticky add to cart areas on desktop product pages are less common than on mobile, so this result suggests many ecommerce companies may benefit from AB testing sticky add to cart buttons or entire add to cart areas being sticky on their product detail pages.

The Variations

The variations were simple. One of them (A), the buy box was not sticky and in the other (B) it was sticky.

In this case, the client’s product page had a sticky buy box (variation B) to begin with, and it hadn’t yet been tested. The reason to test this was because there was a content-focused culture around the brand, so it was important to learn how much users want to be left alone to read content versus having a more in your face request to buy following them down the page.

One can make a theoretical argument for both variations:

• Argument for variation A (not sticky): You don’t want the site to act like a pushy salesperson, hovering over your shoulder when you’re just trying to read about the product and its benefits. It will turn people off.
• Argument for variation B (sticky): People can read about the product just fine, and reminding them of the ability to add to cart will increase the percentage of people that do so.

Results: Sticky Add to Cart Button Gets More Orders by 8%

In this test, the sticky add to cart variation showed 7.9% more orders from the product pages with 99% significance. The sticky version also showed an 8.6% increase in add to carts with 99%+ significance. The test ran for 14 days and recorded approximately 2,000 conversions (orders) per variation.

Referencing the arguments for either side above, this test gave valuable information about the customer (and saved a potentially conversion hurting future change of undoing the sticky add to cart area).

Despite this brand’s heavy focus on content, despite the customers’ needs to read a lot about product uses, benefits, ingredients, and more, having an ever-present add to cart area seemed to be okay with the customer. It did not annoy the customers,  and in fact seemed to increase the percentage of them that decided purchase. This is a useful learning, despite this test largely being in the usability category, not desirability.

(Note: This is true of this store, it may not be true of yours. Hence you should “consider testing” this. Don’t just “do” this.)

This learning can actually be extended beyond the product pages to content pages such as blog posts where being more aggressive with product links and placements can be tested to see if similar results can be achieved there.

This is why AB testing is so great for learning.

Sticky Add to Cart Button on Mobile Product Pages Also Increased Conversion Rate

As a follow-up test, a sticky add to cart button was tested on mobile product pages of this exact same supplement ecommerce store.

Three variations were tested: (A) No sticky add to cart button (B) Sticky add to cart button that simply scrolls the user to the add to cart area on the product page (C) Sticky add to cart button that causes the add to cart area to slide up from the bottom of the page like a hidden drawer.

Results: a 6.5% increase in orders for variation C where the add to cart area slides up like a drawer, with 97% statistical significance. This test ran for 12 days and also had about 2000 conversion events (orders) per variation.

This suggests that similar conversion gains can be realized on mobile product pages, but the details of how to implement them and the UI/UX that will cause a conversion increase are important.

Sticky Add to Cart Button Example: Actual AB Test Results

PS. With sticky elements you need to be careful and it’s all about the subtleties. You can make them work if they are visible but not intrusive. Or you can hurt conversions if they are too in-your-face. So be helpful but not intrusive.