How (And When) To Use a Sticky Add to Cart Button For Improved User Experience

Brands want to make it as easy as possible for customers to shop on their mobile devices. Browsing through products on a tiny screen can be frustrating, not to mention it can be time-consuming to scroll all the way back to the top of a page just to add a product to the cart.

Enter the sticky add to cart button.

This fun-sounding feature provides a simple solution for ecommerce brands wanting to convert more sales on mobile. We’ve tried and tested it with a number of brands to bring you this comprehensive guide to the sticky add to cart button.

What is a sticky add to cart button?

The sticky add to cart button is a design element ecommerce brands use to keep the add to cart button visible on a mobile screen while customers are browsing. It can hover near the top or the bottom of the screen to give shoppers the chance to tap it wherever they are on the page.

While sticky add to cart buttons can increase conversions on desktop sites, we’re diving deep into the mobile version for the purpose of this piece. This is because sticky add to cart buttons are particularly useful on smaller screens where it’s easy to lose the add to cart button.

Hand sanitizer brand Touchland implements a sticky add to cart bar on its mobile site but not on the desktop version.

Sticky add to cart buttons can include:

• Simple, action-focused copy (i.e. “add to cart”)
• Branded colors
• The name of the product
• An image of the product

The importance of mobile conversion optimization for ecommerce brands

79% of smartphone users purchased a product through their mobile device in the last six months of 2021. An increasing number of shoppers are turning to their handheld devices to browse products on the go, but to turn window shoppers into real customers, store owners have to make it easy to purchase.

In the past, shoppers happily browsed products on their mobile devices but would turn to their desktops when they wanted to make a purchase. This is changing as an increasing number of ecommerce brands implement mobile-friendly features on their site. To stand out and enjoy the lion’s share of sales, brands need to optimize the mobile version of their sites and make it as easy as possible for customers to purchase mid-browse.

Sticky add to cart buttons provide an effective solution since they are a consistent reminder that shoppers can make a purchase directly from their mobile. This ultimately improves the customer experience to increase sales.

Should you use a sticky add to cart button?

You should always start your conversion optimization program with quantitative and qualitative research. This will lead you to data-backed testing ideas, rather than just assumptions and intuition.

A few things you can try before determining whether a sticky add to cart test would show a lift in conversions on your site.

• User testing: Ask users that fit your target customer profile to browse your mobile site and provide their feedback. Identify pain points and consider if a sticky add to cart button might solve them.
• Heat and scroll mapping: Use a heatmap tool to see where users are dropping off on your product page. If there’s a high drop-off, a sticky add to cart may help encourage users to scroll further.
• Analytics: Data is your friend when it comes to any kind of A/B testing. Maybe you already have a sticky add to cart button, but if lots of people are clicking, yet aren’t proceeding with the sale, you know there’s a different point of friction further through the checkout process that’s increasing cart abandonment.

One particular client of ours increased their conversions by over 4% simply by making their add to cart button sticky.

The plant-based food brand used product pages that featured robust content about their product benefits – giving users a lot of valuable information but requiring a lot of scrolling. This meant if users did engage with that product page content, they didn’t have an easy way to return to the top.

We implemented a sticky add to cart button on product pages to increase the visibility of purchasing actions and increase engagement on the page.

The test included a control and a variant. The control version didn’t include a sticky add to cart button, but the variant displayed a different sticky add to cart button depending on the action a shopper was taking:

• Scroll down: Showed sticky add to cart button in a contrasting color
• Scroll up: Showed sticky add to cart button and the menu

If a shopper hadn’t selected a size, the sticky add to cart button included the product name, star rating, and review count. If they had chosen a size, the button included all of the above plus the product price.

The variant produced a 4.09% lift over the control version. Based on the lift in per session value, we estimate that implementing the winning variation would produce noticeable revenue gains for the online store.

5 elements to consider when creating a sticky add to cart button

Sticky add to cart buttons have the potential to pump up your conversion rates – but, like any design element, there’s a knack to getting them right. Ultimately, what works for one brand might not work for another and vice versa, so we highly recommend performing user testing and also A/B testing your sticky add to cart buttons to find one that performs well.

Before you get stuck in one scenario, consider these important elements:

