Theme editor updates

Shopify's theme editor has been rebuilt to make it faster, more powerful, and easier to use.

You don't need to take any action to get access to the new theme editor. When your store has access to the new theme editor, you automatically receive the updated theme editor features.

This update only gives you access the features outlined below, and does not include other Online Store 2.0 features announced at Unite. Online Store 2.0 themes that unlock those features will be released in the upcoming months.

Sidebar enhancements

The new theme editor has an updated sidebar design.

The editor now displays a tree view of all the content for the template that you're currently viewing in the sidebar. Instead of clicking a section to access its blocks and settings, you can expand a section node using the expand icon ▸ to view its blocks, or collapse it using the collapse icon ▾ to hide the blocks. You can click any section or block to view its settings.

Sidebar modes

Our editor now offers two modes to make use of all of the space on your screen.

Double sidebar mode is for wider browser windows and larger screens, and single sidebar mode is for narrower browser windows and smaller screens. The sidebar mode determines where the setting panel appears in the editor.

Double sidebar mode

If you have a screen larger than 1600 pixels wide and your browser window is fully expanded, or your browser window is expanded to at least 1600 pixels wide, then you'll see two sidebars. The left-hand sidebar contains the navigation panel, and the right-hand sidebar contains the setting panel.

Tip

To view the theme editor in single sidebar mode on a large screen, make your browser window narrower until the setting panel moves over top of the navigation sidebar or disappears.

Single sidebar mode

Narrower browsers have only one sidebar to conserve space for the theme preview. When you click a section or block to edit it, the setting panel opens over top of your navigation panel in the sidebar.

Sections and blocks

In the list of sections and blocks, you can now see all of the blocks for the sections on a page by default. In the previous theme editor, you needed to select a section to see its blocks.

Sections that make up the header or footer are collapsed by default, but you can see them if you click the expand icon ▸ next to the section name.

Tip

If you can’t find the settings you expect to see in a section, try looking at the blocks in that section.

Removing sections

You can now delete a section or block from a template from the setting screen for each item. The Remove section button appears at the bottom of the section settings.

Steps:

1. In the theme editor sidebar, click the section or block that you want to remove.
2. Click Remove section or Remove block.
3. Click Save. If you're editing a published theme, then click Publish to save your changes and make them live in your store.

Hiding blocks

You can now hide any section or block using the eye icon.

Templates

You can now access all of your theme's templates from the page selector in the top bar of the theme editor.

If you're using an Online Store 2.0 theme, then you can also create a new template directly from the page selector by clicking the New template option.

Previewing templates with specific resources

When you're viewing a template, you can see how it looks with any compatible resource in your store. For example, if you're viewing a product template, you can test it with any product in your store.

Note

You still need to assign the template to the resource in the Shopify Admin.

Tip

You can also search for templates and resources using the Search bar in the page selector.

Steps:

1. From the theme editor page selector, select the template that you want to preview.
2. From the navigation panel, in the Preview section, click Change.
3. From the Select menu, select the resource you want to preview.

Undoing and redoing actions

The Undo and Redo buttons have been moved to the top right of the theme editor.

Viewing documentation, getting support, and checking your theme version

Links to your theme's documentation and support information have been moved to the More ⋯ menu in the menu bar. In this menu, you can also check the theme version and creator information.

This information was previously accessible from the Theme actions menu.