Patterns
Most apps include common pages like landing and settings pages, which appear in the App Home iframe. There are two types of patterns you should used to build those pages:
- Templates: Full page patterns for common Shopify app pages.
- Compositions: Smaller groupings of web components and APIs that solve specific tasks in your pages.
Each of the patterns below combines web components and APIs into performant layouts that most apps need while satisfying Built for Shopify requirements out of the box.
Anchor to TemplatesTemplates
Templates are full-page layouts for paths and functionality found in most Shopify apps. Use one as your starting point so your app feels familiar in Shopify admin and meets merchant expectations for navigation, spacing, and interaction.
Homepage
The primary landing page for your app, providing quick access to key information and actions.
Index
Most apps need a way for merchants to manage collections of resources, and perform actions on them.
Details
From the index, edit and view individual resources within an efficient dual-column layout.
Settings
All apps will have settings merchants will want to configure to control your app's behavior.
Anchor to CompositionsCompositions
Compositions solve specific interface challenges like displaying data tables, showing empty states, or guiding merchants through setup. A page of your app (as seen in the templates above) will often be composed of many of these kinds of common compositions.
Combinations of web components and APIs are provided here as compositions so that you can quickly add functionality without reinventing useful patterns.
Account connection
Enable merchants to connect or disconnect their store from external accounts or services.
App card
Introduce and promote relevant apps to merchants within your app experience.
Callout card
Encourage merchants to take action on new features or opportunities.
Empty state
Provide guidance and encourage action when no data or items are available.
Footer help
Refer merchants to more information related to the product or feature they're using.
Index table
Display and manage collections of items with search, filtering, sorting, and bulk actions.
Interstitial nav
Provide deeper navigation by linking merchants to related pages within a section.
Media card
Present visual information alongside actionable, educational content.
Metrics card
Display key metrics, statistics, or trends at a glance.
Resource list
Display a collection of objects of the same type, like products or customers.
Setup guide
Guide merchants through onboarding and setup with interactive checklists and progress tracking.