The Polaris 2.0 RC is now available for embedded App Home. It brings the new Shopify admin's colors, typography, spacing, and icons. It automatically renders in the old or new design to match each store, so a single app can support both.
Applies to the app home page (App Home) embedded in the admin.
The new admin's colors, typography, spacing, and icons come to Polaris Web Components.
Stores on the old design render the old style; stores on the new design render the new style.
| Loaded script | Uses Polaris 2.0? | Appearance |
|---|---|---|
polaris.js(legacy URL) |
No | Doesn't automatically migrate to Polaris 2.0 |
polaris-1.js |
No | Doesn't automatically migrate to Polaris 2.0 |
polaris-2.0-rc.js |
Yes | Shows the new or old style to match the store's design |
The embedded App Home UI must be updated to match the Shopify admin's visual style.
Components adapt to the design available in each store, so a single app can support merchants on either design.
Load the release candidate from the Shopify CDN:
<script src="https://cdn.shopify.com/shopifycloud/polaris-2.0-rc.js"></script>
Then check behavior and appearance in the following three environments.
If you don't have one, create a new store with the "Shopify admin's new design" feature preview enabled.
Check that it looks the same as with polaris-1.js.
Confirm that components render in the new style (the default).
To keep the floating Sidekick barfrom covering your UI, use the Environment API CSS variable --shopify-safe-area-inset-bottom .
Applies to: apps that place fixed or sticky content near the bottom of the viewport.
Just swap the CDN URL for the release candidate and test your existing UI.
Migrate to Polaris Web Components by following the migration guide. Start with Page / Section / Button first. It's the component whose appearance changes the most under the new design.
To adopt Polaris 2.0, you first need to migrate to Polaris Web Components.
polaris-1.js and legacy polaris.js won't switch to 2.0 automatically.polaris-2.0-rc.js must be loaded explicitly. Only apps that do so are affected.
Components change their appearance based on the store's admin design. Your app doesn't need any design detection or conditional logic.
Anything rendered outside the admin, such as in a local environment or Storybook, uses the new style. You can check the look even without a store on the new design.
--shopify-safe-area-inset-bottom(Environment API) to avoid overlapping with the floating Sidekick bar.
The URL name is polaris-2.0-rc.js. The article doesn't give the stable release URL or release date. For versioning, see the related doc "Polaris CDN semantic versioning".Extensions (Admin UI / App Home UI extensions) adapt automatically with no code changes, so the only UI you need to work on is App Home itself.
polaris-2.0-rc.js , then test in three environments: the new design, the old design, and outside the admin.--shopify-safe-area-inset-bottom .polaris-2.0-rc.js and App Home automatically follows each store's new or old admin design.