Your website has its own header, footer and cookie banner. Inside an app with native tabs, they get in the way. You can hide them in the app only: your website stays exactly the same in a browser.
How it works
You give the app a list of CSS selectors. When a page loads, the app sets those elements to display: none. It does this on your app's domain and its subdomains, in the main frame only, and never in a normal browser. Nothing is removed from your site.
Hide an element
Find the selector
Open your site on a computer, right-click the element and choose Inspect. Look for an
id, aclassor a tag you can use.Add it to your project
In the Shell Designer, open the Website section and add the selector. You can list up to 10, of 200 characters each.
Launch a new build
The list is part of the app, so it takes effect with the next build.
Check it on a phone
Install the build and open each main page. The preview can't show this, as it loads your site from another address.
Selector examples
| To hide | Selector |
|---|---|
| The first header of the page | header |
| The footer | footer |
| An element by id | #cookie-banner |
| An element by class | .site-navbar |
| An element by attribute | [data-testid="navbar"] |
Prefer a stable name. No-code builders often generate classes such as .css-1x2y3z, which change the next time you publish, and the element comes back. If you can, add your own id or class to the element.
A selector can't contain {, }, <, ;, @ or /*. These are refused when you save.
Do it in your site's code instead
If you built your site with an AI builder, you can ask it to hide elements when the page runs in the app. This has no selector to maintain, and it works without a new build.
Prompt for Lovable, Bolt or Base44
My website also runs inside a mobile app. Detect it with:
const inApp = typeof window !== "undefined" && navigator.userAgent.includes("SaasToStoreApp");
When inApp is true, do not render [MY HEADER, MY FOOTER, MY COOKIE BANNER].
Everything must stay the same in a normal web browser.
Read inApp after the page has mounted, to avoid a hydration mismatch.Replace the values in [BRACKETS]. Test it in a browser first: nothing should change there.
When it doesn't apply
- Android Build (Web): it runs in Chrome, so there's no native layer and no
SaasToStoreAppmarker. Neither approach works there: switch to the Native build. - Full-screen apps: turning the native shell off also turns this list off.
- Other sites: a page from another domain is never changed.