Customizing your online store using the theme editor

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. The theme editor has the following sections:

• The menu bar displays tools that you can discover more information about your theme, navigate to different templates in your theme, such as product pages, adjust the screen size display, and manage your customization actions.
• The sidebar menu displays a tree view of all the content for the template that you're currently viewing in the sidebar. You can manage sections, blocks, and settings from the sidebar menu.
• The preview window displays your theme, and updates automatically when you make changes. You can select different display options in the menu bar to preview your theme on desktop or mobile layouts. You can also activate the preview inspector to manage the content for a theme template in the preview window.

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 Customize.

Menu bar

The menu bar features information about your theme, menus to access more information and different areas of your theme, and controls for customizing your theme.

The menu bar displays the following additional information and navigation options:

• Use the button to return to your Shopify admin.
• Review the name of your theme.
• Review the status of your theme. Your published theme displays the Live status label. Unpublished themes display the Draft status label.
• Use the menu to access the following additional 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 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.

You can access different templates and market layouts with the following menus:

• The market menu.
• The template menu.

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

• Activate or deactivate Sidekick.
• Activate or deactivate the preview inspector.
• Change the screen size with screen size controls.
• Manage your current customization session with the undo and redo controls.
• Use the Save button to save your changes.

Viewing documentation, getting support, and checking your theme version

Tip

If you use a free theme from Shopify, then you can review detailed descriptions of its sections and settings by viewing Themes by Shopify and clicking on the name of your theme.

To learn about sections and settings for paid themes, refer to the theme's documentation.

You can view available information about your theme, such as theme version and developer information, and links to your theme's documentation and support information in the menu in the menu bar.

Get help with customizations

If you need help with making changes to your theme, then you can contact your theme's developer for support.

To see what other resources are available to help you with theme customizations, see Additional resources for theme support.

Using keyboard shortcuts in the theme editor

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

List of supported keyboard shortcuts in the theme editor for both Windows and macOS devices.

Category	Action	Shortcut on Windows	Shortcut on macOS
General	Undo	CTRL + Z	⌘ + Z
	Redo	CTRL + Y	⌘ + Y
	Save	CTRL + S	⌘ + ⇧ + S
	See all shortcuts	CTRL + /	⌘ + /
Tools	Preview inspector	CTRL + SHIFT + |	⌘ + ⇧ + |
	Preview mode	⊞ + CTRL + |	⌘ + ⌃ + |
	Sidekick	CTRL + .	⌘ + .
Navigation	Sections	⊞ + CTRL + Z	⌘ + ⌃ + 1
	Theme Settings	⊞ + CTRL + Z	⌘ + ⌃ + 2
	App Embeds	⊞ + CTRL + Z	⌘ + ⌃ + 3
Sections & Blocks	Hide & show	CTRL + SHIFT + H	⌘ + ⇧ + H
	Remove	SHIFT + ⭠	⇧ + ⌫
	Select previous	SHIFT + ←	⇧ + ▲
	Select next	SHIFT + →	⇧ + ▼
	Open selected element	SHIFT + ENTER	⇧ + ▼
	Expand all sections	CTRL + SHIFT + O	⌘ + ⇧ + O
	Collapse all sections	CTRL + SHIFT + P	⌘ + ⇧ + P

Templates

You can 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

You can preview how your template displays with any compatible resource in your store. For example, if you're viewing a product template, then you can test it with any product in your store.

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

You can also search for templates and resources using the Search bar in the page selector, in the Add section or Add block tool, or in App embeds.

Steps:

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

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

3. From the template menu, select the template that you want to preview.

4. From the sidebar menu, in the Preview section, click Change.

5. From the Select menu, select the resource you want to preview.

Preview inspector

The preview inspector allows you to navigate to sections and blocks directly from the preview window and find the corresponding settings faster and more intuitively. With the preview inspector, you can reorder, hide, or duplicate sections and blocks right from your preview window.

The preview inspector is available for all free Shopify themes, and is activated by default. You can click the button to turn the preview inspector on or off during your editing session.

When the preview inspector is activated, you can click any outlined element to open the corresponding setting. On a mobile device, when the preview inspector is activated, you can click any element to select the corresponding setting. You can open the bottom sheet to make edits through this selected setting.

