Top right features in theme customizer
Activate Inspector
What Is The Inspector In Shopify Theme Customizer?
The inspector is a developer-friendly tool built into Shopify’s theme editor that allows you to:
- Identify theme elements: Click on any section, block, or component in your store preview to see which theme file it belongs to.
- Edit settings directly: Adjust properties like colors, text, images, or layout from the theme editor.
- Access liquid code references: Quickly locate the underlying Liquid, CSS, or JavaScript code for a specific element. This is extremely helpful for customizations beyond the standard settings.
Viewing Changes In Shopify Theme Customizer
Desktop, Mobile, Preview & Fullscreen
Shopify’s Theme Customizer lets you see and test changes in multiple ways before making them live:
1. Customizer Preview (Desktop & Mobile)
- While editing your theme, changes appear instantly in the customizer preview.
- You can switch between desktop and mobile views using the device icons in the toolbar.
- This helps you optimize your store’s design for different screen sizes without leaving the editor.
2. Preview Mode
- You can activate Preview Mode to view your store as a customer would see it.
- Changes made here are temporary until you click “Save”.
- Preview Mode is useful for checking the overall layout and design in full context.
3. Fullscreen Feature
- The Fullscreen button in the customizer lets you expand the preview to fill your screen.
- This gives a clearer, distraction-free view of your store layout and design changes.
- You can combine fullscreen with desktop/mobile switching or Preview Mode for the most accurate view of your site.
