# Hide website elements inside the app

Source: https://saastostore.com/docs/hide-website-elements

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

1. **Find the selector** Open your site on a computer, right-click the element and choose **Inspect**. Look for an `id`, a `class` or a tag you can use.
2. **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.
3. **Launch a new build** The list is part of the app, so it takes effect with the next build.
4. **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"]` |

> **Warning:** 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**

```text
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 `SaasToStoreApp` marker. Neither approach works there: switch to the [Native build](https://saastostore.com/docs/build-types).
- **Full-screen apps:** turning the native shell off also turns this list off.
- **Other sites:** a page from another domain is never changed.

## Frequently asked questions

### Does this change my website?

No. Your site stays the same for everyone. The elements are only hidden inside the app.

### Can I hide the cookie banner in my app?

You can hide the element, but your legal duties stay the same. If you hide it, make sure consent is still handled, for example by a settings page or a banner adapted to the app.

### Why does the element show for a moment and then disappear?

That usually means your site adds the element after the page has loaded. The rule applies to new elements too, but a brief flash can happen on slow pages. Hiding it in your site's code avoids that.

### Can I style elements, not just hide them?

No. The app only hides elements. To change how something looks in the app, change your site and use the SaasToStoreApp marker to apply the style only there.