App Bridge / New CSS variableAction Required

--shopify-safe-area-inset-bottom
A new variable that keeps fixed elements from being hidden by the mobile floating bottom bar

A new custom property for embedded apps running inside the Shopify mobile app that returns the height, in CSS pixels, of the overlay at the bottom of the screen (such as the floating bottom navigation bar). App Bridge sets it automatically, so you can lift fixed-position FABs and sticky footers above the bar. Applies from April 15, 2026.

On this page
  1. What's actually happening (a 30-second overview)
  2. How it works: the hiding problem the variable solves
  3. What works automatically vs. what you need to handle yourself
  4. How the variable's value behaves
  5. How to implement it (code example)
  6. Scope, effective date, and what to do
  7. 5 key points for developers
  8. 3 practical use cases
  9. A one-line summary for proposals

1What's actually happening

In the Shopify mobile app, host UI overlays such as the floating bottom navigation bar can appear at the bottom of the screen.
Elements that an embedded app fixes to the bottom of the screen get hidden behind this bar.
The new variable --shopify-safe-area-inset-bottom returns the height of that overlay (in CSS pixels), letting you lift fixed elements above the bar.

Before: fixed elements get hidden

A bottom-fixed FAB or sticky footer overlaps the native floating bar, so it can't be tapped or seen.

After: avoid it automatically with the variable

App Bridge sets the bar's height into the variable. In CSS, just calc() add it and your fixed elements sit above the bar.

2How it works: the hiding problem the variable solves

Without the variable The FAB is hidden behind the bar var() With the variable The FAB sits above the bar App Bridge sets it automatically No overlay → 0px Bar visible → the bar's height
What is a safe-area inset? : the padding you should reserve so content doesn't overlap the screen edges or system UI (here, the floating bottom bar).
This variable returns the exact pixel value of the host UI overlay is returned, so lifting fixed elements by that amount prevents overlap.

3What works automatically / What you need to handle yourself

Automatic

Bottom padding on <body>

This variable <body> automatically adds bottom padding to. Apps with content that normally scrolls, for the most part, even without any changes, work correctly without being hidden behind the floating bar.

Action required

Custom "bottom-fixed" elements

Such as sticky footers and floating action buttons (FABs),position:fixed/sticky your own elements placed at the bottom need you to incorporate the variable into your CSS yourself.

The check is simple: is there a fixed / sticky element at the bottom of the viewport? If not, no action is needed; if so, var(--shopify-safe-area-inset-bottom, 0px) add it.

4How the variable's value behaves

SituationValue of var(--shopify-safe-area-inset-bottom)
When there is no overlay 0px Default value
Mobile floating bottom bar is showing The bar's heightautomatically adjusted to (in CSS pixels)
Who sets it App Bridge sets it automatically (no extra JS implementation needed)
The only thing explicitly stated in the article is the bottom inset . Whether top and left/right inset variables exist, and the behavior on desktop / web embeds, is not documented. When using it, always add a fallback of , 0px .

5How to implement (code example)

For custom bottom-fixed elements, just add the variable to the existing bottom value. The implementation example shown in the article is as follows.

.my-floating-button { bottom: calc(16px + var(--shopify-safe-area-inset-bottom, 0px)); }
The second argument, 0px, is the fallback. Even in environments where the variable isn't defined (when the bar is hidden or on unsupported hosts), the conventional 16px still holds safely.

6Scope, effective date, and what to do

1

Affected apps

Apps that run on Shopify mobile and use fixed / sticky elements at the bottom of the viewport All embedded apps.

2

Effective date

Applies to all affected apps starting April 15, 2026 onward.

3

What to do

Most apps need no changes. Only if you have a custom bottom-fixed UI do you need to add the variable to your CSS.

On the changelog, this change is tagged as "Action Required" . Developers of apps with a bottom-fixed UI should check their apps before the effective date.

75 points engineers should know

CSS

1. No JS needed — CSS only

Because App Bridge sets the value automatically, all you do on the developer side is write var() in your CSS. No listener registration or height-measurement code is required.

0px height

2. The value is dynamic (0px ⇄ bar height)

It toggles between 0px and the bar height depending on whether the overlay is present, so you don't need your own branching with media queries or device detection.

3. <body> is auto-padded

Normal-flow content is <body> covered by the automatic padding applied to it.Only fixed / sticky elements need attention— that's how cleanly it can be isolated.

,0px

4. Always provide a fallback

So nothing breaks in environments without the variable, passing 0px as the second argument is the safe choice.calc(16px + var(--..., 0px)) Stick to this form consistently.

4/15

5. Enforced with a deadline (Action Required)

This change applies uniformly to all affected apps on April 15, 2026, and is treated as Action Required on the changelog.Apps with a bottom-fixed UI must check for overlap on a real device (Shopify mobile) before the deadline. For details, see the Environment API documentation in App Home.

83 use cases you can apply at work

USE CASE 1

Rescue the fixed "Save / Bulk action" button in embedded admin apps

Problem
In embedded apps for bulk inventory editing or other bulk operations, the bottom-fixed "Save" FAB gets hidden behind Shopify mobile's floating bar, so it can't be tapped from mobile or triggers mis-taps.
Solution
Change the FAB's bottom to calc(16px + var(--shopify-safe-area-inset-bottom, 0px)) to move it above the bar.
Result
Eliminates complaints about being unable to interact on mobile. The fix is a single line of CSS, so regression risk is low.
Technical notes
The scrolling content body is <body> saved by the automatic padding, so the fix can be limited to fixed elements only.
Total / Next
USE CASE 2

Mobile optimization for cart apps with a sticky "total bar"

Problem
The "total amount + Next" sticky bar pinned below the product list overlaps with the native floating bar, cutting off the amount and the CTA.
Solution
On the sticky footer's bottom(or padding-bottom), add the variable so it always sits above the bar.
Result
The amount and next action stay visible, preventing drop-off and lost interactions on mobile.
Technical notes
Because it defaults to 0px, the layout stays as before in environments without an overlay. No extra conditional logic is needed.
Shared CSS
USE CASE 3

Centralizing mobile spacing for vendors with multiple apps

Problem
You offer multiple embedded apps, each hardcoding its own bottom spacing. After the rollout date (4/15), there's a risk of display misalignment appearing across all of them at once.
Solution
Into the shared CSS utilities / design tokens, build in var(--shopify-safe-area-inset-bottom, 0px) and roll it out to every app at once.
Result
Avoids misalignment across all apps after the rollout date. Mobile support for fixed elements can be maintained in one place, cutting QA effort.
Technical notes
Always include a 0px fallback so nothing breaks in older environments or those without App Bridge.

9One-line summary for proposals

"For embedded apps in Shopify mobile, a new CSS variable that returns the height of the bottom overlay --shopify-safe-area-inset-bottom takes effect on 2026/4/15.
<body> is padded automatically, so most cases need no changes. Only bottom-fixed elements like FABs and sticky footers calc(... + var(--shopify-safe-area-inset-bottom, 0px)) need it added so they aren't hidden behind the floating bar."