• The device: Will you be implementing a sticky add to cart on mobile, desktop, or both? The design of your button should vary depending on the device (we highly recommend a sticky add to cart for your mobile site)
• Customer intent: What do shoppers want to do on the product page? Is there content they might want to read rather than be greeted with a very obvious “buy now” button?
• Button text: What information do shoppers need to know before they add a product to their cart? Can you add it to the sticky button? We recommend including some persuasive elements like review count and star ratings, but don’t cram your button with information
• Where it’s shown: Does it activate on scroll up or scroll down? If you have a robust navigation, you’ll want to make sure it’s not taking up too much valuable screen real estate if you already have other sticky navigational elements. Additionally, what portion of the page should users see a sticky add to cart? We like to show it after they’ve already scrolled past a certain amount of content – for example past the buy box area.
• Other checkout elements: Sticky add to cart buttons can bolster other checkout elements – we added the shipping time near a sticky add to cart button for our client Wheelership which worked really well for them

There are a number of sticky cart Shopify apps in the Shopify store that let you create and customize a floating bar for your site or use one of the existing templates.

How to test sticky add to cart buttons

Sticky add to cart buttons are very flexible. There are a ton of tools and apps you can use to quickly implement one on your site but, to ensure the most success, you should A/B test your buttons.

Start with a control version that doesn’t include a sticky add to cart button and create a variant or variants that include different elements. Here are some of the elements you can change and experiment with during the testing phase:

• Colors: Test different colors, including neutral colors and colors that contrast with your brand
• Copy: Play around with the text on your buttons
• Elements: Experiment with including persuasive content like star ratings, review count, price, and a product photo
• Incentives: Try adding an incentive, like free shipping, or entice shoppers with an upsell

You can also change the button to match the shopper’s intent. For example, with the client we mentioned above, we implemented a different colored button with different text when a shopper was scrolling up and down the page. We also changed the copy on the button to include the price if the customer had already selected a size.

Let’s take a look at a sample sticky add to cart A/B test with two different variants.

• Control: No sticky add to cart
• Variant #1: Sticky add to cart in the same color as the website header that includes the product name and price
• Variant #2: Sticky add to cart in the same color as the website header that doesn’t include the product name and price

If variant #1 outperforms variant #2, you can run another test with an additional set of variants:

• Control: No sticky add to cart
• Variant #1: Sticky add to cart in the same color as the website header that includes the product name and price
• Variant #2: Sticky add to cart in a contrasting color that includes the product name and price

Again, if variant #1 outperforms variant #2 you can assume that shoppers prefer a branded add to cart button. However, you can continue to test the copy and what elements are included until you find a variant that outperforms all other variants.

8 examples of sticky add to cart button designs from mobile ecommerce sites

Ecommerce sites are quickly wising up to the conversion gains of sticky add to cart buttons. We’ve put together a list of some of the top brands that are implementing these features in their own unique way.

1. Gymshark

Gymshark changes the copy depending on where the shopper is located. For UK customers, the call to action says “add to bag” and for US shoppers it says “add to cart”.

2. Skims

Skims’ sticky add to cart button is more of a banner that runs the full length of the page. It’s branded to fit in seamlessly with the rest of the site.

3. Bailey Nelson

Eyewear brand Bailey Nelson features its checkout button at the top of the page. The copy includes the name of the product, the color, and the price.

4. Holland Cooper

Holland Cooper has a much larger sticky bar than most sites and it only appears when a customer has scrolled almost all the way to the bottom of the page. The banner encourages shoppers to “make a selection” and the copy includes the name of the product, the color, and the price.

5. Lazy Oaf

Lazy Oaf’s stick buy button blends in perfectly with the monochrome color scheme of the site. It’s strategically placed above another sticky button that asks shoppers if they want 10% off.

6. Ruggable

Ruggable’s quick buy button is a banner at the bottom of the page. It’s in a bright yellow color that’s in contrast to the site’s more neutral blue branding.

7. Caraway

Caraway’s popup add to cart button allows shoppers to select the color of their chosen product from a dropdown menu wherever they are on the page.

8. Greetabl

Greetabl actually uses its sticky add to cart button to promote an upsell when a customer already has an item in their cart. Shoppers have the option to “add bonus” or “skip bonus”.

Increase conversions with a sticky add to cart button

Convenience is key for mobile shopping. Customers should be able to add items to their cart without having to scroll all the way back up the page. Sticky add to cart buttons make this possible, improving the user experience and providing ample opportunity for shoppers to convert. Start by testing different variants to find one that works best for your brand and continue to tweak and test until you’re experiencing the desired conversion rates.

If you haven’t already, test out a sticky add to cart on your mobile site. And, if you’d like a helping hand, consider a Conversion Growth Assessment™ for customized, actionable recommendations for your brand.