The theme editor is where you build and customise every page of your store. Before diving into specific sections, it helps to know the layout — the toolbar at the top, the two panels on the left, and the live preview in the middle. Once you recognise these, everything else in the editor makes sense.
How do I open the theme editor?
From Online store → Theme, click Edit theme on your live theme or any draft. (See Managing Your Store Themes for the difference between live and draft.) The editor opens with your page shown in the centre.
What's in the top toolbar?
On the left you'll see an exit arrow (returns you to the Theme page), your theme name with a LIVE badge, and a page selector dropdown (it starts on Homepage) for choosing which page you're editing. On the right are the desktop and mobile preview icons, a fullscreen icon, undo and redo arrows, the View button, and Save.
What are the two tabs on the left?
The left panel has two tabs. The Sections tab (the layers icon) shows the building blocks of the page you're currently on, grouped into Header, Template, and Footer. The Settings tab (the gear icon) controls the look of your entire store — it's labelled "Customize the appearance of your entire online store" and includes General, Color schemes, Typography, Layout, Shopping Cart, Search, Buttons, UI Elements, Cards, and Icon.
How does the live preview work?
The centre of the screen shows your page exactly as it's built. When you select a section or block in the left panel — or click it directly in the preview — that element is highlighted and its settings open in a panel on the right. Any change you make appears in the preview instantly.
How do I switch which page I'm editing?
Use the page dropdown at the top to move between Homepage, Product, and Collection templates. (Covered fully in Editing different page templates.)
How do I preview my store on mobile?
Click the mobile icon in the toolbar to switch the preview to a phone layout, and the desktop icon to switch back. The fullscreen icon expands the preview so you can focus on the design.
How do I save my changes?
Click Save (top right). To open the page in a new tab exactly as customers will see it, click View. Use undo and redo in the toolbar to step back or forward if you change your mind.
FAQ
What's the difference between "View" and the preview icons? The desktop/mobile icons only change the preview size inside the editor. View opens the real page in a new browser tab as customers see it.
Where do I change my store's colours and fonts?
On the Settings (gear) tab — under Color schemes and Typography. These apply across your whole store.
Do my changes go live as soon as I save?
If you're editing your live theme, yes — saving updates your live store. To experiment safely, edit a draft instead.
I made a mistake — can I undo it?
Yes. Use the undo arrow in the top toolbar before saving.