Customizing with the Preview inspector

You can use the preview inspector 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 themes from Shopify, and is activated by default.

Activate or deactivate the preview inspector

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.

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