App structure
Apps are structured to work seamlessly with the Shopify admin and to provide an intuitive experience for merchants.
Anchor to AnatomyAnatomy
Apps consist of a few navigation elements and the app body, which is the center of your app's experience. An app is made up of the following areas:
-
The Shopify admin
Where your app lives, alongside the merchant's other tools and workflows.
-
App nav
Lets merchants move between your app's pages, from the sidebar in the Shopify admin or the header in Shopify mobile.
-
App header
Holds the main structural pieces, such as the app icon, name, and actions.
-
Page header
Displays the current page's title and its primary and secondary actions.
-
Overflow menu
Reserved for support information, such as About this app and Support.
-
App body
Where your app's main experience lives, and where merchants spend most of their time.
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.
Anchor to App bodyApp body
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.
Anchor to App windowApp window
App window is a focused environment for specific immersive tasks.
The app window utilizes the following areas of the app interface:
-
App window header
A top bar that renders a primary and a secondary action.
-
App body
Where you add all the content for a full-screen experience.
Anchor to When to use app windowWhen to use app window
Use app window when merchants need to complete a focused task, where leveraging the full viewport improves the user experience.
The following are some example use cases:
- Complex editing experiences, such as an editor for creating newsletter content
- Immersive experiences, such as an editor for cropping and modifying images
- Previews, such as an app that adds elements to a product page and enables merchants to preview changes
Anchor to BehaviorBehavior
App window launches only after merchants interact with a button that indicates the entire canvas will be used.
Anchor to Admin UI extensionsAdmin UI extensions
Use admin UI extensions to integrate more deeply with the Shopify admin and create cohesive merchant workflows.
Choose from the following extensions:
-
A card that surfaces your app's data or functionality on a resource detail page.
-
A modal that lets merchants complete a task from the More actions menu.
-
A menu entry that sends merchants from the admin to a page in your app.
-
An action that operates on multiple items selected from an index page.
Additional admin extensions are available for more specific use cases.
Anchor to App attributionApp attribution
Shopify will badge all admin UI extensions with the app icon, name, and a link to your app URL.
Anchor to When to use admin blocksWhen to use admin blocks
Use admin block extensions to offer your app's functionality or data in the context of a resource detail page. Merchants have the option to add your app block to a page, and arrange it in the page layout.
App blocks can be embedded into Product, Order, or Customer detail pages using these targets.
Anchor to When to use admin actionsWhen to use admin actions
Use admin action extensions to offer merchants quick access to common actions that they might do with your app. Because apps can add an unlimited number of admin actions, use discrete actions for discrete purposes.
App actions can be targeted to these targets.
Anchor to When to use admin links and bulk actionsWhen to use admin links and bulk actions
If your content doesn't fit well within the format of the block or action, then use an admin link or bulk action instead. If an interaction is complex, such as one that requires more screen space, then routing merchants into your app is a better experience.
Examples include a multi-step process, a very long form with multiple dynamic sections, or a complex editor with several columns.
Anchor to Combining extensionsCombining extensions
Use app actions and blocks together to provide a more focused merchant experience.