--- title: Layout description: Layout design is the process of arranging visual elements such as text, images, and shapes on a page. source_url: html: https://shopify.dev/docs/apps/design/layout md: https://shopify.dev/docs/apps/design/layout.md --- # Layout Layout design is the process of arranging visual elements such as text, images, and shapes on a page. Apps have a variety of available layouts. These layouts adapt the app body content to every screen size and device type. Selecting the proper layout for the task at hand will benefit your app's merchant experience. ![The responsive layout grid.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/app-design-guidelines/layout/responsive-layout-grid-DBzut9ft.png) ## Responsive grid layout The Polaris [Page](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/page) component provides built-in responsiveness for the aside slot. The Polaris [Grid](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/grid) component allows to more bespoke responsive handling. Take these into into consideration when you build your app. ![A responsive app on a desktop and mobile device.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/app-design-guidelines/layout/responsive-layout-grid-mobile-Cg0zqq5S.png) Design your app to be responsive and adapt to different screen sizes and devices. This ensures a seamless user experience across various platforms. ![Different app body widths on a desktop and a mobile device.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/app-design-guidelines/layout/app-body-width-CZo1dV1e.png) ## Layout options The Polaris [Page](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/page) component offers various layouts to match the complexity of your app. ![Various layouts, including single and two-column.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/app-design-guidelines/layout/layout-options-intro-NlCo-XYA.png) ### 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. ![A full-width page with a single column layout that displays a list of products. The width captures each column of product information.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/app-design-guidelines/layout/resource-index-single-column-layout-ADG-DqECLOyd.png) For [resource index pages](https://shopify.dev/docs/api/app-home/patterns/templates/index), use a full-width page. This is helpful when merchants are dealing with lists of data that have many columns. ### Two-column layout Two-column layouts allow merchants to view more content at once. This is helpful for visual editors or content-dense pages. ![A content editor with a two column layout for editing multiple and related content types.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/app-design-guidelines/layout/visual-editor-two-columns-layout-ADG-CIhNEAan.png) For visual editors, use a two-column layout. This allows merchants to preview the outcome of their edits in real-time. ### Settings layout The settings layout lets merchants quickly scan and find groups of settings that are related to each other. ![A settings layout with a thinner column on the left with a title and description, and a wider column on the right with form elements.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/app-design-guidelines/layout/interstitial-settings-annotated-layout-ADG-TXCZDw0B.png) For settings pages, use the [settings pattern](https://shopify.dev/docs/api/app-home/patterns/templates/settings) to provide merchants with clear context about your app's configuration options. ## Spacing Spacing helps your app maintain a pleasant experience by keeping interface components well-positioned with consistent visual rhythm. To simplify spacing, use the Polaris [Stack](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/stack) component. ![Components on a 4px spacing grid.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/app-design-guidelines/layout/spacing-4px-Dq5TsJER.png) #### 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 the Polaris [Page](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/page) and [Stack](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/stack) components to achieve this. ## 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. ![Low density and high density patterns.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/app-design-guidelines/layout/information-density-spacing-D2QMw6UW.png) Use looser spacing for low-density layouts. Use tighter spacing for high-density layouts. ![Various layouts with alternating amounts of information density on the same page.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/app-design-guidelines/layout/information-density-changing-midpage-CdxaHTdI.png) Avoid changing information density within a single page, otherwise your app can feel disjointed. ## Containers Most of an app's content exists in containers. Containers compartmentalize content and create a natural hierarchy between parts of an interface. ![A paragraph of text placed directly on the gray background of an app, outside of a container.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/app-design-guidelines/layout/containers-paragraphs-of-text-Bdr2NhGV.png) Avoid placing paragraphs of text directly on the background. This reduces legibility and makes scanning the page difficult for merchants. ### Using sections Sections structure your app's content so that merchants can scan information easily. Sections act as containers and can be static or interactive. The Polaris [Section](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/section) component provides an easy way to segment content, while still respecting Shopify's App Design Guidelines. ![A page with various containers that are visually consistent with each other.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/app-design-guidelines/layout/cards-majority-ADG-BgRvn0Fo.png) The majority of your app's content should live in a container, such as a card. This creates visual structure and rhythm that helps merchants find information quickly. ![A card with two CTAs. The primary CTA is a button that's labeled 'Upload image' and the secondary one is a link that reads 'View templates'.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/app-design-guidelines/layout/cards-interactive-cta-D6zl05rA.png) Cards that offer interactivity, such as calls to action (CTAs) and buttons, should have at most one primary styled action. ### Using tables Tables are helpful for summarizing many object instances. Use the Polaris [Table](https://shopify.dev/docs/api/app-home/polaris-web-components/structure/table) component for relatively simple summaries, and the [Index table pattern](https://shopify.dev/docs/api/app-home/patterns/compositions/index-table) when you have a lot of data to show. Refer also to the Polaris Pattern for [Resource index layout](https://shopify.dev/docs/api/app-home/patterns/templates/index), when you are summarizing resource objects. ![A card with two CTAs. The primary CTA is a button that's labeled 'Upload image' and the secondary one is a link that reads 'View templates'.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/app-design-guidelines/layout/table-actions-aR8XljKw.png) Actions in tables should use secondary action styling, such as a text button, minor icon, or dropdown menu. Avoid using primary style buttons in tables. [![App structure](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/spot-icons/adg-app-structure-Dycy8h5K.png)![App structure](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/spot-icons/adg-app-structure-Dycy8h5K.png)](https://shopify.dev/docs/apps/design/app-structure) #### [PreviousApp structure](https://shopify.dev/docs/apps/design/app-structure) [![Visual design](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/spot-icons/adg-visual-design-lTehNSk8.png)![Visual design](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/spot-icons/adg-visual-design-lTehNSk8.png)](https://shopify.dev/docs/apps/design/visual-design) #### [NextVisual design](https://shopify.dev/docs/apps/design/visual-design)