Fullscreen

The Fullscreen action hides Shopify UI and expands the application iframe to cover the entirety of the browser window. This gives applications the ability to implement complex workflows such as editing workflows, immersive experiences, or previews.

Guidelines

Anchor link to section titled "Guidelines"

Full-screen mode should only be launched after users interact with a button that indicates the entire canvas will be used.
When in full-screen mode, apps must display the FullscreenBar with a back button.
When exiting, the app should immediately return to the same screen where the user entered full-screen mode. If the user has unsaved changes, the app should display a dialog that prompts users to save their changes before exiting.

Refer to the design guidelines for full-screen mode for more information.

Setup

Anchor link to section titled "Setup"

Create an app and import the Fullscreen module from @shopify/app-bridge/actions. Note that we'll be referring to this sample application throughout the examples below.

Enter full screen

Anchor link to section titled "Enter full screen"

Put the app in full-screen mode with the ENTER action.

Exit full screen

Anchor link to section titled "Exit full screen"

Take the app out of full-screen mode with the EXIT action.

Anchor link to section titled "Subscribe to actions"

You can subscribe to actions that are dispatched through the full-screen action set,

Unsubscribe when the component is unloaded

Anchor link to section titled "Unsubscribe when the component is unloaded"

It's important to clean up subscriptions when the subscribed component is unmounted.