Does a sticky header or sticky add to cart help on mobile?

A sticky element earns its space when it keeps the next action in reach. In our A/B tests, a plain sticky add to cart bar lifted mobile conversion 7.0% on long product pages. The same bar on a page where the button was already easy to find did not move conversion. A sticky category menu on a mobile homepage took space without changing what shoppers did.

So the answer depends on what you make sticky and how long the page is. Here is what the 3 tests show.

Sticky elements cost screen space

On a phone, every pixel at the top or bottom of the screen is taken from the content. A sticky bar is there on every scroll, so it has to be worth that space all the time.

It also has to stay out of the way. Under WCAG 2.2, a sticky header or footer must not fully hide an item that has keyboard focus. Make sure your page scrolls focused fields and links clear of the bar.

A sticky add to cart bar lifted mobile conversion 7.0%

On 1 store, mobile product pages were long, and the main add to cart button scrolled off screen quickly. We tested 2 sticky bars that appeared once the main button left the screen: a plain add to cart button, and the same button with the product name and star rating.

The plain bar won on mobile. Over 15 days, conversion rose 7.0% and revenue per visitor rose 12.0%. We implemented it on all mobile product pages. Desktop did not see the same lift, so we paused that side.

The extra detail in the second bar did not help. Shoppers already knew which product they were on. They needed the button back in reach, and that is all the plain bar did.

The same bar on another store moved conversion 0.6%

On a different store, we tested the same idea: a sticky add to cart bar that appeared once the main button scrolled away. On mobile, conversion moved 0.6% over 18 days. Revenue per visitor rose 19.2%, but neither number reached our 90% confidence bar.

The early weeks looked positive, then the results leveled out as more traffic came in. On desktop, the bar showed a 33.5% lift on traffic too low to tell a trend from noise.

Page length explains the split. On the first store, the main button disappeared fast, so bringing it back closed a real gap. On the second store, the main button was already easy to find, so keeping it in view added little. A sticky bar helps when the buy button scrolls away early.

This test is also why I want at least 2 full weeks of data. In week 1, it looked like another winner.

Sticky navigation on a mobile homepage moved conversion 3.6%

A desktop homepage test had just won with clearer category buttons, so we brought the idea to mobile. 1 version made the category menu sticky, so it stayed at the top as shoppers scrolled. Another made the hero button bolder.

Over 15 days, conversion moved 3.6% and revenue per visitor 1.3%, short of our confidence bar, and we paused the test. The bolder hero button was the version worth carrying forward. The sticky menu took space without changing behavior.

A menu is something shoppers use once, to pick a direction. After that, keeping it on screen mostly costs space. The add to cart button is different: shoppers need it at the end of every product page.

When to make something sticky

• Make the action sticky, not the menu. A buy button that scrolls away is worth bringing back. A menu shoppers used once usually is not.
• Check page length first. If the main button leaves the screen within a scroll or 2, test a sticky bar. If shoppers reach it easily, expect little.
• Keep the bar plain. A simple button beat a bar with the product name and rating.
• Show it only when needed. Bring the bar in once the main button leaves the screen, not before.
• Keep it short. A thin bar takes less of the screen. Check that it never hides a focused field.
• Read mobile and desktop on their own. Sticky bars are expected on mobile and less so on desktop.

For button wording, color and placement, see What makes an add to cart button convert? For menus, see Optimizing Website IA and Navigation for Conversion

Make the next step sticky, not the menu.

Frequently asked questions

Does a sticky add to cart button increase conversions?

It can on long mobile pages. In our test, a plain sticky add to cart bar lifted mobile conversion 7.0%. On a store where the button was already easy to find, the same bar moved conversion only 0.6%.

Is a sticky header good or bad on mobile?

It depends on what it holds. A sticky category menu on a mobile homepage took space without changing behavior in our test. A sticky buy button did better, because shoppers need it at the end of the page.

Should a sticky add to cart bar sit at the top or bottom?

Our winning bar appeared once the main button scrolled away. The bottom of the screen is easier to reach with a thumb on most phones. Test the position on your own pages.

Do sticky headers cause accessibility problems?

They can. WCAG 2.2 says a sticky header or footer must not fully hide an item that has keyboard focus. Use scroll padding so focused fields and links stay visible.

How tall should a sticky header be on mobile?

As short as it can be while still easy to tap. Every pixel it takes is gone from the content on every scroll. A plain bar beat a bar with extra detail in our test.