Patterns

The details page allows merchants to view, create and edit objects. Use the right column to provide editable fields, and the right column for supporting information such as status, metadata, and summaries. | Used to | Examples | | -------- | ------- | | View, edit and create objects | Discounts, shipping labels, newsletters, templates. | !Preview of the details page pattern This pattern uses Badge, Box, Button, Grid, Heading, Image, Link, MoneyField, NumberField, SearchField, Section, Select, Stack, Switch, Table, TextArea, TextField, UnorderedList, and URLField components. --- ## Design guidelines Design details pages that enable users to create, view, and edit resource objects. ### Navigation * Users must 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. * Use tabs sparingly for secondary navigation purposes when the nav menu isn't sufficient. * Clicking a tab should only change the content below it, not above. * Tabs should never wrap onto multiple lines. * Navigating between tabs shouldn't cause the tabs to change position or move. * Offer users clear and predictable action labels. --- ### Layout * Design your app to be responsive and adapt to different screen sizes and devices. This ensures a seamless user experience across various platforms. * Use looser spacing for low-density layouts. Use tighter spacing for high-density layouts. * Always use the default width. Full width tends to waste space and make the page harder to parse * In the primary column: Put information that defines the resource object * In the secondary column: Put supporting information such as status, metadata, and summaries * Arrange content in order of importance * Group similar content in the same card * Place unique page actions at the top of the actions list and typical object actions at the bottom --- ### Forms * For more than five inputs, use sections with titles in one card or use multiple cards with headers. * Form inputs should be saved using the App Bridge Contextual Save Bar API. This also applies to forms within max modals. Continuous data validation or auto-save for forms is consistent with the standard Shopify admin save UX. ---

The app URL specified in the Partner Dashboard should point to your app homepage. The home page of your app is the first thing merchants will see, and it should provide daily value to them. Design the page to provide status updates and show merchants what actions they can take. | Used to | Examples | | -------- | ------- | | Teach merchants how to use the app | Onboarding, how-to guides | | Display app functionalities | Call-to-actions to app features, resource tables | | Show updates | Status banners, company news | !Preview of the homepage pattern This pattern uses Badge, Banner, Box, Button, Checkbox, Clickable, Divider, Grid, Heading, Image, Link, Paragraph, Section, Stack, and Text components. --- ## Design guidelines Your app home page should be designed to provide users with relevant, timely information like quick statistics, status updates, or information that’s immediately actionable. ### Onboarding The onboarding experience quickly introduces users to your app's essential features. A good onboarding should be self-guided, easy to follow and make users feel they understand how the app works after finishing it. If the onboarding is long or complex, give users the option to complete it at a later time to avoid stopping their workflow. * Onboarding must be brief and direct. Provide clear instructions and guide users to completion * Only request information from users if it's necessary * If your onboarding isn't essential, then make it dismissible * Don't have more than five steps in your onboarding process. This can lead users to drop off and not use your app --- ### Visual design * Design your app to be responsive and adapt to different screen sizes and devices. This ensures a seamless user experience across various platforms. * Use looser spacing for low-density layouts. Use tighter spacing for high-density layouts. * Use high-resolution photos and images to ensure a professional, high-quality experience. ---

The index layout lets merchants view and manage all their objects at once in a table format. They can filter, sort and do quick actions on their objects. To prevent tables from becoming visually cluttered, reveal actions only when the row is hovered over or selected | Used to | Examples | | -------- | ------- | | View all objects at once | Products, orders, customers, discounts | | Perform bulk actions | Delete products, pause/activate campaigns | !Preview of the index pattern This pattern uses Badge, Box, Button, Clickable, Grid, Heading, Image, Link, Paragraph, Section, Stack, and Table components. --- ## Design guidelines Design your index page so users can organize and take action on resource objects. ### Navigation * Users must 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. * Offer users clear and predictable action labels. --- ### Layout * Design your app to be responsive and adapt to different screen sizes and devices. This ensures a seamless user experience across various platforms. * For resource index pages, use a full-width page. This is helpful when users are dealing with lists of data that have many columns. ---

Make settings pages easy to scan by grouping related information in a logical order. For complex or lengthy settings, organize content into distinct, themed sections that link to their own pages. | Used to | Examples | | -------- | ------- | | Find and change app settings | Membership settings, app appearance, set up theme blocks | !Preview of the settings pattern This pattern uses Box, Button, ChoiceList, Clickable, Divider, Grid, Heading, Icon, Paragraph, Section, Select, Stack, and TextField components. --- ## Design guidelines Design scannable settings pages with groups of related information placed in logical order. ### Navigation * Users must 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. * Offer users clear and predictable action labels. --- ### Visual design Design your app to be responsive and adapt to different screen sizes and devices. This ensures a seamless user experience across various platforms. * Use looser spacing for low-density layouts. Use tighter spacing for high-density layouts. * Use high-resolution photos and images to ensure a professional, high-quality experience. ---