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.

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 insets on mobileSafe 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 <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 native floating bottom bar.

Anchor to PropertiesProperties

The environment API is available on the shopify global. All properties are synchronous booleans.

Anchor to embedded embedded boolean: Whether the app is embedded in the Shopify admin.
Anchor to intent intent boolean: Whether the app is running as an intent.
Anchor to mobile mobile boolean: Whether the app is running inside the Shopify Mobile app.
Anchor to pos pos boolean: Whether the app is running inside the Shopify POS app.

Examples

js

shopify.environment;

// => { mobile: false, embedded: true, pos: false }

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
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
```
.my-floating-button {
  position: fixed;
  bottom: calc(16px + var(--shopify-safe-area-inset-bottom, 0px));
  right: 16px;
}
```

Was this page helpful?