--- title: Environment API description: >- The Environment API provides access to information about the platform your app is running on. Use it to detect whether the app is embedded in the Shopify admin, running on Shopify Mobile, or running on Shopify POS. api_version: v2.0 source_url: html: >- https://shopify.dev/docs/api/app-home/v2.0-rc/apis/authentication-and-data/environment-api md: >- https://shopify.dev/docs/api/app-home/v2.0-rc/apis/authentication-and-data/environment-api.md api_name: app-home --- # Environment API **Info:** App Bridge isn't versioned with Polaris. App Bridge APIs and web components are identical in every App Home reference version. The Environment API provides access to information about the platform your app is running on. Use it to detect whether the app is embedded in the Shopify admin, running on Shopify Mobile, or running on Shopify POS. ### Use cases * **Platform detection:** Determine whether your app is running on mobile, desktop, or POS. * **Responsive behavior:** Adapt UI layout and features based on the current environment. * **Embedded context:** Check whether the app is running in an embedded context within the Shopify admin. * **Device-specific features:** Enable or disable features based on device capabilities like camera access or printing. ### Safe area insets App Bridge automatically sets a CSS custom property, `--shopify-safe-area-inset-bottom`, on the document. This property provides the exact pixel value of host UI overlaying the bottom of your app, such as the Sidekick bar, or navigation controls on mobile. It applies wherever your app runs, including desktop and mobile web, and it defaults to `0px` when no overlay is present. App Bridge also automatically adds bottom padding to the `` element, so most apps work correctly without any changes. If your app uses custom fixed-bottom elements such as sticky footers or floating action buttons, use `var(--shopify-safe-area-inset-bottom, 0px)` to position them above the overlay. ### Properties The `environment` API is available on the `shopify` global. All properties are synchronous booleans. * **embedded** **boolean** Whether the app is embedded in the Shopify admin. * **intent** **boolean** Whether the app is running as an intent. * **mobile** **boolean** Whether the app is running inside the Shopify Mobile app. * **pos** **boolean** Whether the app is running inside the Shopify POS app. Examples ### Examples * #### ##### Description Read the environment object to see which platform your app is running on. Each property is a boolean that indicates whether a specific condition is true. ##### js ```js shopify.environment; // => { mobile: false, embedded: true, pos: false } ``` * #### ##### Description Check individual environment properties to adapt your app's behaviour to the current platform. In this example, your app shows a print button only on mobile devices where App Bridge handles printing through the native app. ##### js ```js const mobile = shopify.environment.mobile; if (mobile) { document.getElementById('print-button').style.display = 'block'; } else { document.getElementById('print-button').style.display = 'none'; } ``` * #### ##### Description App Bridge sets the \`--shopify-safe-area-inset-bottom\` CSS custom property to the height of host UI overlaying the bottom of your app, such as the Sidekick bar, or navigation controls on mobile. Use this variable to position fixed-bottom elements above it. It applies wherever your app runs, and defaults to \`0px\` when no overlay is present. ##### css ```css .my-floating-button { position: fixed; bottom: calc(16px + var(--shopify-safe-area-inset-bottom, 0px)); right: 16px; } ``` ***