Skip to main content
Every section in EcomWize is fully customizable. Once you add a section to your canvas, you can modify its text, images, icons, colors, layout options, and more. Changes are previewed live on the canvas as you make them, so you always see exactly what your visitors will see.

​
Selecting a Section

To configure a section, you first need to select it:
  1. Click on any section on the canvas. A blue highlight border appears around the selected section.
  2. The Config Panel (right sidebar) opens automatically, displaying all editable properties for that section.
  3. The section toolbar also appears above the selected section with quick actions.
You can also select sections from the Layers panel, which shows a list of all sections on your page. Click any layer to select and scroll to that section.

​
The Config Panel

The config panel is the right sidebar that appears when you select a section. It contains all the properties you can customize for the selected section. Different section types have different available properties, but the controls work the same way across all sections.

​
Types of Property Controls

Text input fields let you edit headings, subheadings, descriptions, button labels, and other text content. Type directly into the field to update the text. Changes appear on the canvas immediately.Some text fields support rich formatting (bold, italic, highlights). For full text formatting, use inline editing directly on the canvas instead.
Color pickers let you set custom colors for backgrounds, text, accents, and other visual elements. Click the color swatch to open the picker, which offers:
  • A visual color spectrum selector
  • Hex color code input for precise values
  • Opacity/transparency controls
  • Eyedropper tool for picking colors from anywhere on screen
By default, sections inherit colors from your brand style. Custom colors set in the config panel override the brand style for that specific section.
Image fields let you set photos, graphics, and backgrounds for your section. Click the image placeholder or the upload button to:
  • Upload a new image from your computer
  • Select from your existing media library
  • Remove the current image
Supported formats include JPEG, PNG, GIF, WEBP, and SVG. Maximum file size is 5MB per image.
Icon pickers let you choose from the Phosphor icon library. Click the icon field to open the icon selection toolbar, where you can:
  • Search for icons by name (e.g., “shield”, “heart”, “truck”)
  • Browse popular icons
  • Select icon weight (thin, light, regular, bold, fill, duotone)
Toggle switches enable or disable optional features within a section. For example:
  • Show/hide star ratings
  • Show/hide a subheading
  • Enable/disable a background image
  • Show/hide CTA buttons
  • Show/hide section dividers
Number inputs with stepper buttons (+ and -) let you adjust numeric values. These are used for:
  • Star rating values (1-5)
  • Number of visible items
  • Spacing and padding overrides
  • Ticker/marquee scroll speed

​
Inline Text Editing

For the fastest editing experience, you can edit text directly on the canvas without using the config panel:
1

Select a section

Click on the section you want to edit.
2

Click on any text element

Click directly on a heading, paragraph, button label, or any other text element within the section on the canvas.
3

Edit the text

The text becomes editable. Type your new content directly. The text formatting toolbar appears above with options for bold, italic, underline, highlights, and more.
4

Click away to save

Click outside the text element or select another section to confirm your changes.
Inline editing is the recommended way to edit text content. It is faster than using the config panel text fields and gives you a better sense of how your text looks in context.

​
Live Preview

All changes you make — whether through the config panel or inline editing — are previewed live on the canvas in real time. There is no “save” or “apply” step. What you see in the builder is what your visitors will see on the published page. This includes:
  • Text changes appear character by character as you type
  • Color changes update the section immediately
  • Image swaps show the new image right away
  • Toggle changes instantly show or hide elements
  • Layout changes reflow content in real time

​
Per-Section Customization

Each section type has its own unique set of configurable properties. Here are some examples of what you can customize on specific section types:
Section TypeExample Properties
HeroHeading, subheading, button text, button URL, background image, layout alignment, star rating, badge text
BenefitCard headings, card descriptions, icons, number of columns, icon color, card background
TestimonialReviewer name, review text, star rating, avatar image, reviewer title, carousel auto-play
StatsStat values, stat labels, stat icons, number of stats, prefix/suffix text
BannerBanner text, background color, text color, ticker speed, repeating text items
FAQQuestions, answers, number of items, default expanded state
ProductProduct snippets, snippet order, snippet-specific settings

​
Undo and Redo

Every change you make to a section is tracked in the history stack. If you make a change you do not like:
  • Press Cmd+Z (Mac) or Ctrl+Z (Windows) to undo
  • Press Cmd+Shift+Z (Mac) or Ctrl+Shift+Z (Windows) to redo
EcomWize keeps up to 50 history states, so you can undo extensively without losing your ability to go back.
History is session-based. If you close the builder and reopen the page, the undo/redo history is reset. Your latest saved state is preserved, but intermediate history steps are not.

​
Tips for Efficient Configuration

Use the AI Chatbox to rewrite text content across an entire section at once. Instead of manually editing each text field, describe what you want (e.g., “Make the tone more conversational” or “Shorten all headings”) and the AI will update all relevant text fields simultaneously.
  • Start with a brand style before customizing individual sections. A well-configured brand style ensures consistent typography, colors, and spacing across all sections, reducing the amount of per-section tweaking needed.
  • Use inline editing for text and the config panel for everything else (colors, images, icons, toggles).
  • Preview on mobile regularly. Switch to mobile preview mode to check how your section looks on smaller screens, since font sizes and layouts may differ.