Theme editor features overview

You can use the theme editor to customize the areas of your theme, such as colors, and manage content in your theme with sections and blocks.

Access the theme editor

You can access the theme editor from your Shopify admin.

1. From your Shopify admin, go to Online Store > Themes.

2. Next to the theme that you want to edit, click Edit theme.

Theme editor layout sections

The theme editor has the following sections:

• The menu bar contains navigation buttons on the left to switch between sections, theme settings, and app embeds; the theme name, market, and template menus in the center; and customization controls on the right.
• The sidebar displays a tree view of all the content for the template that you're currently viewing. You can manage sections and blocks, app embeds and settings from the sidebar. The sidebar is collapsible.
• The preview window displays your theme, and updates automatically when you make changes. You can activate a mobile preview or use the preview inspector to manage the content for a theme template in the preview window.

Menu bar

The menu bar displays navigation, theme information, and controls for customizing your theme.

Sidebar navigation

On the left side of the menu bar, you can toggle between the following views in the sidebar:

• to manage the sections and blocks on your current template.
• to manage your theme's global settings, such as colors, typography, and layout.
• to manage apps that are embedded in your theme.

To hide the sidebar and get a full-width preview of your theme, click the active button again to deselect it. If both panels are visible, then clicking the active button collapses both simultaneously.

Theme details, market, and template menus

In the center of the menu bar, you can find the following:

• The theme name and its status. Your published theme displays the Live status label. Unpublished themes display the Draft status label. Click the theme name to access the following options:
  • Use Edit code to open the code editor.
  • Use Edit default theme content to edit the default wording in your theme.
  • Use to open a preview of your theme.
  • Use View documentation to open your theme's documentation.
  • Use to review all the available keyboard shortcuts for the theme editor.
  • Use Get support to get support.
• The market menu, to preview and customize your theme for different markets.
• The template menu, to navigate between different page templates in your theme.

Customization shortcuts

You can use the following controls in the menu bar to customize your theme and manage your changes:

• Activate or deactivate Sidekick to assist you with theme customizations.
• Activate or deactivate the preview inspector.
• Toggle the preview button to preview your theme on a mobile screen.
• Manage your current customization session with the undo and redo controls.
• Use the Save button to save your changes.

If there are no unsaved customizations to redo, undo, or both, then the corresponding button is inactive.

Sidebar

The sidebar displays a tree view of all the content for the template that you're currently viewing. You can manage sections and blocks, and theme settings from the sidebar. You can collapse the sidebar by clicking the active navigation button in the menu bar again to toggle it off.

Your theme might have conditional settings that display in the sidebar depending on which other settings are active. For example, if your theme has a block with a setting to add either a video or image, then the image picker or video link might be a conditional setting that only displays after you've selected Image as the media type.

Sidebar modes

The theme editor has 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 settings panel displays in the editor.

Double sidebar mode

If your browser window is at least 1600 pixels wide, then you'll have two panels. The left panel contains the page structure with your sections and blocks, and the right panel contains the settings for the selected section or block. You can collapse the right panel by unselecting sections.

To view the theme editor in single sidebar mode on a large screen, make your browser window narrower until the editor switches to the stacked layout.

Single sidebar mode

On narrower screens, the editor uses a stacked layout. When you click a section or block, the settings panel slides up from the bottom of the screen instead of covering your page structure. You can drag the divider to adjust the split between the page structure and settings, keeping both visible at all times.

Previewing your theme

You can preview your theme's mobile layout by clicking the button in the menu bar. To return to the desktop preview, click the mobile button again.

To preview your theme at full width, click the active sidebar navigation button to collapse the sidebar. If both panels are visible, then this collapses both simultaneously, giving you a full-width preview of your storefront.

Undoing and redoing unsaved changes

You can use the and buttons to undo or redo unsaved customizations. After you save your changes, you can no longer redo or undo.

Using keyboard shortcuts in the theme editor

You can use keyboard shortcuts to navigate and perform actions in the theme editor.