Table of Contents
- Key Highlights:
- Introduction
- Why this redesign matters to merchants
- Visual overhaul: color, type, spacing, icons
- Navigation rethought: search, notifications, and store picker in a collapsible side navigation
- Sidekick repositioned: from side panel to floating chat at the bottom
- A consistent frame across every page: implications for apps and partners
- Rollout plan and merchant impact
- Accessibility and performance: what to verify
- Practical day-one checklist for merchants and teams
- Implications for partners and app developers
- Managing potential frustrations and common questions
- How this compares to other commerce admin redesigns
- Long-term outlook: what merchants should watch for next
- Real-world examples: scenarios showing the redesign in action
- Reporting issues and where to get help
- Practical tips for power users
- Preparing for future updates
- FAQ
Key Highlights:
- Shopify has begun a gradual rollout of a redesigned admin interface featuring updated color, typography, spacing, icons, and a consistent frame; no setup is required for merchants.
- Search, notifications, and the store picker have moved into a collapsible side navigation; Sidekick shifts from a side panel to a floating chat at the bottom of every page.
- The redesign prioritizes workspace clarity and persistent access to tools; merchants, app partners, and admin users should validate key workflows, update documentation, and test accessibility.
Introduction
The Shopify admin sits at the center of daily operations for hundreds of thousands of merchants. Small decisions inside the admin — finding an order, switching stores, responding to a customer message — aggregate into the time and attention a merchant spends managing a business. On September 15, Shopify began rolling out a significant visual and interface update to that central workspace: new color, typography, spacing, icons, and a unified frame across pages. Functionality has shifted as well. Search, notifications, and the store picker are now located in a collapsible side navigation, and Sidekick — Shopify's in-admin assistant — moved from a side panel into a floating chat at the bottom of every page.
Those surface-level changes add up. The redesign alters the way features are discovered, how screen real estate is used, and how interruptions are delivered. The rollout will reach admins gradually and requires no setup by store owners. Yet readiness matters. This article explains what changed, why it matters, and what merchants, partners, and admin users should do now to avoid workflow disruption and make the most of the new experience.
Why this redesign matters to merchants
The Shopify admin functions as a control center. Merchants open it to process orders, manage inventory, adjust product descriptions, and resolve customer issues. Any design or navigation change touches these frequent tasks. The new visual system and navigation placement affect three measurable merchant concerns: speed of task completion, cognitive load, and context switching.
- Speed of task completion. Updated typography, spacing, and iconography can shorten the time it takes to scan lists and identify the right action. When search and notifications are more accessible, locating an order or triaging a customer message becomes a one-gesture action instead of hunting through menus.
- Cognitive load. Visual hierarchy reduces the mental effort required to decide what to click next. Clearer type scales and more purposeful spacing make the interface feel less crowded. A collapsible side navigation offers a larger workspace for complex tasks like bulk-editing products or designing custom pages.
- Context switching. Sidekick’s relocation to a floating chat reduces the need to open a separate panel and lose sight of the work area. Conversely, a floating assistant can be more interruptive, requiring conscious management to prevent distraction.
Design changes have practical consequences for daily workflows. Teams that rely on rapid customer responses, frequent store switching, and multi-tasking inside the admin will feel the difference immediately. Partners and app developers must adjust too; embedded app components, screenshots, and training materials will require updates to match the new frame and navigation.
Visual overhaul: color, type, spacing, icons
The most obvious changes are visual: a new color palette, refreshed typography, increased spacing, and updated icons. These are not cosmetic alone. They are part of a coherent system that signals function, improves legibility, and strengthens information hierarchy.
Color A color update affects contrast relationships across the admin. Buttons, badges, and status indicators must remain distinguishable at a glance. For merchants, clear color differentiation reduces mistakes — for example, distinguishing between a paid and pending order when skimming a list. If a merchant has accessibility considerations, revised color treatments may improve readability; still, teams should validate contrast levels in their own environment.
Typography Longer line lengths, refined type scales, and adjusted weight decisions influence scanning speed. A stronger type hierarchy makes primary actions and headings stand out, while secondary details recede visually. This helps when reviewing dense content like customer notes or variant lists.
Spacing More white space separates interactive zones, decreasing accidental clicks and improving touch targets on devices with large screens. Spacing changes also shape perceived complexity. Crowded forms feel more difficult to complete; well-spaced fields feel manageable.
Iconography New icons clarify intent. Standardized iconography reduces ambiguity across features and apps. Consistent icon language helps users internalize meanings faster; once recognized, an icon acts as a mental shortcut, speeding navigation.
Practical guidance
- Update any internal screenshots and training materials to reflect the new visuals.
- Check critical pages (orders, products, customers) for text wrapping or layout shifts caused by different type metrics.
- Confirm that third-party tools and integrations that embed into the admin still align visually and functionally.
Navigation rethought: search, notifications, and store picker in a collapsible side navigation
Shopify moved search, notifications, and the store picker into the side navigation. The side navigation now collapses, freeing horizontal space for content. That change shifts the center of gravity for many commonly used controls.
What the move changes in practice
- Persistent access: Search sits alongside core navigation, making it available regardless of which page you're on. Locating an order or product no longer requires additional clicks or separate UI elements.
- Faster switching: The store picker residing in the side navigation reduces friction for agencies, multi-store merchants, and teams that manage multiple storefronts. Switching becomes a single, predictable motion.
- Focused workspace: A collapsible navigation gives users more canvas for complex tasks. Expanding and collapsing is faster than navigating away to a modal or secondary panel, especially when keyboard shortcuts are in play.
Tradeoffs to consider
- Discoverability vs. compactness: Collapsing the navigation hides labels and reduces surface cues. New or less frequent users might need time to reorient. Icons become more important for recognition.
- Muscle memory: Users accustomed to the previous layout will experience an adjustment period. Common actions that used to live in a top bar are now on the side, which changes hand-eye movement patterns.
- Screen real estate on smaller devices: A side navigation consumes horizontal space, though the collapsible behavior mitigates this. The mobile admin likely maintains a different layout optimized for touch.
Examples of real-world workflows
- A marketplace seller concurrently manages three stores and switches between them hourly. The store picker in the side nav reduces the number of clicks per switch from three to one, saving tens of minutes daily.
- A customer support agent uses search to pull up orders while speaking with customers. Having search visible and predictable shortens call times and reduces hold durations.
Action items for teams
- Train staff on the new location of search, notifications, and the store picker; short video walkthroughs help.
- Confirm keyboard shortcuts or quick-access gestures remain available for power users.
- Test role-based access controls to ensure admin teams can still view and switch stores as intended.
Sidekick repositioned: from side panel to floating chat at the bottom
Sidekick moved from a side panel to a floating chat at the bottom of every page. That change affects how assistance and suggestions arrive while working.
Benefits of the floating chat
- Always within reach: A persistent, floating chat means merchants can summon Sidekick from any page without opening a panel or losing context.
- Reduced layout disruption: Opening a side panel can push content or resize the workspace. A floating chat overlays content without permanently reshaping the page.
- Better placement for contextual help: Bottom placement aligns with common chat patterns found in websites and apps, making Sidekick behavior familiar.
Potential drawbacks
- Interruptions: Floating chats invite engagement. If prompts are proactive, merchants may find them distracting during focused tasks.
- Overlap with content: On pages dense with controls (e.g., product variant editors), the floating chat may occlude important elements if not dismissible or movable.
- Accessibility concerns: Floating elements must be keyboard-accessible and announced properly to screen readers.
Use cases that change with the new placement
- Quick clarification: While editing a product description, a merchant can ask Sidekick for SEO suggestions without leaving the editor.
- Task assistance: Sidekick can suggest bulk action formulas or provide step-by-step instructions while the merchant remains on the same page.
- Diagnostics: If an action fails, Sidekick can offer troubleshooting steps in the chat instead of opening a separate help panel.
Best practices for merchants
- Familiarize yourself with Sidekick’s controls: open, minimize, mute, and history.
- Keep the chat minimized while performing careful layout work; call it up when you need guidance.
- Provide feedback to Shopify via the help center if the floating chat overlaps critical UI elements in important workflows.
A consistent frame across every page: implications for apps and partners
The admin now uses a new frame across pages. A consistent frame matters for embedded apps, admin extensions, and partner tools that operate inside Shopify’s admin environment.
Why a frame matters
- Visual consistency: A stable frame creates a predictable boundary around content. When apps render inside that frame, their visual integration feels more seamless.
- Behavioral consistency: Navigation, global controls, and contextual features behave similarly across pages, creating fewer surprises when switching between Shopify native pages and third-party embedded apps.
Implications for embedded apps
- Layout adjustments: Apps that assumed particular header heights or relied on top-bar controls may need to adjust spacing or anchoring to avoid overlap.
- Integration points: Where the previous admin displayed certain controls in top bars or side panels, apps now share real estate with a side navigation and a floating chat. Verify that in-app modals and tooltips remain visible and usable.
- Visual parity: Update app screenshots, documentation, and marketing materials to match the new admin frame. Merchants expect consistency between what they see in app listings and their actual admin experience.
Guidance for partners
- Test embedded apps across the new admin layout. Use different nav states (expanded, collapsed) and check for clipping or overflow.
- Revisit any CSS overrides or assumptions tied to old admin selectors; the new frame may change class names or DOM structure.
- Coordinate release notes and merchant communications to highlight compatibility confirmations and any required updates.
Rollout plan and merchant impact
Shopify’s update rolls out gradually and arrives automatically; merchants do not need to opt in. That approach reduces friction but raises planning considerations for teams, particularly those with complex operations or multiple users.
What to expect during rollout
- Staged arrival: Not all merchants will see the update simultaneously. Rollouts typically follow regions, account tiers, or randomized cohorts to limit widespread disruptions.
- Minor regressions may appear: Any large-scale UI update can reveal edge cases. Shopify will likely iterate through small fixes during the initial weeks.
- No setup required: The admin will update itself. Users need only refresh their browser or log back in to see changes once the rollout reaches their account.
Immediate merchant actions
- Inform teams about the timing and nature of changes. A brief internal memo or Slack announcement reduces confusion the first time a user notices a different interface.
- Create a short reference guide that highlights where search, notifications, and the store picker now live.
- Schedule a short training session for staff who perform high-volume tasks (fulfillment staff, customer support, listings managers).
Testing and rollback
- Shopify’s rollout strategy typically aims to avoid forcing a sudden learning curve. However, merchants should run smoke tests on critical flows the day their account receives the update: order processing, discount application, payment capture, and fulfillment tasks.
- If a merchant encounters a severe issue, open Shopify support channels. Fast reporting improves the likelihood of a timely fix.
Accessibility and performance: what to verify
Redesigns must preserve, if not improve, accessibility and performance. The visible changes — new colors, type, icons, and a floating chat — have specific accessibility and performance implications.
Accessibility checks
- Contrast ratios: Verify that primary text, UI controls, and status indicators meet WCAG contrast requirements. Merchants with staff who rely on high contrast will need to confirm readability.
- Keyboard navigation: Test tab order and keyboard focus across the collapsible navigation, the floating Sidekick chat, and any embedded apps. Focus traps and inaccessible dropdowns create real barriers.
- Screen reader behavior: Ensure the new frame and floating chat announce correctly. Sidekick should be navigable and dismissible via assistive technologies.
- Touch targets: Increased spacing should support larger touch targets. Verify that interactive elements meet minimum size recommendations for tablets and touchscreen laptops.
Performance verification
- Page load times: The new frame should not materially slow the admin. Confirm that listing pages and editors render quickly on typical merchant networks.
- Resource usage: Floating chat widgets can introduce additional scripts. Confirm that CPU and memory usage remain acceptable for users on older hardware.
- Third-party impact: Embedded apps that load scripts or widgets must be tested to ensure they don’t compound load times.
Recommended testing approach
- Test on representative devices and networks. Include a low-bandwidth test case to simulate a staff member working with weaker internet.
- Compare critical workflows before and after the update: search latency, navigation toggles, and Sidekick responsiveness.
- Solicit feedback from staff who have accessibility needs and escalate issues with concrete reproduction steps.
Practical day-one checklist for merchants and teams
When the new admin arrives, an organized response reduces disruption. The following checklist covers essential actions to take within the first 24–72 hours.
- Inform the team
- Announce the visual and navigation changes via internal communication channels.
- Share a one-page guide that points out where search, notifications, and the store picker now live.
- Validate critical workflows
- Process a test order from checkout to fulfillment.
- Locate and edit a product variant, then publish the change.
- Use search to pull up a customer order and add a note.
- Switch stores if your account manages multiple storefronts.
- Test Sidekick
- Open Sidekick, ask a sample question, and verify responses display without interference.
- Minimize and restore the chat, confirm chat history appears as expected.
- Update training and documentation
- Replace screenshots in internal guides and onboarding materials.
- Record short video snippets for common tasks that changed location.
- Verify app compatibility
- Open each critical embedded app and check for layout issues.
- Confirm webhooks, fulfillment handoffs, and external integrations function as before.
- Accessibility and performance checks
- Run basic contrast checks, keyboard navigation tests, and performance benchmarks.
- Log any regressions with clear reproduction steps.
- Provide feedback
- Encourage staff to report issues through a centralized form or a designated contact.
- File support tickets with Shopify for any blocking issues and include steps to reproduce.
Implications for partners and app developers
Shopify’s ecosystem depends heavily on third-party partners. Redesigns ripple through partner apps, listings, and developer documentation.
Technical adjustments
- CSS and selector changes: The admin frame may introduce different DOM structures. Audit CSS selectors for assumptions tied to old admin HTML.
- Embedded app sizing: Confirm that iframes or extension components anchor correctly. Account for the collapsed state of the new side navigation.
- Event and messaging alignment: Apps using global admin events might need updates if UI triggers or behaviors changed.
Product and marketing updates
- Update marketing assets: App store screenshots and promotional videos should match the new admin look to avoid merchant confusion.
- Revise onboarding: Adjust in-app walkthroughs that referenced old navigation locations.
- Communicate compatibility: Publish a compatibility statement and any required app updates to reassure merchants.
Support and documentation
- Prepare support articles addressing where users can find search, notifications, and the store picker.
- Train support staff to recognize complaints stemming from the interface change and provide quicker resolutions.
Business opportunities
- New placement of Sidekick could create chances for partners to integrate help flows or guidance aligned to the floating chat’s behavior.
- A refreshed admin often renews merchant interest in optimization. Offer short audits or setup services to help merchants adapt.
Managing potential frustrations and common questions
Change invites questions. Anticipating friction points helps keep teams productive and merchant confidence high.
Common merchant frustrations and fixes
- “I can’t find X where it used to be.” Provide a quick visual map that compares old and new locations for high-frequency items.
- “The floating chat covers my buttons.” Minimize or reposition the chat while working; report overlap to Shopify if it blocks critical controls.
- “My embedded app appears clipped.” Check app container heights and CSS; partners should verify responsive behavior across nav states.
- “Performance feels slower.” Clear browser cache, test in another browser, and report consistent performance regressions to support with reproduction details.
How to raise issues effectively
- Capture screen recordings and exact steps to reproduce.
- Note browser, OS, and whether the side navigation was expanded or collapsed.
- Include account ID or store name where appropriate when filing support tickets.
How this compares to other commerce admin redesigns
Platform vendors refresh admin UIs periodically. The patterns Shopify demonstrates—cleaner typography, consolidated navigation, assistant chat—mirror moves seen across other SaaS and commerce platforms. Several themes recur:
- Consolidation of global tools into a single navigation location to reduce fragmentation.
- Persistent assistants moving to chat-based interfaces for contextual guidance.
- Emphasis on whitespace, type clarity, and scalable icon systems to support dense data tasks.
Compared to earlier Shopify admin revisions, this update is less about adding new features and more about reorganizing access and improving visual clarity. That choice suggests a focus on enhancing ongoing productivity and integration compatibility rather than introducing new core capabilities.
Long-term outlook: what merchants should watch for next
A visual and navigational overhaul is rarely the end of an evolution; it often signals further platform-level work.
Expected follow-up areas
- Personalization: Expect more adaptive surfaces that surface relevant actions based on role, frequency, or store behavior.
- Deeper Sidekick capabilities: As in-admin assistants mature, Sidekick might expand into automated flows, template suggestions, or even action-triggering capabilities.
- Developer tooling: Shopify will likely release guidelines and updated component libraries for partners to align with the new admin frame.
How merchants can prepare
- Keep training materials dynamic: Treat screenshots and process documents as versioned artifacts that need updates periodically.
- Invest in automation and standard operating procedures that are resilient to UI shifts.
- Stay engaged with Shopify channels for early notices of further changes and developer updates.
Real-world examples: scenarios showing the redesign in action
Scenario 1: Multi-store agency saves time switching clients An agency that manages storefronts for five brands often switches stores to troubleshoot payment settings and apply discount codes. Previously, the store picker required opening a modal and selecting from a list that obscured the current page. With the store picker in the side navigation, the agency’s team can switch stores in one click without losing their place. The team reports fewer context-switch errors and faster resolution times.
Scenario 2: Fulfillment staff benefit from expanded workspace A fulfillment manager reviews bulk order edits and prints packing slips on a 27-inch monitor. The collapsible side nav gives extra horizontal space for spreadsheets and batch-edit dialogs. The manager collapses the nav at the start of a shift, leaving the chat minimized to avoid interruptions from Sidekick during high-volume packing.
Scenario 3: Customer support uses Sidekick for troubleshooting A support representative needs to check a rare payment failure. Instead of leaving the order page to search the help center, they open Sidekick, ask for steps to troubleshoot the specific gateway error, and receive a concise checklist. The rep follows the steps and resolves the issue while the chat remains available for follow-up questions.
Scenario 4: App developer updates embedding styles A partner whose app displays analytics dashboards inside the admin notices that the new frame changes the available vertical space. They update their container CSS to account for the floating chat and collapsible navigation, ensuring charts remain fully visible. They update app store screenshots to show the new admin frame and send a compatibility note to customers.
Reporting issues and where to get help
If the redesign introduces a bug or blocks a workflow, fast reporting helps prioritize fixes.
Steps to report effectively
- Reproduce the issue and capture exact steps.
- Record a short video or screenshot showing the problem and the state of the side nav (expanded/collapsed).
- Include browser name and version, operating system, and any browser extensions active.
- List whether the issue affects only a single user or the entire team.
Official resources
- Shopify Help Center hosts articles and walkthroughs for the new admin experience. Merchants should check there for step-by-step guidance before filing a ticket.
- Shopify’s support channels remain available for critical issues that prevent order processing or other essential tasks.
Practical tips for power users
Power users can adapt faster by leveraging keyboard shortcuts, bookmarks, and automation.
- Learn or map keyboard shortcuts for search and frequent actions.
- Use browser bookmarks or pinned tabs for critical flows (orders queue, fulfillment page), updating them if URLs change after the redesign.
- Use browser profiles or containers to test the new admin without disturbing daily workflows.
- Consider scripted checks (Selenium or lightweight tests) for mission-critical workflows to detect regressions quickly.
Preparing for future updates
Redesigns are part of product maturation. Build processes that minimize friction during future changes.
- Centralize internal documentation and store screenshots in a version-controlled repository.
- Establish a short feedback loop: a single Slack channel or ticket queue for UI-related issues.
- Schedule quarterly reviews of onboarding materials to refresh visuals and workflows.
- Engage with partners and Shopify forums to share best practices and learn from peer experiences.
FAQ
Q: When will I see the new admin look? A: Shopify began the rollout on September 15 and will deliver the update gradually. The admin updates automatically; no action is required. If you do not see it yet, continue to use the existing admin and check back periodically.
Q: Will the redesign change any of my store’s functionality or data? A: No. The update changes the admin’s appearance and interface placement of certain tools; it does not alter store data or primary capabilities. Merchants should, however, validate critical workflows immediately after the redesign reaches their account.
Q: Where did search, notifications, and the store picker move to? A: These tools now live in the side navigation, which can be expanded or collapsed to increase page space. This new placement provides a single, predictable location for global tools.
Q: What happened to Sidekick? A: Sidekick moved from a side panel to a floating chat located at the bottom of every page. The chat is accessible from any admin page and can be minimized or dismissed as needed.
Q: Do I need to update any third-party apps or integrations? A: Most integrations will continue to work. Partners and developers should test embedded apps in the new admin frame and adjust layouts if needed. Merchants should verify that their critical apps render correctly and report issues to app vendors if necessary.
Q: Will the new design affect accessibility? A: The redesign aims to improve clarity and legibility, but merchants should perform basic accessibility checks in their environment. Verify keyboard navigation, screen reader behavior, and contrast levels for staff who rely on assistive technologies.
Q: How can I report bugs or interface problems? A: Capture reproduction steps, screenshots or video, browser and OS details, and the state of the side navigation, then submit a support request through Shopify’s official help channels.
Q: Will Shopify provide updated help docs and walkthroughs? A: Yes. Shopify’s Help Center contains updated guidance on the admin’s new look and features. Partners should also update their own documentation and marketing materials to reflect the changes.
Q: Should I provide staff training on the new interface? A: Short, focused training reduces confusion. Highlight where search, notifications, and the store picker now live, show how to toggle the side navigation, and demonstrate Sidekick’s new behavior.
Q: Where can I find more information about the redesign? A: Refer to the Shopify Help Center for official details, step-by-step instructions, and troubleshooting guidance.
The redesign introduces a more consistent visual system and repositions core tools to make them more accessible while freeing space for focused work. Merchants and partners benefit from preparing for the change: validate essential workflows, update documentation, and test embedded apps. With a few practical steps and short training, teams should realize smoother day-to-day operations and find that the updated admin becomes a more efficient workspace.
