On September 15th, Shopify began rolling out a visual overhaul of the admin interface. The new look brings a refreshed color palette, updated typography, more generous spacing, and a new set of icons across every page. While the redesign is automatic and requires no action to activate, it does reshape the way merchants navigate their stores and how developers build apps and extensions that interact with the admin.
What’s New in the Shopify Admin
Key visual updates include:
• A new color scheme that improves contrast and aligns with Shopify’s brand refresh.
• Updated typography and spacing for cleaner, more readable pages.
• Refreshed icons everywhere—from orders to settings—making actions instantly recognizable.
• Side navigation now houses search, notifications, and the store picker, and it collapses to give you more screen real estate.
• Sidekick, the AI‑powered assistant, has moved from a side panel to a floating chat widget at the bottom of every page, staying within reach no matter where you work.
Impact on Merchants
For store owners, the redesign is mostly cosmetic, but it does affect daily workflows:
1️⃣ Faster navigation: With the collapsed side menu you’ll see more of your store’s data at once, cutting down on scrolling.
2️⃣ Better visibility: New icons and clearer contrast reduce visual fatigue, especially for high‑volume merchants managing many orders.
3️⃣ Seamless Sidekick access: The floating chat means you can ask Shopify’s AI for help without leaving the page you’re on.
Action steps for merchants:
• Refresh your browser after the rollout window (usually within 24‑48 hours) to see the new UI.
• Review the new side navigation layout and pin the sections you use most for quick access.
• Explore the updated Help Center article on the admin redesign to learn shortcuts and new icon meanings.
Impact on Developers
Developers building apps, custom admin extensions, or embedded UI components should be aware of two main considerations:
🔧 UI consistency: The new icon set lives in the Shopify UI‑kit library (Polaris). If your app references legacy SVGs or custom icons, they may look out‑of‑place. Update your assets to the latest Polaris icons for a seamless look.
⚙️ Side navigation extensions: The side navigation is now collapsible, and the API for adding custom links has been tweaked. If you use the admin.navigation extension point, make sure you’re passing the new collapsible flag.
Example: Updating a navigation extension to respect the new collapsible behavior
{
"name": "my-custom-link",
"type": "admin.navigation",
"settings": {
"label": "My App",
"url": "/admin/apps/my-app",
"icon": "ShopifyIcon",
"collapsible": true
}
}
If you rely on the older icon names (e.g., icon: "orders"), replace them with the new Polaris token names like icon: "OrdersIcon".
Action Items & Best Practices for Developers
1️⃣ Review your app’s admin UI assets. Swap legacy icons for the latest Polaris icons (see the Polaris docs for the full list).
2️⃣ Test your navigation extensions in a sandbox store that has the new admin UI enabled. Verify that custom links collapse correctly and that tooltips still appear.
3️⃣ Update any hard‑coded CSS that relied on the previous spacing values. The new design uses a 4‑pixel baseline grid; adjusting your custom styles will prevent layout shifts.
4️⃣ Communicate with your merchants. Add a brief note in your app’s changelog or release notes that the UI has refreshed and that you’ve aligned your app with the new look.
Conclusion & Next Steps
Shopify’s admin redesign is a visual upgrade that improves usability for merchants while giving developers fresh opportunities to modernize their extensions. Because the rollout is automatic, the biggest win comes from proactive preparation: merchants should familiarize themselves with the new layout, and developers should align their UI assets with Polaris and test navigation extensions.
Stay ahead of the curve by checking the Shopify Help Center for the latest admin UI guidelines, and keep your apps up‑to‑date with the newest Polaris components. Got questions? Drop a comment below or reach out to our community Slack for hands‑on support.
