--- 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_name: app-home source_url: html: >- https://shopify.dev/docs/api/app-home/apis/authentication-and-data/environment-api md: >- https://shopify.dev/docs/api/app-home/apis/authentication-and-data/environment-api.md --- # Environment API 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 on mobile On Shopify Mobile, 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 overlays such as the floating bottom navigation bar. 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 native floating bottom bar. ### 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 On Shopify Mobile, App Bridge sets the \`--shopify-safe-area-inset-bottom\` CSS custom property to the height of host UI overlays such as the floating bottom navigation bar. Use this variable to position fixed-bottom elements above the bar. It 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; } ``` ***