Visual Editor Overview
What the visual editor is, when to use it, and a tour of the three panels.
The visual editor is where you customize how your storefront looks and what's on each page — drag sections into place, change colors, swap images, edit copy — all without writing code.
Opening the editor
- Go to Themes in your dashboard.
- On the published theme card, click Edit theme.
- The editor loads your storefront in a live preview. First load takes a couple of seconds.
The three panels
Left — section list
Every section on the current page, in the order it appears on the storefront. Drag to reorder, click the eye icon to hide one without deleting it, click the trash icon to remove it. The Add section button at the bottom opens the section library.
Deep dive: Adding & reordering sections · Working with blocks
Center — live preview
Your storefront, rendered live. Every change you make in the inspector appears here within a moment. Click any section in the preview to jump to it in the section list and the inspector. Use the device picker in the toolbar to check how the page looks on tablet and mobile.
Deep dive: Mobile & responsive preview
Right — settings inspector
Every setting for whichever section you have selected — text fields, image pickers, color choosers, sliders, dropdowns, and more. Edit a value and the preview updates. With nothing selected, the inspector shows theme settings instead — global look-and-feel knobs that apply to your whole storefront.
Deep dive: Editing section settings · Color schemes & theme colors · Typography & theme settings
What can I edit?
The page picker in the toolbar lists every page your theme provides — Home is always there, but the rest depends on which theme you're using. A theme might ship with a product page, a cart page, a 404, custom CMS pages, account pages, and so on. Header and footer are global and edited the same way.
Drafts and publishing
Your live storefront keeps serving the previously-published version until you explicitly publish, so you can experiment freely — bad changes never reach customers until you say so.
Changes you make in the editor stay in-memory until you click Save draft or Publish. Save draft creates a new version you can come back to; Publish makes that version live. You can roll back to any earlier version if a publish doesn't work out, and you can share a private preview link before publishing so teammates can review.
Deep dive: Saving, publishing & snapshots
A typical first edit
- Open the editor on Home.
- Click the hero section in the preview — the inspector loads its settings.
- Change the headline. Watch the preview update.
- Click Save draft.
- Click Preview to open a private URL in a new tab — same view your customers will see.
- When you're happy, click Publish. The change is live within seconds.
FAQ
What if I publish something that breaks the storefront?
Open Themes and restore an earlier snapshot. Restoration is instant — your storefront flips back to that exact state. No data is lost, and your broken draft is preserved separately so you can fix it later.
Why is the checkout page limited?
Checkout handles payment information, so customization is restricted to preserve security and prevent accidents like hiding the Pay button. You can change colors, add a banner above the form, and edit copy — but not reshape the payment form itself.
Can two pages share the same section?
Each page has its own section list, so a hero on Home and a hero on Category are separate sections you configure independently. If you want them identical, copy the settings between them.
I can't find the section I want.
The section library is filtered by what your current theme provides. If a section type you need isn't available, switch themes (Themes → Edit theme on a different theme) or build a custom section in the code editor.
Updated recently