Shopify Redesigns Theme Editor Navigation with New Layout

Shopify has released a redesigned theme editor that reorganizes the interface layout. The left navigation panel has moved to a top horizontal bar, and the site preview now occupies the center of the screen with increased horizontal space. The right sidebar can now be collapsed when not in use.

The update changes how developers interact with the theme editor on smaller screens. On laptops and devices with limited screen space, the settings panel now slides up from the bottom of the screen when users select a section or block, rather than occupying fixed sidebar space.

Impact on App Developers

App developers who build theme extensions or app blocks need to understand how merchants will interact with their components in this new layout. The increased preview space means merchants will see more of the storefront context when configuring app blocks, which may affect how developers design their settings interfaces.

Developers who create documentation or tutorial content for merchants will need to update screenshots and instructions that reference the old navigation structure. Any onboarding flows or help documentation showing the theme editor interface should be revised to match the new layout.

Technical Considerations

The responsive behavior on smaller screens changes the interaction pattern for accessing block and section settings. Developers building app blocks should test how their configuration panels render when they slide up from the bottom on laptop-sized displays. The collapsible sidebar functionality may also affect how merchants discover and configure app-related settings within the theme editor.

Read the full announcement →