My age verification popup looks fine on desktop but breaks on mobile, how do I fix it?
Age verification popups often look fine on desktop and then break on phones, fail keyboard navigation, or forget shoppers already confirmed their age. Here's how to actually test for and fix each of those.
What's going on
A merchant selling age-restricted products, such as alcohol, vapes, CBD, or knives, installs an age verification popup and it looks fine on their own desktop screen, but a customer on mobile reports the modal is cut off, the date picker is unusable, or the popup reappears on every single page. Others run an accessibility check, or get a complaint, and find the gate traps no keyboard focus, has no visible focus state, or its confirm button has contrast too low to read against the background image behind it.
This comes up repeatedly in merchant discussions and comparison threads: when people shop for an age verification app, whether it's actually mobile responsive and whether it's accessible are recurring criteria people call out specifically, because a meaningful share of the popups on the market appear to have been designed and tested on desktop only. Since an age gate is usually the first thing a visitor sees, a broken one isn't just cosmetic; it can block checkout entirely or make the store look untrustworthy to a first-time buyer.
Compounding this, Shopify itself does not include a native, store-wide age verification feature. There's no built-in setting you toggle on to add one. A small number of themes include some basic form of age check, but most stores rely on a third-party app or custom theme code for this, which means the quality of the mobile layout, keyboard support, and persistence logic depends entirely on whichever app or developer built it, and that varies a lot between them.
Why it happens
Shopify has no native age-gate feature, so every age verification popup on the platform is either a third-party app injecting a modal, typically via a theme app embed or script, or custom code added directly to the theme. That means responsiveness and accessibility are only as good as that individual app's front-end code; there's no platform-level standard it's tested against.
Popups are frequently designed and tested against a desktop mockup with a plain background, so bugs that only appear with a real mobile on-screen keyboard open, a busy hero image behind a semi-transparent modal, or actual keyboard-only navigation get missed until a real customer or an audit hits them.
Persistence bugs, where the gate reappears constantly, usually trace back to how the app stores the already-verified flag, whether that's a session-only cookie, a cookie cleared by a separate cookie-consent app, or logic that doesn't account for browser tracking-prevention features, rather than the popup's visual design.
5 ways to fix it
Use a theme app embed, not a hard-coded template edit
Choose an age verification app that runs as a theme app embed (found in the theme editor's app embeds section) rather than one that requires pasting code into theme.liquid or a custom template. Embeds inherit your theme's breakpoints more reliably, survive theme updates without being overwritten, and typically expose an on/off toggle plus editable settings (colors, copy, logo, birth-year vs. yes/no mode) right in the theme editor instead of a separate app dashboard you have to context-switch to.
Test the gate at real breakpoints, not just a resized browser window
Open the store on an actual phone, or at minimum use device emulation with touch input rather than just narrowing a desktop browser window, and check three things: the modal isn't cut off above the fold on short viewports like an iPhone SE, date-of-birth inputs don't trigger a numeric keypad that hides the day/month/year labels, and tapping outside the modal or using the back button doesn't leave the store in a half-loaded state. Many age-gate bugs only appear once a real mobile keyboard is open, since that shrinks the visible viewport height in a way emulation doesn't always replicate.
Run a keyboard-only pass and check contrast against your real background
Tab through the gate using only the keyboard: focus should land on the first input or button automatically, Tab and Shift+Tab should cycle only within the modal, a visible way to close or dismiss it should be reachable without a mouse, and a screen reader should announce it as a dialog rather than staying silent. Then check the modal's text and button contrast with a contrast-checking tool against your theme's actual background image or color, not a plain mockup, since gates are often designed against a white background and only fail once placed over a busy hero image.
Confirm persistence is set correctly and survives cache and cookie settings
Verify that once a shopper confirms their age, the gate doesn't reappear on every page navigation within the same session; this is usually controlled by a cookie or local storage flag the app sets after confirmation. If it keeps reappearing, check whether your store's caching, a separate cookie-consent app, or browser tracking-prevention settings are clearing that flag prematurely, and confirm the app is set to remember the confirmation for a reasonable window rather than only the current page load.
Rule out theme conflicts before assuming the app itself is broken
If the popup looks fine in the app's own preview but breaks on your live store, duplicate your theme and disable other embeds and apps one at a time, such as cookie banners, sticky headers, or cart drawers, then reload the age gate to see if a styling conflict from another app is the real cause. A meaningful share of broken age-gate reports turn out to be a CSS or layering clash between apps rather than a flaw in the gate itself.
Bottom line
Shopify doesn't ship a built-in, store-wide age verification feature, so getting this right depends on choosing an app (or custom build) that's actually been tested on mobile devices and with a keyboard, not just described as responsive in its marketing copy. If you've cycled through a couple of age-gate apps and keep hitting the same mobile-layout, focus-trap, or persistence problems, a purpose-built age verification app, such as BesPoP's Age Gate, is a reasonable next step rather than continuing to patch a generic popup.
Browse the rest of the problem library, run a free storefront scan to catch issues like this automatically, or email us and we'll work out a custom solution for it.