Skip to main content
Back to Developer changelog

Tags:

  • Action Required
  • App Bridge

New CSS variable for mobile safe area insets

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.
  • If your app includes custom fixed-bottom elements, such as sticky footers or floating action buttons (FABs), incorporate this variable into your styles:
  .my-floating-button {
    bottom: calc(16px + var(--shopify-safe-area-inset-bottom, 0px));
  }

Who's 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 You Should Do

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

Was this section helpful?