Environment API
App Bridge isn't versioned with Polaris. App Bridge APIs and web components are identical in every App Home reference version.
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.
Anchor to Use casesUse 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.
Anchor to Safe area insetsSafe 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 Shopify Mobile's floating bottom navigation bar or a control the Shopify admin floats over the bottom of the viewport. 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 <body> 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.
Anchor to PropertiesProperties
The environment API is available on the shopify global. All properties are synchronous booleans.
- Anchor to embeddedembeddedembeddedbooleanboolean
Whether the app is embedded in the Shopify admin.
- Anchor to intentintentintentbooleanboolean
Whether the app is running as an intent.
- Anchor to mobilemobilemobilebooleanboolean
Whether the app is running inside the Shopify Mobile app.
- Anchor to posposposbooleanboolean
Whether the app is running inside the Shopify POS app.
js
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
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
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 Shopify Mobile's floating bottom navigation bar. 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
.my-floating-button { position: fixed; bottom: calc(16px + var(--shopify-safe-area-inset-bottom, 0px)); right: 16px; }