Responsive layout grid
Anchor link to section titled "Responsive layout grid"The Polaris Layout component provides built-in responsiveness. The following breakpoints are applied in the Shopify admin. Take these into into consideration when you build your app.
| Breakpoint | Minimum viewport size | Maximum viewport size |
|---|---|---|
| xs | 0 | 489px |
| sm | 490px | 767px |
| md | 768px | 1039px |
| lg | 1040px | 1399px |
| xl | 1440px | ∞ |
Must Do
Design your app to be responsive and adapt to different screen sizes and devices. This ensures a seamless user experience across various platforms.
App body width
App body widthThe following table shows recommended sizes for the app body width.
The Polaris Page component is an easy way to align the app body with the rest of the Shopify admin and make it simpler to update layouts over time.
| Breakpoint | Default app body width | Behavior |
|---|---|---|
| xs | 0 – 489px | Flexible, always full width |
| sm | 442px – 719px | Flexible, always full width |
| md | 480px – 751px | Flexible, always full width |
| lg | 752px – 950px | Flexible, then fixed width at 998px |
| xl | 950px fixed | Fixed width |
Layout options
Anchor link to section titled "Layout options"The Polaris Layout component offers various layouts to match the complexity of your app.
Single-column layout
Anchor link to section titled "Single-column layout"The single-column layout enables merchants to scan content from top-to-bottom and focus on a single, obvious task.
Most often, an app’s homepage uses the single-column layout in a default-width page. However, if your app feels more like a dashboard, then you can also use the two-column equal width or three-column layout.
Must Do Updated
For resource index pages, use a full-width page. This is helpful when merchants are dealing with lists of data that have many columns.Two-column layout
Anchor link to section titled "Two-column layout"Two-column layouts allow merchants to view more content at once. This is helpful for visual editors or content-dense pages.
Must Do Updated
For visual editors, use a two-column layout. This allows merchants to preview the outcome of their edits in real-time.Settings layout
Anchor link to section titled "Settings layout"The settings layout lets merchants quickly scan and find groups of settings that are related to each other.
Must Do Updated
For settings pages, use the app settings layout to provide merchants with clear context about your app's configuration options.Spacing helps your app maintain a pleasant experience by keeping interface components well-positioned with consistent visual rhythm.
For more information on spacing, visit the Polaris spacing guidelines.
The 4px spacing grid
The Shopify admin is built on a 4px spacing grid. Following this grid is a great way to offer a seamless app experience. You can use Polaris spacing tokens to achieve this.
Information density
Anchor link to section titled "Information density"The density of elements in a layout can greatly impact your app’s readability and usability.
Make your app efficient and easy to use by providing the right density at the right moment, for the right task.
Must Do
Use looser spacing for low-density layouts. Use tighter spacing for high-density layouts.
Do Not
Don't change information density within a single page, otherwise your app can feel disjointed.Containers
Anchor link to section titled "Containers"Most of an app’s content exists in containers. Containers compartmentalize content and create a natural hierarchy between parts of an interface.
Do Not
Don't place paragraphs of text directly on the background. This reduces legibility and makes scanning the page difficult for merchants.Using cards
Anchor link to section titled "Using cards"Cards structure your app’s content so that merchants can scan information easily. Cards act as containers and can be static or interactive.
The Polaris Card component provides an easy way to segment content, while still respecting Shopify’s App Design Guidelines.
Must Do Updated
Make the majority of your app’s content live in a container, such as a card. This creates visual structure and rhythm that helps merchants find information quickly. Complex components or images aren’t necessarily required to be in a container.
Must Do
Cards that offer interactivity, such as calls to action (CTAs) and buttons, should have at most one primary styled action.Using tables
Anchor link to section titled "Using tables"Tables are helpful for summarizing many object instances. Use the Polaris Data table component for relatively simple summaries, and the Index table when you have a lot of data to show.
Refer also to the Polaris Pattern for Resource index layout, when you are summarizing resource objects.
