The Visual Editor
Learn the builder interface — panels, preview modes, and keyboard shortcuts.
The Visual Editor is where you build and customize your webstore. It's a three-column layout designed for real-time editing with instant preview.
Layout overview
| Area | Position | Purpose |
|---|---|---|
| Sections Panel | Left | Manage, reorder, and toggle sections |
| Design Panel | Left (tab) | Customize theme colors, fonts, and borders |
| Live Preview | Center | Real-time preview of your webstore |
| Inspector Panel | Right | Edit the selected section's content and settings |
Working with the preview
The center preview shows exactly what your customers will see. Click any section to select it — the Inspector panel will open with editable fields for that section.
Switch between responsive modes using the device icons in the top bar:
- Desktop — Full-width view
- Tablet — Medium breakpoint
- Mobile — Narrow viewport
Keyboard shortcuts
| Shortcut | Action |
|---|---|
Ctrl + S | Save changes |
Ctrl + P | Toggle publish state |
Ctrl + \ | Toggle left panel |
Escape | Deselect current section |
Saving and publishing
Changes are not auto-saved. Use Ctrl + S or click the save icon to persist your edits. Publishing is a separate action — you can save drafts without making them live.
The preview always reflects your latest unsaved changes, so you can experiment freely before saving.