# New Built for Shopify design requirements — Shopify developer changelog --- ## New Built for Shopify design requirements We have introduced new design requirements to our [Built for Shopify requirements page](https://shopify.dev/docs/apps/launch/built-for-shopify/requirements). These updates enhance the clarity of our existing design guidelines, making it easier to understand what’s needed to meet the standards for Built for Shopify status. * **[Follow UX best practices](https://shopify.dev/docs/apps/launch/built-for-shopify/requirements#follow-ux-best-practices)** Your app's UI should demonstrate a good faith effort to leverage common UX best practices and meet a high bar for design quality. Starting in July 2025, apps will need to meet this requirement to be eligible for Built for Shopify status. * **[Use tabs for secondary navigation](https://shopify.dev/docs/apps/launch/built-for-shopify/requirements#use-tabs-for-secondary-navigation/)** Use tabs sparingly for secondary navigation purposes when the [nav menu](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-nav-menu) isn’t sufficient. Clicking a tab should only change the content below it, not above. Tabs should never wrap onto multiple lines. Navigating between tabs should not cause the tabs to change position or move. Starting in July 2025, apps will need to meet this requirement to be eligible for Built for Shopify status. This requirement will **replace** the following [navigation](https://shopify.dev/docs/apps/design/navigation#app-nav) requirement: *Don’t use tabs as primary navigation for your app, since Tabs are used in the Shopify admin as filters on index tables. Use the App Bridge ui-nav-menu web component or NavMenu React component instead.* * **[For index pages, use full-width layouts](https://shopify.dev/docs/apps/launch/built-for-shopify/requirements#for-index-pages-use-full-width-layouts)** For [resource index pages](https://polaris.shopify.com/patterns/resource-index-layout), use a full-width page. This is helpful when merchants are dealing with lists of data that have many columns. This requirement will **replace** the following [layout options](https://shopify.dev/docs/apps/design/layout#layout-options) requirements: *Use a full-width page when merchants are dealing with lists of data that have many columns.* *Don’t use a single-column layout with a full-width page when you’re not dealing with lists of data. This makes the app feel out of place on larger displays. Apps should feel integrated with the Shopify admin.* *Keep your app aligned with the Shopify admin by using the [Polaris Patterns](https://polaris.shopify.com/patterns) for common layouts such as index pages and resource detail pages.* * **[For visual editors, use two-column layouts](https://shopify.dev/docs/apps/launch/built-for-shopify/requirements#for-visual-editors-use-two-column-layouts)** For visual editors, use a two-column layout. This allows merchants to preview the outcome of their edits in real-time. This requirement will **replace** the following [layout options](https://shopify.dev/docs/apps/design/layout#layout-options) requirements: *Complex editors should use the two-column primary/secondary layout in a default-width page. This offers merchants a streamlined editing experience.* *Don’t use a two-column primary/secondary layout for your app home page and other pages that don’t require a parent/child relationship between different parts of the interface.* *If your app’s page behaves as a dashboard, then use a two-column equal width layout. Use a three-column layout for higher content density.* *Don’t use two-column layouts in full-width pages, because it makes your app’s content harder to parse on larger displays.* * **[For settings pages, use the app settings layouts ](https://shopify.dev/docs/apps/launch/built-for-shopify/requirements#for-settings-pages-use-the-app-settings-layouts)** For settings pages, use the [app settings layout](https://polaris.shopify.com/patterns/app-settings-layout) to provide merchants with clear context about your app's configuration options. This requirement will **replace** the following [layout options](https://shopify.dev/docs/apps/design/layout#layout-options) requirements: *Don’t use annotated layouts for content that isn’t editable. Use a single-column layout instead.* * **[Place your content in card-like containers ](https://shopify.dev/docs/apps/launch/built-for-shopify/requirements#place-your-content-in-card-like-containers)** 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, headings, or images aren’t necessarily required to be in a container. This requirement will **replace** the following [layout containers](https://shopify.dev/docs/apps/design/layout#containers) requirements: *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.* *Place your app’s content in a card-like container a majority of the time. Complex components or images aren’t necessarily required to be in a container.* * **[Use black or gray for the majority of text]( https://shopify.dev/docs/apps/launch/built-for-shopify/requirements#use-black-or-gray-for-the-majority-of-text)** Present the majority of app text in a legible and neutral color, such as black or dark gray. * **[Use green to indicate a successful outcome or status](https://shopify.dev/docs/apps/launch/built-for-shopify/requirements#use-green-to-indicate-a-successful-outcome-or-status) ** Green (`--p-color-text-success` or `rgba(1, 75, 64, 1)`) should be used to indicate that a status is positive or that an action has been completed successfully. Don't use green to entice merchants or draw unnecessary attention. * **[Use yellow to indicate a pending or paused status ](https://shopify.dev/docs/apps/launch/built-for-shopify/requirements#use-yellow-to-indicate-a-pending-or-paused-status)** Yellow (`--p-color-bg-fill-caution` or `rgba(255, 230, 0, 1)`) should be used to indicate that a status is on pause or incomplete, or to highlight information that requires merchant attention but isn't urgent. Don’t use yellow for announcements. * **[Use orange to indicate an action or item that requires the merchant's attention](https://shopify.dev/docs/apps/launch/built-for-shopify/requirements#use-orange-to-indicate-an-action-or-item-that-requires-the-merchants-attention)** Orange (`--p-color-bg-fill-warning` or `rgba(255, 184, 0, 1)`) should be used to indicate that a status is in-progress, pending, or to tell merchants that something needs their attention. Orange is the strongest, non-blocking color role in the Shopify admin. Don’t use orange for “under construction” or “coming soon” messaging. * **[Use red to indicate an unsuccessful outcome or status](https://shopify.dev/docs/apps/launch/built-for-shopify/requirements#use-red-to-indicate-an-unsuccessful-outcome-or-status)** Red (`--p-color-text-critical` or `rgba(142, 11, 33, 1)`) should only be used to convey messaging that implies an action is impossible, blocked, or has resulted in an error. Don't use red to entice merchants or draw unnecessary attention. The following requirements will be **removed**: * **[Color roles](https://shopify.dev/docs/apps/design/visual-design#color)** Don't contradict the Color Roles defined by the Polaris design system. In the example above, the dark pink affirming action could be misunderstood as red, which is used in the Shopify admin for destructive actions and critical errors. * **[Three-column layouts](https://shopify.dev/docs/apps/design/layout#layout-options)** Set three-column layouts in a full-width page when you’re using them for interfaces like dashboards and analytics. Don’t use three-column layouts to display unrelated content side by side, as it can confuse merchants. Use a single-column layout instead. *Published: December 11, 2024* Tags: Built for Shopify, New Link: https://shopify.dev/changelog/new-built-for-shopify-design-requirements ---