QAlaunch

Shopify cookie banner too big on mobile or covering the screen

A Shopify cookie banner that swamps a phone screen is usually styled for desktop, with long copy, generous padding and stacked buttons, or two banners are running at once (Shopify’s own plus a consent app). Keep one banner, shorten its text, use its built-in position options, and only then add a mobile media query to tighten spacing. The goal is a banner that leaves the product photo, price and Add to cart visible.

Opens your site in a real browser on desktop and phone. Free, about two minutes, no signup. Full report from $19.

What you'll see

On a phone the consent banner fills half the screen or more as soon as the store opens. It may sit on top of the sticky Add to cart bar or the checkout button, and on small phones the Accept button can be pushed below the visible area. Some visitors never see it at all because the banner only shows in certain regions, which makes reports from customers confusing.

Why it happens

1. The banner is styled for a large screen

Paragraph-length privacy text, wide padding and buttons stacked one above the other look fine on a laptop. On a phone the same box can take up most of the viewport before the shopper has seen a product.

2. It overlaps a sticky add to cart bar

Bottom-fixed banners and bottom-fixed buy buttons compete for the same strip of screen. Whichever has the higher stacking order covers the other, and it is often the banner that wins.

3. Two consent banners are switched on

Installing a consent app without turning off Shopify’s own cookie banner, or the reverse, stacks two banners. Each may also need its own tap to dismiss.

How to fix it

  1. Work out which banner you are using. Shopify’s own banner is managed under Settings > Customer privacy > Cookie banner; anything else comes from an app. If both are active, turn off the one you do not need.
  2. Use the banner’s built-in appearance options first: position, compact layout, or a smaller style if offered. These survive app and theme updates better than custom CSS.
  3. Cut the banner text to a sentence or two and link to your privacy policy for the detail instead of explaining everything inside the banner.
  4. If it is still too tall, add CSS inside a mobile media query (for example max-width: 767px) that reduces padding and font size and lets the buttons sit side by side.
  5. Check the banner’s Accept and Decline buttons on a 360px-wide screen and make sure neither is cut off or hidden behind the browser toolbar.
  6. If you use a sticky add to cart bar, confirm the bar is still usable while the banner is showing, or position the banner so they do not overlap.

How to check it's fixed

  • Open the store in a private window at 360px and 390px widths: the product image, price and Add to cart should still be visible with the banner showing.
  • Tap Accept and confirm the banner disappears in one tap, without scrolling first, and does not reappear on the next page.
  • If your banner is limited to certain regions, test from one of those regions, or use the app’s preview setting.

What a QAlaunch scan shows for this

  • Whether a cookie banner is present on the page.
  • Overlapping or hidden elements in the phone screenshot, such as a banner sitting over the main button.
  • Cramped tap targets and menus or buttons that do not fit at 390px wide.
  • The scan sees the banner only if it is shown to the scan’s location, so a region-limited banner may not appear in its screenshots.

See exactly what a full report contains in the sample report.

Frequently asked questions

Can I just hide the banner on mobile?

If you are legally required to ask for consent, hiding it on phones defeats the purpose, since phones are where most visits come from. Make it smaller rather than removing it, and check your obligations with whoever advises you on privacy.

Why do some customers never see the banner?

Shopify’s banner and most consent apps can be limited to visitors from certain regions. A shopper outside those regions, or a test from one, will not see it, which is expected behaviour.

Does a large banner affect Google?

Google’s guidance on intrusive interstitials says notices shown because of a legal obligation, such as cookie consent, are not treated as intrusive. A banner covering most of the page is still a poor first impression for shoppers.

Done for you · not automated

Rather have a QA engineer test it by hand?

If this is a site you're launching or handing to a client, I'll go through it by hand, including the Shopify-specific issues a scan can't reach, like logged-in flows.

$299one-time · 3 business days
  • Up to 10 key pages tested by hand, not a scan
  • Every flow a customer uses: forms, sign-up, checkout, booking
  • Real mobile and desktop browsers
  • A written report in plain language, with screenshots
  • A 15-minute call to walk you through it
  • 10 years of professional QA experience

Tell me about your site and I'll reply personally, usually the same day.

No payment now. I'll confirm scope and price first.

Related fixes

More for Shopify: all Shopify fixes · Shopify testing · Shopify mobile checkout bugs

Written by Waqas Ahmad, QA engineer with 10 years of professional testing experience. Last checked October 26, 2026.

Sources: Shopify Community: cookie banner too large on mobile · Shopify Community: cookie banner big size on mobile