--- title: Patterns api_name: app-home source_url: html: https://shopify.dev/docs/api/app-home/patterns md: https://shopify.dev/docs/api/app-home/patterns.md --- # Patterns ## Compositions [![Account connection](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/accountConnection-fq88OD33.png)![Account connection](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/accountConnection-fq88OD33.png)](https://shopify.dev/docs/api/app-home/patterns/compositions/account-connection) [Account connection](https://shopify.dev/docs/api/app-home/patterns/compositions/account-connection) [The account connection component is used so merchants can connect or disconnect their store to various accounts.](https://shopify.dev/docs/api/app-home/patterns/compositions/account-connection) [![App card](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/appCard-Gh6-_ylZ.png)![App card](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/appCard-Gh6-_ylZ.png)](https://shopify.dev/docs/api/app-home/patterns/compositions/app-card) [App card](https://shopify.dev/docs/api/app-home/patterns/compositions/app-card) [App cards provide a consistent layout for presenting another app to merchants.](https://shopify.dev/docs/api/app-home/patterns/compositions/app-card) [![Callout card](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/calloutCard-CnvB0_jX.png)![Callout card](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/calloutCard-CnvB0_jX.png)](https://shopify.dev/docs/api/app-home/patterns/compositions/callout-card) [Callout card](https://shopify.dev/docs/api/app-home/patterns/compositions/callout-card) [Callout cards are used to encourage merchants to take an action related to a new feature or opportunity.](https://shopify.dev/docs/api/app-home/patterns/compositions/callout-card) [![Empty state](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/emptyState-DjOI5bCw.png)![Empty state](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/emptyState-DjOI5bCw.png)](https://shopify.dev/docs/api/app-home/patterns/compositions/empty-state) [Empty state](https://shopify.dev/docs/api/app-home/patterns/compositions/empty-state) [Empty states are used when a list, table, or chart has no items or data to show.](https://shopify.dev/docs/api/app-home/patterns/compositions/empty-state) [![Footer help](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/footerHelp-CC7OJpSv.png)![Footer help](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/footerHelp-CC7OJpSv.png)](https://shopify.dev/docs/api/app-home/patterns/compositions/footer-help) [Footer help](https://shopify.dev/docs/api/app-home/patterns/compositions/footer-help) [Footer help is used to refer merchants to more information related to the product or feature they’re using.](https://shopify.dev/docs/api/app-home/patterns/compositions/footer-help) [![Index table](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/indexTable-ChEqwjyh.png)![Index table](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/indexTable-ChEqwjyh.png)](https://shopify.dev/docs/api/app-home/patterns/compositions/index-table) [Index table](https://shopify.dev/docs/api/app-home/patterns/compositions/index-table) [An index table displays a collection of objects of the same type, like orders or products.](https://shopify.dev/docs/api/app-home/patterns/compositions/index-table) [![Interstitial nav](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/interstitialNav-B0U4SeyX.png)![Interstitial nav](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/interstitialNav-B0U4SeyX.png)](https://shopify.dev/docs/api/app-home/patterns/compositions/interstitial-nav) [Interstitial nav](https://shopify.dev/docs/api/app-home/patterns/compositions/interstitial-nav) [Interstitial navigation is used to connect merchants to deeper pages—such as settings, features, or resources—within a section of your app.](https://shopify.dev/docs/api/app-home/patterns/compositions/interstitial-nav) [![Media card](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/mediaCard-mcNUs4Od.png)![Media card](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/mediaCard-mcNUs4Od.png)](https://shopify.dev/docs/api/app-home/patterns/compositions/media-card) [Media card](https://shopify.dev/docs/api/app-home/patterns/compositions/media-card) [Media cards provide a consistent layout to present visual information to merchants.](https://shopify.dev/docs/api/app-home/patterns/compositions/media-card) [![Metrics card](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/metricsCard-DE5fYzI8.png)![Metrics card](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/metricsCard-DE5fYzI8.png)](https://shopify.dev/docs/api/app-home/patterns/compositions/metrics-card) [Metrics card](https://shopify.dev/docs/api/app-home/patterns/compositions/metrics-card) [Metrics cards are used to highlight important numbers, statistics, or trends from your app, so merchants can quickly understand their activity and performance.](https://shopify.dev/docs/api/app-home/patterns/compositions/metrics-card) [![Resource list](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/resourceList-Cpk419GV.png)![Resource list](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/resourceList-Cpk419GV.png)](https://shopify.dev/docs/api/app-home/patterns/compositions/resource-list) [Resource list](https://shopify.dev/docs/api/app-home/patterns/compositions/resource-list) [A resource list displays a collection of objects of the same type, like products or customers.](https://shopify.dev/docs/api/app-home/patterns/compositions/resource-list) [![Setup guide](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/setupGuide-Dnf6rLx-.png)![Setup guide](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/setupGuide-Dnf6rLx-.png)](https://shopify.dev/docs/api/app-home/patterns/compositions/setup-guide) [Setup guide](https://shopify.dev/docs/api/app-home/patterns/compositions/setup-guide) [Setup guide provides an interactive checklist to guide merchants through essential onboarding or configuration tasks.](https://shopify.dev/docs/api/app-home/patterns/compositions/setup-guide) ## Templates [![Details](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/details-DE5wyX2J.png)![Details](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/details-DE5wyX2J.png)](https://shopify.dev/docs/api/app-home/patterns/templates/details) [Details](https://shopify.dev/docs/api/app-home/patterns/templates/details) [The details page allows merchants to view, create and edit objects.](https://shopify.dev/docs/api/app-home/patterns/templates/details) [![Homepage](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/homepage-ChqqEmaF.png)![Homepage](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/homepage-ChqqEmaF.png)](https://shopify.dev/docs/api/app-home/patterns/templates/homepage) [Homepage](https://shopify.dev/docs/api/app-home/patterns/templates/homepage) [The app URL specified in the Partner Dashboard should point to your app homepage.](https://shopify.dev/docs/api/app-home/patterns/templates/homepage) [![Index](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/index-BloCXL71.png)![Index](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/index-BloCXL71.png)](https://shopify.dev/docs/api/app-home/patterns/templates/index) [Index](https://shopify.dev/docs/api/app-home/patterns/templates/index) [The index layout lets merchants view and manage all their objects at once in a table format.](https://shopify.dev/docs/api/app-home/patterns/templates/index) [![Settings](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/settings-CEaS0R1v.png)![Settings](https://cdn.shopify.com/shopifycloud/shopify-dev/staging/assets/assets/images/templated-apis-screenshots/admin/patterns/settings-CEaS0R1v.png)](https://shopify.dev/docs/api/app-home/patterns/templates/settings) [Settings](https://shopify.dev/docs/api/app-home/patterns/templates/settings) [Make settings pages easy to scan by grouping related information in a logical order.](https://shopify.dev/docs/api/app-home/patterns/templates/settings)