--- title: New CSS variable for mobile safe area insets - Shopify developer changelog description: >- Shopify’s developer changelog documents all changes to Shopify’s platform. Find the latest news and learn about new platform opportunities. source_url: html: >- https://shopify.dev/changelog/posts/new-css-variable-for-mobile-safe-area-insets md: >- https://shopify.dev/changelog/posts/new-css-variable-for-mobile-safe-area-insets.md metadata: effectiveApiVersion: '' affectedApi: - displayName: App Bridge handle: app-bridge primaryTag: displayName: API handle: api secondaryTag: displayName: New handle: new indicatesActionRequired: true createdAt: '2026-04-09T09:50:39-04:00' postedAt: '2026-04-13T15:00:00-04:00' updatedAt: '2026-04-13T14:22:20-04:00' effectiveAt: '2026-04-15T12:00:00-04:00' --- April 13, 2026 # New CSS variable for mobile safe area insets DateApril 13, 2026 FlagsNew[Action required](https://shopify.dev/changelog?action_required=true) SurfacesAPI Affected APIs[App Bridge](https://shopify.dev/changelog?api_type=app-bridge) ## 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 ``, 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: ```css .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 *