Theme editor preview inspector best practices

The theme editor preview inspector allows you to navigate sections and blocks directly in the preview, and makes finding corresponding settings more intuitive.

The theme editor preview inspector draws outlines around sections and blocks to differentiate them. However, the preview inspector relies on coordinates returned by the browser's Element.getBoundingClientRect() method to draw these outlines, which can highlight aspects of a theme's foundation that aren't normally visible.

Consider the following design guidelines to ensure that the outline of the section or block displays properly in the preview inspector: