Widget Not Visible on Mobile: Diagnosis and Fixes
Fix a beyondRegular widget that renders on desktop but disappears on mobile. Ordered checklist covering theme embed, container CSS, and script loading.
If the beyondRegular widget renders on desktop but not on mobile, the cause is almost always one of four things: the Shopify theme app embed is off for the mobile theme, the container div is hidden by responsive CSS, embed.js is blocked by a cookie or consent script, or the preset targets a device class that excludes mobile. Work through the causes in that order and the widget will return.
Cause 1: Shopify theme embed disabled on mobile theme
This is the most common cause. Merchants often duplicate a theme for a campaign, forget to toggle the app embed on the duplicate, then publish it. Open Shopify admin, go to Online Store, then Themes, click Customize on the live theme, open App embeds in the left sidebar, and confirm beyondRegular is toggled on. Save. Reload the storefront on a real phone, not desktop devtools, because Shopify serves cached theme assets per device class.
If you use a headless theme, the embed toggle does not apply. Add the script tag directly to your layout head: <script async src="https://www.itsbeyondregular.com/embed.js"></script>. Then confirm the div <div data-bn-preset="YOUR_PRESET_ID"></div> is inside the mobile layout, not gated behind a desktop-only Liquid block.
Cause 2: Container div hidden by responsive CSS
The widget mounts inside your div. If a parent has display: none at mobile breakpoints, the widget mounts but stays invisible. Open the site on your phone, then on desktop use Chrome DevTools, toggle device toolbar with Ctrl+Shift+M, pick iPhone 14, right-click the widget location, Inspect. Walk up the DOM tree and look for any ancestor with display: none, visibility: hidden, or height: 0 in the computed styles panel.
Common culprits are hidden-on-mobile utility classes from Tailwind (hidden md:block), Bootstrap (d-none d-md-block), or a theme section setting called Show on desktop only. Remove the class or flip the section setting. If the container itself has width: 0 or overflow clipping, set a min-height on the wrapper so the widget has room to expand as video assets load.
Cause 3: embed.js blocked by consent or ad-block
Consent Mode 2 setups, GTM tag blocking, and privacy apps like Klaro or Cookiebot can block third-party scripts until the user accepts cookies. Open the mobile browser, tap the address bar padlock, view site settings, and check for blocked scripts. In DevTools remote debugging (chrome://inspect from a paired Android), open the Network tab and filter for embed.js. If the request status is blocked or cancelled, the script never ran.
Fix by allowlisting www.itsbeyondregular.com in your consent tool. In Cookiebot, add the domain under Site settings, Domain group, Allowlist. In Klaro, add a service entry for beyondregular with required: true, or move the script to the functional consent bucket. Test again in an incognito tab so old consent state does not mask the fix.
Cause 4: Preset device targeting excludes mobile
Each preset in the beyondRegular dashboard has a Devices setting. If a teammate set it to Desktop only during a test, embed.js will refuse to mount on phones even though the div is present. Log in at itsbeyondregular.com, go to Presets, open the preset id that matches your data-bn-preset value, scroll to Display rules, and set Devices to All or Mobile + Desktop. Save.
While in the same panel, confirm the preset is Published, not Draft. A draft preset returns a 200 from the API but never renders on production traffic. If you use different presets per breakpoint, double check the div on the page matches the mobile preset id. A common mistake is copying a desktop-carousel preset id into a mobile-only page.
Fast diagnosis: three commands
On a phone connected to your Mac or PC over USB, open chrome://inspect (Android) or Safari, Develop, iPhone (iOS) and run these in the console on the storefront. document.querySelector('[data-bn-preset]') should return the div. If null, the container is missing on mobile. window.beyondRegular should be an object. If undefined, embed.js did not load. document.querySelector('[data-bn-preset]').getBoundingClientRect() should return a non-zero height. If height is 0, a parent CSS rule is collapsing it.
These three checks isolate the four causes above in under a minute. Report the failing one when you contact founders@itsbeyondregular.com and include the storefront URL plus preset id.
Common questions
Why does the widget work in Chrome mobile emulation but not on my real phone?
Emulation runs your desktop theme with a resized viewport. Real phones request Shopify's mobile-optimized cache, which can be a different theme file if you have theme redirects, a separate mobile theme app, or a headless storefront with a distinct mobile bundle. Check that the app embed is toggled on for the exact theme id that your phone loads. Find it by adding ?preview_theme_id=YOUR_ID or reading document.documentElement.dataset.themeId in the console on the phone. If the ids differ, edit the mobile theme, not the desktop one, in Online Store, Themes.
The widget shows briefly then disappears on mobile. What is going on?
That is usually a layout shift fight. Your theme or a lazy-loading library re-runs after embed.js mounts and sets display: none or removes the container. Open DevTools, Elements panel, right-click the container, Break on, subtree modifications. Reload. The debugger will pause on the script that removes it. Common offenders are AMP conversion scripts, LazySizes with a broken selector, and cookie banners that reset the DOM on consent. Fix the offending script, or move the beyondRegular div outside its parent so it is not re-rendered.
Can I force the floating bubble format to show on mobile only?
Yes. In the dashboard open the preset, set Format to Floating bubble, then under Display rules set Devices to Mobile. Publish. On the storefront keep the same one-line embed: <div data-bn-preset="PRESET_ID"></div>. The preset config decides where it renders, not the HTML. If you want it on every page, add the div once to your theme.liquid before </body>. If you want it only on product pages, add it to product.liquid or the matching section. The bubble anchors to the viewport corner set in Position, not to the div location.