The Visual Editor
Learn the builder interface, preview modes, save behavior, and publishing model.
The Visual Editor is where you shape the storefront customers will see. It keeps page structure, theme design, navigation, preview, and selected-section editing in separate surfaces so each decision has a clear place.
Layout overview
| Area | Position | Purpose |
|---|---|---|
| Top bar | Top | Save, publish, visit the store, and understand draft or live state. |
| Pages | Left rail | Select pages, select sections, and control page or section visibility. |
| Design | Left rail | Review the active theme and any theme-level settings it exposes. |
| Navigation | Left rail | Choose which enabled pages and category links appear in the header. |
| Site | Left rail | Store identity, SEO, analytics, Discord, and site-level settings. |
| Library | Left rail | Uploaded assets and reusable images (Pro and Ultra). |
| Preview | Center | Review the storefront in desktop, tablet, and mobile sizes. |
| Properties panel | Right | Edit content, layout, and style for the selected section, or review the page overview. |
| Bottom bar | Bottom | See the selected page or section, viewport size, undo/redo, and the shortcuts dialog. |
Pages and navigation are different
Pages controls what exists on the storefront. Navigation controls what appears in the header. A page can exist without being linked in the header.
Working with the preview
The center preview is the fastest way to work like a customer. Click a section to select it; the properties panel opens with the controls that belong to that section or page.
Switch between responsive modes using the device icons in the preview toolbar above the canvas:
- Desktop: Full-width view
- Tablet: Medium breakpoint
- Mobile: Narrow viewport
Use preview mode for every serious change before publishing. A layout that feels balanced on desktop can still need work on mobile.
Keyboard shortcuts
| Shortcut | Action |
|---|---|
Ctrl + S | Save all changes |
Ctrl + P | Publish / unpublish |
Ctrl + Shift + P | Toggle edit/preview mode |
Ctrl + K | Command palette |
Ctrl + Z | Undo |
Ctrl + Shift + Z | Redo |
Ctrl + \ | Toggle the left panel |
1-5 | Open Pages, Design, Navigation, Site, or Library |
Escape | Close dialogs and panels, then deselect |
? | Show the full shortcut list |
Cmd works in place of Ctrl on macOS.
Saving and publishing
Changes are not auto-saved. The preview can show your latest unsaved work, but persistence requires Save.
Use Ctrl + S or the save action in the top bar when the change is ready. Publishing is separate, so an unpublished store can keep saved draft changes without becoming public.
If a store is already published, saved storefront changes update the live storefront. Review the customer path first, then save.
When publishing with pending changes, the editor saves first and then publishes the storefront.