Help CenterHelp Center / Online store and design · Concept
The top bar, the sidebar tabs, the live preview, the settings panel, device sizes and languages.
The editor has four parts: a top bar, a sidebar, a live preview of your website in the middle, and a panel for the settings of whatever you selected.
From the start of the bar to the end:
| Control | What it does |
|---|---|
| Store name with "theme · Draft" | Reminds you that you are editing the draft of that theme |
| Page picker | Chooses the page you edit and preview. See Pages and templates |
| New template, Page SEO (icon buttons) | See Alternate templates and Page SEO |
| Desktop, Tablet, Mobile | The preview size |
| Preview language | Shown when your website has more than one language |
| Undo and Redo | See Drafts and saving |
| The language button, showing the name of the other language | Switches the editor itself between English and العربية |
| Save status | Saved, Saving…, Unsaved and so on. Select it to save now |
| Version history (clock icon) | See Version history in the editor |
| Assistant | See Assistant |
| Publish | See Publish |
| Tab | What is in it |
|---|---|
| Sections | The header, the sections of the current page and the footer. See Sections |
| Theme | Settings for the whole store: colours, fonts, cards, brand. See Colour schemes |
| Menus | Navigation menus. See Navigation menus |
| Themes | The theme library. See Try another theme |
The middle shows your real website with the draft applied. It reloads after each save.
If the preview shows "This preview may be showing your live store, not your draft. Your edits are safe — reload the preview to see them.", select Reload preview.
The panel at the far side shows the settings of the selected section or block. Until you select something it says Select a section: "Click a section in the sidebar or in the preview to edit its settings." See Section settings. When the Assistant is open, it takes this place.
| Button | Width of the view |
|---|---|
| Desktop | 1280 px |
| Tablet | 820 px |
| Mobile | 390 px |
A view wider than the space available is scaled down to fit, so desktop text looks smaller than on a real screen.
There are two separate language controls in the top bar.