Skip to main content

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.

Anchor to GuidelinesGuidelines

  • 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.

Anchor to SetupSetup

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.

Note

In the following example, config is a valid App Bridge configuration object. Learn more about configuring App Bridge.

import {useAppBridge} from '@shopify/app-bridge-react';
import {Fullscreen} from '@shopify/app-bridge/actions';

const app = useAppBridge();
const fullscreen = Fullscreen.create(app);

Anchor to Enter full screenEnter full screen

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

// Call the `ENTER` action to put the app in full-screen mode
fullscreen.dispatch(Fullscreen.Action.ENTER);

Anchor to Exit full screenExit full screen

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

// Call the `EXIT` action to take the app out of full-screen mode
fullscreen.dispatch(Fullscreen.Action.EXIT);

Anchor to Subscribe to actionsSubscribe to actions

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

const unsubscribeEnter = fullscreen.subscribe(Fullscreen.Action.ENTER, () => {
// Do something when fullscreen is entered
});

const unsubscribeExit = fullscreen.subscribe(Fullscreen.Action.EXIT, () => {
// Do something when fullscreen is exited
});

Anchor to Unsubscribe when the component is unloadedUnsubscribe when the component is unloaded

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

useEffect(() => {
return () => {
unsubscribeEnter();
unsubscribeExit();
}
}, []);
Was this page helpful?