Migrate FullscreenBar from Polaris React

Use s-app-window only for a dedicated workflow that needs an app-owned window. Keep ordinary routes in the embedded app page shell.

Anchor to Choose the destinationChoose the destination

Polaris React	Polaris web components	Migration type
`FullscreenBar`	`s-app-window` for a dedicated fullscreen workflow	App Bridge

Anchor to Map fullscreen workflow responsibilitiesMap fullscreen workflow responsibilities

Polaris React	Polaris web components	Migration notes
`children`	Complete workflow in `s-app-window`	Move the workflow, not only its header, into the app window.
Back or close action	App-window close command plus router state	Return to a defined embedded route and clean up temporary state.
`accessibilityLabel`	Visible window heading and labelled close action	Keep the workflow purpose and exit clear to assistive technology.

Anchor to Migrate the call siteMigrate the call site

Identify the host-level behavior currently implemented by FullscreenBar inside the iframe.
Move that behavior to the linked App Bridge component or API and connect it to the app router or workflow state.
Verify setup, updates, cleanup, and route transitions inside Shopify admin.
After verification, remove the FullscreenBar import and any Polaris-only state, wrappers, or helpers that no longer have a caller.

Anchor to Preserve these behaviorsPreserve these behaviors

Synchronization between the iframe route or workflow and Shopify admin.
Visibility, lifecycle cleanup, and callback outcomes.
Keyboard, focus, and navigation behavior as the host UI state changes.

Anchor to Test and remove Polaris ReactTest and remove Polaris React

Test the migrated FullscreenBar behavior inside Shopify admin. Verify initial setup, updates, route and browser navigation, callbacks, and cleanup when the owning route unmounts.

Don't remove @shopify/polaris while another component still imports it. Once all call sites are migrated, remove the package and its provider-level setup, then run the app's full test suite.

Anchor to Migration exampleMigration example

Migrating FullscreenBar

export function FullscreenBarMigrationExample() {

return (

<><s-app-window id="product-editor" src="/app/products/edit"></s-app-window></>

);

}

import {FullscreenBar, Text} from '@shopify/polaris';

export function FullscreenBarMigrationExample() {

return (

<FullscreenBar onBack={() => {}}><Text as="span">Edit product</Text></FullscreenBar>

);

}

Polaris web components

export function FullscreenBarMigrationExample() {
  return (
    <><s-app-window id="product-editor" src="/app/products/edit"></s-app-window></>
  );
}

Polaris React

import {FullscreenBar, Text} from '@shopify/polaris';


export function FullscreenBarMigrationExample() {

  return (
    <FullscreenBar onBack={() => {}}><Text as="span">Edit product</Text></FullscreenBar>
  );
}

s-app-window renders in the Shopify admin host, so it can't be shown in this isolated live-preview environment. Test the workflow from your embedded app and verify that the app-owned src route opens, closes, and restores the expected route state.

Was this page helpful?