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 modeAnchor 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:
- App body
When to use full-screen modeAnchor 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
TipApps can also enter full-screen mode when merchants follow deep links that include the
Shopify App Store requirementYour app can only launch full-screen mode from the app body.
MandatoryReturn merchants to the screen that they were previously on when they exit full-screen mode.
UnacceptableYour app must not launch full-screen mode from the app nav.
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.
FullscreenBarcomponent collapses into the Actions overflow menu when more than two actions are added.
MandatoryIn full-screen mode, display the
FullscreenBarcomponent with a back button.