App structure
Apps are structured to work seamlessly with the Shopify admin and to provide an intuitive experience for merchants.


- The Shopify admin
- App nav
- App header
- Page header
- Overflow menu
- App body
Apps consist of a few navigation elements and the app body, which is the center of your app’s experience.
App navigation is strictly configured, and it’s an important part of providing a great merchant experience. For more details, refer to the navigation guidelines.


The app body is where your app’s main experience lives.
Be sure to follow the layout guidelines when you choose a layout for the app body.
Full-screen mode
Anchor link to section titled "Full-screen mode"Full-screen mode is a focused environment for specific immersive tasks.
Full-screen mode utilizes the following areas of the app interface:
FullscreenBar
- App body


When to use full-screen mode
Anchor link to section titled "When to use full-screen mode"Use full-screen mode when merchants need to complete a focused task, where leveraging the app’s entire canvas improves the experience.
The following are some use cases for full-screen mode:
- Complex editing experiences, like an editor for creating newsletter content
- Immersive experiences, like an editor for cropping and modifying images
- Previews, like an app that adds elements to a product page and enables merchants to preview changes

Tip
Apps can also enter full-screen mode when merchants follow deep links that include thefullscreen=true
URL parameter.

Shopify App Store requirement
Your app can only launch full-screen mode from the app body.
Mandatory
Return merchants to the screen that they were previously on when they exit full-screen mode.
Unacceptable
Your app must not launch full-screen mode from the app nav.FullscreenBar
Anchor link to section titled "Fullscreen bar"
The Polaris FullscreenBar component enables merchants to exit a full-screen interface.
Return merchants to the same screen where they entered full-screen mode.
Info
The mobileFullscreenBar
component collapses into the Actions overflow menu when more than two actions are added.


Mandatory
In full-screen mode, display theFullscreenBar
component with a back button.

Mandatory
If there are unsaved changes, prompt merchants to save before exiting full-screen mode.