The preview inspector displays one of the following two borders around the sections and blocks clicked in the preview window:

• The Solid blue line indicates the active section. The corresponding setting in the sidebar menu is highlighted in grey.
• The Dotted blue line indicates the associated block for the section. You can click the item in the preview window to open the settings for the block or section.

Clicking any part of your website in the preview window loads the corresponding settings in your sidebar. On a mobile device, tapping twice will navigate the site as a customer would.

Add sections and blocks in the preview inspector

As you use the preview inspector, you can add sections and blocks to your theme directly from the preview window. To use the preview inspector from the Shopify app, long press on a section to manage the section.

Descriptions of the Add sections and Add blocks buttons in the preview inspector.

Tool	Description
Add section	The Add section button displays at the top and bottom of the selected section. Click the Add section button to insert a new section either above or below the selected section.
Add block	The Add block button displays when you hover over an existing block. To add a block, move your cursor over the button. A pop up menu displays with the theme and app blocks that can be added to the selected section. Click the block that you want to add. The settings window for the new block loads in the right sidebar.

Preview inspector tools

You can move, hide, duplicate, or delete sections and blocks in the theme editor with the preview inspector.

List of the available preview inspector tools, including moving, duplicating, hiding, and deleting sections or blocks.

Tool	Action	Description
	Move to previous position	Click this button to move a section or block to the next position or the previous position using the arrow icons in the preview inspector. If the selected section is at the top of your page, then the button will be greyed out. Likewise, if your section is at the bottom of your page then you can't use the button.
	Move to next position
	Duplicate section or block	Click this button to duplicate a section or block and its contents.
	Hide section or block	Click this button to hide a section or block. When a section or block is hidden, you won't be able to unhide it from the preview inspector. You can either click the button in the menu bar, or click the button in the sidebar menu next to the section or block to unhide it.
	Delete section or block	This button deletes the selected section or block in the preview inspector.

Viewing different screen sizes in the theme editor

You can view different screen sizes in your theme editor. You can change the theme editor to display desktop, mobile, or fullscreen sizes to ensure your theme edits are optimal for different screen sizes and to check alternate layouts for desktop and mobile. Click the following buttons in the menu bar to change the screen size:

• Click the button for desktop.
• Click the button for mobile.
• Click the button for fullscreen.

Undoing and redoing actions

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

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

Sidebar menu

The sidebar menu displays a tree view of all the content for the template that you're currently viewing in the sidebar. You can manage sections, blocks, and settings from the sidebar menu.

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 setting panel displays 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 have two sidebars. The left-hand sidebar contains the navigation panel, and the right-hand sidebar contains the setting panel.

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, all of the blocks for the sections on a page are displayed by default.

Sections that make up the header or footer are collapsed by default. You can click the button next to a section name to display its content.

Section groups

Sections are grouped into the following areas for every page template in your theme:

• The Header area includes your header, announcement bar, and any apps or custom Liquid.
• The Template area includes sections that make up the main body of your page. For example, the template sections can include blog posts, collage, collection lists, or custom Liquid.
• The Footer area includes your footer, email signup, and any apps or custom Liquid.

Your header and footer are shared across all of your online store's pages. For example, if you add a custom Liquid block to the header, then that custom Liquid displays on all your product pages, home page, and any other pages.

Expand and collapse sections and blocks

Expand a section node using the button to view its blocks, or collapse it using the button to hide the blocks. You can click any section or block to view its settings.

Moving sections and blocks

You can move a section or a block from one area of the page to another area using the button to click and drag the section or block and then drop it to another available location.

If you try to move a section or block where it isn't allowed, then the section or block will drop back into its original location.

Removing sections and blocks

You can remove a section or block from a template in either of the following two ways:

• Move your cursor next to the section name, and then click the button:

  

• Click the section name, and then click Remove section in the section setting details:

  

Steps:

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

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

3. In the theme editor sidebar, click the section or block that you want to remove.

4. Click Remove section or Remove block.

5. Click Save. If you're editing a published theme, then click Publish to save your changes and make them live in your store.

Hiding sections and blocks

You can hide any section or block using the button: