Consent Banners That Block the Add-to-Cart Button on Mobile
A full-screen consent banner on a 360 pixel viewport covers the buy button. The visitor cannot consent or buy, and the store loses both.
A shopper opens a store on her phone. A consent banner fills the bottom half of the screen, covering the add-to-cart button and the price. She cannot see the button, she cannot tap it, and the banner gives her no way to dismiss it without choosing. She leaves, and the store records a bounce, not a consent failure, because nothing in the analytics connects the two.
This is a consent banner doing the opposite of its job. It was built to get a lawful choice from the visitor, and instead it prevents the visitor from doing the thing she came to do. The banner is not a legal problem here. It is a design problem with a legal excuse.
How a banner becomes a wall
On a desktop, a banner is a strip at the bottom of a large screen, and the content behind it is still reachable. On a 360 pixel wide phone, the same banner is a wall. The accept and reject buttons stack vertically, the text takes three screens to scroll, and the add-to-cart button sits underneath it, unclickable. The visitor has two options, scroll the banner or leave, and most leave.
The European Data Protection Board has been clear that a consent interface must not use deceptive design patterns, and a banner that blocks the primary action of the page is a pattern that pushes the visitor toward the choice that makes the banner go away. That is not a freely given choice, whatever the button labels say.
The test that finds it
Load the store on a real phone, not a desktop browser narrowed to a mobile width, and try to buy the cheapest product without touching the banner. If the add-to-cart button is covered, the banner fails. Then try it with the banner dismissed, and check that the page does not jump or reflow in a way that moves the button under the visitor's thumb.
Check the reject path too. A banner that offers accept in one tap and reject behind a settings panel is a dark pattern, and regulators have fined for it. The reject button should be as visible and as easy as the accept button, on the same layer, in the same size.
A banner that fits the screen it is on
The fix is a banner designed for the viewport it appears on. On mobile, that means a compact bar with the essential choice, accept or reject, and a link to the full settings, not the full text of the policy. The banner should never cover the primary action of the page, and it should never require scrolling to reach the choice.
Test the banner on the smallest viewport the store supports, and on the largest, after every theme change. Consent banners are usually installed once and forgotten, and a theme update that changes the page layout can turn a banner that once fit into a wall. The check takes two minutes. The bounce it prevents is worth more.
Related reading: Global Privacy Control: Is Your Banner Listening to the Signal?, Your Banner Speaks One Language. Your Shoppers Read Five., Consent Banners on a One Page Checkout: No Second Screen to Fix a Bad Choice.
Frequently asked questions
Can a consent banner block the buy button on mobile?
It should not. On a 360 pixel viewport a full-screen banner can cover the add-to-cart button entirely, leaving the visitor unable to buy or to dismiss the banner without choosing. Load the store on a real phone and try to buy without touching the banner to find out.
Is a banner that pushes accept a legal problem?
It can be. The EDPB has said consent interfaces must not use deceptive design patterns, and a banner that blocks the primary action of the page pushes the visitor toward the choice that makes the banner disappear, which is not a freely given choice.
Should reject be as easy as accept?
Yes. The reject button should be as visible and as easy as accept, on the same layer and in the same size. Hiding reject behind a settings panel while accept is one tap is a dark pattern regulators have fined for.
How do I test a consent banner on mobile?
Use a real phone, not a narrowed desktop browser. Try to buy the cheapest product without touching the banner, then check the reject path and confirm the page does not jump or reflow when the banner is dismissed.