---
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://shopify.dev/images/templated-apis-screenshots/admin/patterns/accountConnection.png)![Account connection](https://shopify.dev/images/templated-apis-screenshots/admin/patterns/accountConnection.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://shopify.dev/images/templated-apis-screenshots/admin/patterns/appCard.png)![App card](https://shopify.dev/images/templated-apis-screenshots/admin/patterns/appCard.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://shopify.dev/images/templated-apis-screenshots/admin/patterns/calloutCard.png)![Callout card](https://shopify.dev/images/templated-apis-screenshots/admin/patterns/calloutCard.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://shopify.dev/images/templated-apis-screenshots/admin/patterns/emptyState.png)![Empty state](https://shopify.dev/images/templated-apis-screenshots/admin/patterns/emptyState.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://shopify.dev/images/templated-apis-screenshots/admin/patterns/footerHelp.png)![Footer help](https://shopify.dev/images/templated-apis-screenshots/admin/patterns/footerHelp.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://shopify.dev/images/templated-apis-screenshots/admin/patterns/indexTable.png)![Index table](https://shopify.dev/images/templated-apis-screenshots/admin/patterns/indexTable.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://shopify.dev/images/templated-apis-screenshots/admin/patterns/interstitialNav.png)![Interstitial nav](https://shopify.dev/images/templated-apis-screenshots/admin/patterns/interstitialNav.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://shopify.dev/images/templated-apis-screenshots/admin/patterns/mediaCard.png)![Media card](https://shopify.dev/images/templated-apis-screenshots/admin/patterns/mediaCard.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://shopify.dev/images/templated-apis-screenshots/admin/patterns/metricsCard.png)![Metrics card](https://shopify.dev/images/templated-apis-screenshots/admin/patterns/metricsCard.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://shopify.dev/images/templated-apis-screenshots/admin/patterns/resourceList.png)![Resource list](https://shopify.dev/images/templated-apis-screenshots/admin/patterns/resourceList.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://shopify.dev/images/templated-apis-screenshots/admin/patterns/setupGuide.png)![Setup guide](https://shopify.dev/images/templated-apis-screenshots/admin/patterns/setupGuide.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://shopify.dev/images/templated-apis-screenshots/admin/patterns/details.png)![Details](https://shopify.dev/images/templated-apis-screenshots/admin/patterns/details.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://shopify.dev/images/templated-apis-screenshots/admin/patterns/homepage.png)![Homepage](https://shopify.dev/images/templated-apis-screenshots/admin/patterns/homepage.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://shopify.dev/images/templated-apis-screenshots/admin/patterns/index.png)![Index](https://shopify.dev/images/templated-apis-screenshots/admin/patterns/index.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://shopify.dev/images/templated-apis-screenshots/admin/patterns/settings.png)![Settings](https://shopify.dev/images/templated-apis-screenshots/admin/patterns/settings.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)