Skip to main content

​
The builder interface

The EcomWize page builder is where you design and edit your landing pages. It is divided into three main areas: the sidebar on the left, the canvas in the center, and the config panel that appears when you select a section. The sidebar on the left edge of the screen gives you access to the main builder tools. It consists of icon buttons that open different panels:
The sections panel is your library of pre-built page components. It opens by default when you enter the builder.Sections are organized into 15 categories:
  • Saved — Your saved/bookmarked sections
  • Hero — Large header sections with headlines and CTAs
  • Product Details — Product info, variants, pricing, and add-to-cart
  • Benefits — Feature and benefit highlight sections
  • UGC — User-generated content and video sections
  • Testimonials — Customer reviews and social proof
  • Stats — Statistics and number-based sections
  • Instructions — How-to and step-by-step sections
  • Ingredients — Ingredient lists and breakdowns
  • Comparison — Before/after and versus comparisons
  • Timeline — Timeline and process flow sections
  • FAQs — Frequently asked questions accordions
  • Banners — Announcement bars, ticker banners, and CTAs
  • Advertorial — Editorial and news-style content sections
  • Listicles — Numbered list and ranking sections
Hover over a category to see thumbnail previews of each section variant. Click a section to add it to your page.You can also use the search bar at the top to find sections by name across all categories.
When you click on a section in the canvas, the sidebar automatically switches to the config panel. This is where you edit the selected section’s properties — text content, colors, images, layout options, visibility toggles, and more.Each section type has its own set of configurable properties. The config panel dynamically shows the relevant controls for the selected section.When no section is selected, the sidebar returns to the sections panel.
The media panel shows your uploaded assets (images and videos). You can upload new files, browse your library, and select media to use in sections.The media panel opens automatically when you click an image placeholder in a section, making it easy to swap images.
The layers panel shows a vertical list of all sections on your page, in order from top to bottom. You can use it to:
  • Click a section to select it and scroll to it on the canvas
  • Drag sections to reorder them
  • Duplicate or delete sections
  • Quickly navigate to any section on the page
See Layers Panel for more details.
The history panel lets you manage page versions. You can save a snapshot of your current page, browse previous versions, preview them on the canvas, and restore any version.See Undo/Redo and History for more details.
Additional sidebar actions include:
  • Brand Style — Opens the brand style editor where you can change typography, colors, spacing, and other design tokens
  • Help — Opens the support modal for getting help

​
Canvas

The canvas is the large center area where your page is rendered. This is where you see your sections laid out as they will appear when published. Key canvas features:
  • Click to select — Click any section to select it and open its configuration
  • Inline text editing — Click on text elements to edit them directly on the canvas
  • Drag to reorder — Grab the drag handle on a section to move it up or down
  • Add section buttons — Between sections, you will see ”+” buttons to insert a new section at that position
  • Section toolbar — When a section is selected, a floating toolbar appears with quick actions (duplicate, delete)
The canvas supports two modes:
ModeDescription
NormalStandard scrolling canvas. The page scrolls vertically as you would expect.
Free canvasZoom and pan mode powered by react-zoom-pan-pinch. Useful for getting an overview of long pages. Zoom in and out with scroll, pan by dragging the background.
See Canvas for a deeper look at canvas features.

​
Top toolbar

The top toolbar runs across the top of the builder and contains essential controls:
ControlDescription
Back buttonReturn to the dashboard
Page titleShows the name of the page you are editing
Undo / RedoStep backward or forward through your edit history (Ctrl/Cmd+Z and Ctrl/Cmd+Y)
Desktop / Mobile toggleSwitch between desktop and mobile preview to see how your page responds
Canvas mode toggleSwitch between normal canvas and free canvas mode
Preview modeToggle preview mode to see your page without editing UI (section borders, toolbars, etc.)
Page settingsOpen page settings (title, slug, SEO metadata)
Publish buttonPublish your page to your connected Shopify store

​
AI chatbox

The AI chatbox is available at the bottom of the canvas. It allows you to rewrite section content using AI. To use it:
  1. Select a section on the canvas
  2. Type a prompt in the chatbox (e.g., “Make it shorter”, “More emotional”, “Add urgency”)
  3. The AI will rewrite the text content of the selected section based on your prompt
Quick suggestion buttons are available for common rewrites. Each AI rewrite uses one AI credit from your account.
You can also highlight specific text within a section before using the AI chatbox. The AI will focus on rewriting just the selected text rather than the entire section.

​
Keyboard shortcuts

The builder supports keyboard shortcuts to speed up your workflow:
ShortcutAction
Ctrl/Cmd + ZUndo
Ctrl/Cmd + YRedo
Ctrl/Cmd + CCopy selected section
Ctrl/Cmd + VPaste section
Delete / BackspaceDelete selected section
EscapeDeselect current section

Canvas deep dive

Learn more about the canvas editing experience.

Keyboard shortcuts

Full list of keyboard shortcuts.