The canvas is the central area of the EcomWize page builder. It renders your page exactly as it will appear when published to Shopify, including real product prices and text styles. You interact with your page directly on the canvas - clicking sections to select them, editing text inline, and dragging sections to reorder them.
The canvas is a free workspace with pan and zoom - similar to design tools like Figma or Framer. Zoom out to see your full page layout at a glance, then zoom into the section you want to edit.
Select tool (V) - the default tool for clicking sections and editing content.
Pan tool (H) - drag anywhere to move around the canvas.
Zoom controls - zoom in and out with the controls, and check the current zoom percentage at any time.
Fullscreen - expand the canvas to fill your screen for distraction-free editing.
Use the device toggle at the top of the canvas to switch between Desktop (1440px) and Mobile (393px). Always check both views before publishing.
Click on any section in the canvas to select it. When a section is selected:
A highlight border appears around the section to indicate it is active
The config panel opens in the sidebar, showing all editable properties for that section
A floating toolbar appears near the section with quick actions like duplicate and delete
A drag handle becomes visible, allowing you to reorder the section
To deselect a section, click on an empty area of the canvas or press the Escape key.
Most text elements in sections can be edited directly on the canvas. Click on a heading, paragraph, button label, or other text to activate inline editing. A text formatting toolbar will appear, giving you access to:
Bold, italic, underline, and strikethrough
Text alignment
Text highlighting
Links
Changes you make inline are reflected immediately in the section configuration and are saved automatically.
There are several ways to add new sections to your page from the canvas:
"+" buttons - Between every pair of sections (and at the top and bottom of the page), you will see a "+" button. Clicking it opens the sections panel with the insertion point set to that position.
Sections panel - Open the sections panel from the sidebar and click any section to add it to the end of your page (or at the current insertion point).
Copy and paste - Use Ctrl/Cmd + C to copy a selected section and Ctrl/Cmd + V to paste a duplicate.
When you hover over or select a section, a floating toolbar appears with quick actions:
Action | Description |
Drag handle | Grab this to drag the section to a new position |
Duplicate | Create a copy of the section and insert it directly below |
Delete | Remove the section from the page |
Click Preview in the top toolbar to open a full-page interactive preview of your page. All editing UI - section borders, toolbars, drag handles, and the sidebar - is hidden, so you can experience the page exactly as your visitors will.
In preview:
The page renders without any editing overlays and is fully interactive
You can scroll through the page naturally
No editing actions are available until you exit preview
Drag and drop - Learn how to reorder sections by dragging.
Desktop and mobile preview - Test your page across device sizes.
