Website builder (Live Editor) on Vareons
The Vareons website builder is a live editor opened on the storefront, letting merchants add sections and edit any component on any page with drag and drop, set global text, button, field, colour and font settings, manage site pages, and preview instantly on phone, tablet and desktop.
Last verified: 2026-09-18
The Vareons website builder is opened from the "Live Editor" button in the dashboard and runs on your store domain (subdomain or custom domain) at /live-editor, and a specific page can be opened directly at /live-editor/<page-name>. The editor is built for desktop screens, blocks entry from mobile, and requires the editor page to be allowed by the subscription plan.
The core idea is that the editor renders your real storefront inside a preview frame, so sections appear exactly as customers see them, with an editing layer on top for selection and dragging. Work is split across two sidebars: the left sidebar holds the Components, Design, General Settings, Overlays and AI tabs; the right sidebar is about the component you select.
To add a section, drag a card from the component library in the left sidebar and drop it where you want it, or use the "Add New Section" button in the right sidebar. Sections can be reordered by dragging, and containers can be added to place more than one component inside one column. Hovering any component reveals edit and delete controls.
To edit, select a component and the right sidebar opens its fields. Every component has two modes: Simple and Advanced — Simple shows only the essential fields, while Advanced exposes all fields including styling and advanced sections. Component text, images and links are edited from these fields, not by typing on the page directly.
Global settings control what applies to the whole site: text and headings by role (kicker, H1, H2, H3, body, button, caption), buttons, and fields. A separate Design tab sets the brand palette (primary, secondary, accent) and the site background plus the Arabic and English fonts. Any component can inherit these global settings or override them with its own custom values.
For page management, the editor bar provides a pages list with an "Add Page" button to create a page with a slug and titles, delete non-static pages, or hide a page instead of deleting it. Per-page SEO data is edited from the SEO module in the dashboard.
Finally, saving: the "Save Changes" button writes component and page edits to your live store immediately, while global settings and design have their own separate save buttons. Because saving is direct, the browser warns before leaving with unsaved changes, and there is no undo inside the editor, so saving in small steps is recommended.
Setup steps in Vareons
Open the website editor
In the dashboard click the Live Editor button to open it on your store domain at /live-editor. The editor runs on desktop screens only and may be gated by the subscription plan.
Choose the page you are working on
From the pages list in the editor bar choose the page you want, or open a specific page directly at /live-editor/<page-name>. Merchants usually start from the homepage.
Add a section
Drag a component card from the component library in the left sidebar and drop it where you want, or use Add New Section in the right sidebar to append it at the end of the page. Sections can be reordered later by dragging.
Edit the component from the right sidebar
Select the component to open its fields in the right sidebar, then edit the text, images and links. Use Simple mode for essential fields and Advanced mode for all fields including styling.
Set global settings and design
From General Settings set text, headings, buttons and fields, and from the Design tab set brand colours, site background and fonts. Each tab has its own separate save button.
Preview across devices and save
Switch between phone, tablet and desktop preview from the editor bar to check the layout, then click Save Changes to publish component and page edits to the live site.
Frequently asked questions
Does Vareons include a website builder?
Yes. A live editor opens on your store domain at /live-editor and renders the real storefront inside a preview frame with an editing layer for adding and editing sections.
Can any component on any page be edited?
Yes. Any component on any page can be selected and edited from the right sidebar to change text, images, links and styling, with Simple and Advanced modes.
Do edits publish immediately?
They publish after clicking Save Changes, which writes component and page edits to the live site, while General Settings and Design each have their own separate save button.
Is there undo in the editor?
There is no undo inside the website editor, and saving writes directly to your store, so saving in small steps is recommended. A component can always be edited again or deleted.
Does the editor work on mobile?
No. The website editor is built for desktop screens, but you can preview how the site looks on phone, tablet and desktop from the preview controls inside the editor.
Troubleshooting
1) If the editor does not open, confirm your plan allows the editor page and that you are on a desktop screen. 2) If changes do not appear on the storefront, confirm you clicked Save Changes rather than only closing the sidebar. 3) If mobile layout looks unexpected, review the component styling and per-breakpoint sizes. 4) General Settings and Design are saved with their own buttons, separate from Save Changes.