Patterns

The account connection component is used so merchants can connect or disconnect their store to various accounts.

App cards provide a consistent layout for presenting another app to merchants.

Callout cards are used to encourage merchants to take an action related to a new feature or opportunity.

Empty states are used when a list, table, or chart has no items or data to show.

Footer help is used to refer merchants to more information related to the product or feature they’re using.

An index table displays a collection of objects of the same type, like orders or products.

Interstitial navigation is used to connect merchants to deeper pages—such as settings, features, or resources—within a section of your app.

Media cards provide a consistent layout to present visual information to merchants.

Metrics cards are used to highlight important numbers, statistics, or trends from your app, so merchants can quickly understand their activity and performance.

A resource list displays a collection of objects of the same type, like products or customers.

Setup guide provides an interactive checklist to guide merchants through essential onboarding or configuration tasks.

The details page allows merchants to view, create and edit objects.

The app URL specified in the Partner Dashboard should point to your app homepage.

The index layout lets merchants view and manage all their objects at once in a table format.

Make settings pages easy to scan by grouping related information in a logical order.