New CSS variable for mobile safe area insets
Shopify developer change
MerchantDiff detected this entry in Shopify's official developer changelog on April 13, 2026.
This Shopify update is categorized as Action Required, API, New, App Bridge.
What changed
New CSS Variable for Mobile Safe Area Insets A new CSS custom property, --shopify-safe-area-inset-bottom, is now available for embedded apps running on Shopify Mobile. This property provides the exact pixel value of host UI overlays, such as the floating bottom navigation bar, to prevent apps from placing fixed-position content over these overlays. The var(--shopify-safe-area-inset-bottom) is automatically set by App Bridge. It defaults to 0px when no overlay is present, and adjusts to the height of the overlay in CSS pixels when the mobile floating bottom bar is active. This variable automatically adds bottom padding to the <body>, ensuring most apps function correctly without content being obscured by the floating bar.
Who is affected
All embedded apps running on Shopify Mobile that utilize fixed or sticky elements at the bottom of the viewport. When the Changes Take Effect These changes will be implemented for all affected apps on April 15th, 2026.
What action may be needed
For most apps, no action is required as bottom padding is automatically applied. However, if your app has custom fixed-bottom UI elements, use var(--shopify-safe-area-inset-bottom, 0px) in your CSS to ensure these elements are positioned above the native floating bottom bar. References https://shopify.dev/docs/api/app-home/apis/authentication-and-data/environment-api
Use the official Shopify entry below as the source of truth for technical implementation details, affected APIs, migration instructions and deadlines.
Want the actionable version?
MerchantDiff monitors Shopify API changes, deprecations, deadlines and ecosystem updates, then turns them into developer-focused release intelligence: what changed, who is affected and what action may be needed.
Get MerchantDiff →