Navigation is how merchants move from task to task. A good navigation structure enables merchants to complete tasks easily and without friction. Build your app’s navigation around what merchants need to do.

Navigation elements display in the following areas:

  1. App nav
  2. App header
  3. Page header
A diagram of the Shopify admin with numbered indicators for the app nav (1), the app header (2), and the page header (3). A diagram of the Shopify admin with numbered indicators for the app nav (1), the app header (2), and the page header (3).
Switch to desktop view
Switch to mobile view

Navigation is important

All apps need navigation to be clear and usable. Failure to follow our navigation guidelines could result in rejection during the app review process.

Information architecture (IA) is the practice of organizing sections so that they make sense as a whole.

IA shows merchants where they currently are, and how to navigate the rest of the app. It should be obvious what previously happened and what will happen next.

Rely on the relationship between the app nav and app body components to guide merchants where they need to go.

Use the fewest possible categories to define what your app does.

A diagram showing app pages that are linked together to form a cohesive information architecture.
The title of a page called ‘Create template’ with a breadcrumb before it called ‘Template’.

Mandatory

Merchants should be able to return to the previous page without using the browser button. To achieve this, your app can provide breadcrumbs or a Back button on the page.
A menu with the terms ‘photos, visuals, illustrations, graphics, templates, patterns’ reduced to only two terms, ‘images’ and ‘templates’.

Unacceptable

Don’t use an excessive number of pages and interactions. Anything above six pages is hidden under a View More section.
A dialog card containing a button with the label ‘View free images’ with an icon indicating that it sends the user to an external page when clicked.

Unacceptable

Don’t send merchants outside of the Shopify admin for key actions or during primary workflows. This can be a frustrating experience.
Each app comes with its own homepage. This page is the first section seen by merchants and is the default view when your app’s name is selected in the Shopify admin.
An app’s homepage with the app’s name highlighted in the app nav. An app’s homepage with the app’s name highlighted in the app nav.
Switch to desktop view
Switch to mobile view

Mandatory

Label the landing page, or homepage, of your app in the side navigation. Make the label the app’s name.

The app nav gives merchants a way to move between pages of your app.

The app nav is located in the sidebar in the Shopify admin and in the header in Shopify mobile.

The app nav with a code block that showcases the App Bridge NavigationMenu component.

Mandatory

If your app has different sections, then use App Bridge’s NavigationMenu component to integrate the sections with navigation in the Shopify admin and Shopify mobile.
An app nav with short items like ‘templates’, ‘images’, and ‘examples’.

Mandatory

Make navigation items short and scannable. Use nouns instead of verbs to keep the navigation menu concise.
An app nav that has so many items that they get truncated into a section called ’View more’.

Caution

Shopify recommends a maximum of six pages in the NavigationMenu component. The rest will be truncated and more difficult for merchants to access.
A card in the app body where links to other pages of an app are available.

Unacceptable

Don’t replicate the app nav content in the app body. It creates unnecessary repetition and makes navigation confusing.
Buttons being used as navigation links in the page header.

Unacceptable

Don’t place the main navigation in the page header. This can mislead merchants. The page header is reserved for in-page actions.

The app name represents a way for merchants to identify your app across multiple touchpoints in the Shopify admin.

The app name can be shorter than the Shopify App Store listing, so that it fits into the app nav.


Info

To change your app name, navigate to App setup in the Partner Dashboard.
The app name, showing as ‘Puzzlify’, entirely visible.

Mandatory

Keep app names short, with no more than 20 characters. Anything beyond 20 characters is truncated and might be confusing for merchants.
The app name, showing as ‘Puzzlify, an easy to use jigsaw puzzle app’, but with the latter half of the name truncated by an ellipsis and unreadable by the merchant.

Unacceptable

Don’t put a description in the app name. Put the description in the Shopify App Store listing instead.

Submit a navigation icon that displays in the app nav. The navigation icon is gray when it’s inactive and green when it’s active.

To learn more about designing your navigation icon, refer to the visual design guidelines.


Info

To change your navigation icon, navigate to App setup > Embedded app in the Partner Dashboard.
The Puzzlify app icon, in the shape of a jigsaw puzzle piece, being shown on white and gray backgrounds, in an active and default interactive state.

The app header contains main structural pieces for your app. It’s the header that merchants will interact with throughout the entire app experience.

The app header contains the following elements:

  1. App icon and name
  2. Pinning icon
  3. Overflow menu
The app header, the topmost part of an app where the app icon and app name (1), pinning icon (2), and overflow menu (3) display. The app header, the topmost part of an app where the app icon and app name (1), pinning icon (2), and overflow menu (3) display.
Switch to desktop view
Switch to mobile view

The overflow menu is reserved for additional support information about your app.

The overflow menu includes the following content:

  • About this app
  • Support

At this time, the overflow menu isn’t customizable.


Info

On mobile, the option to pin the app is collapsed into the overflow menu.
The app header, focusing on the overflow menu, with a visible selection box with the following links: ‘About this app’ and ‘Support’. The app header, focusing on the overflow menu, with a visible selection box with the following links: ‘About this app’ and ‘Support’.
Switch to desktop view
Switch to mobile view

The page header contains titles and actions for a specific page.

The page header should, at the very least, contain the page’s title. You can optionally add more elements, like buttons.

The page header with a code block showcasing the App Bridge TitleBar component.

Tip

Use App Bridge’s TitleBar component to integrate with the Shopify admin’s navigation. This helps your app stay within recommended guidelines.

The page title should be short and describe the general purpose of the page.

Try to limit each page to a single purpose. Merchants prefer focusing their attention on specific tasks, and splitting their attention might damage the user experience.

The page header with the current page title, ‘Templates’, in focus. The page header with the current page title, ‘Templates’, in focus.
Switch to desktop view
Switch to mobile view

The primary and secondary buttons in the TitleBar component initiate a page-specific action.

Primary and secondary button labels should have the following attributes:

  • Clarity and predictability: Merchants should be able to anticipate what will happen when they click a page action.
  • Action led: Button labels should always lead with a strong verb that encourages action. To provide enough context for merchants, use a {verb}+{noun} format.

If you need more than one secondary action, show them all in a More actions secondary dropdown.

The page header with a primary button labeled ‘New template’ and a secondary button labeled ‘Export templates’ in focus. The page header with a primary button labeled ‘New template’ and a secondary button labeled ‘Export templates’ in focus.
Switch to desktop view
Switch to mobile view
A primary button labeled ‘New template’ and a secondary button labeled ‘Export templates’.

Mandatory

Offer merchants clear and predictable action labels.
A primary button labeled ‘Upload image’ and a secondary button labeled ‘Export images’, and a third button with a downwards-pointing caret labeled ‘More actions’.

Caution

Include only one primary and one secondary action in the TitleBar component. If more than one secondary action is present, then the additional actions get truncated into an action menu.
A primary button labeled ‘Upload image’ and a secondary button labeled ‘Export images for free’.

Unacceptable

Don’t deceive merchants by mislabeling an action.