Build Storefront Pages Visually with the Drag-and-Drop Page Builder

Administrators can now build and edit the content of any storefront page directly on the live page. Enabling the content overlay highlights editable areas; clicking one opens a full-screen visual builder with a drag-and-drop component palette, a live canvas and a properties panel. Changes are published to visitors with a single click.

Configuration

Step 1: Have the required permissions enabled

This feature adds one admin permission: Manage Editable Content, which lets a role open and use the on-page builder. This will be enabled by default, however if not (you cannot access this new behaviour), raise a support ticket quoting the permission name if you need it enabled.

Step 2: Turn on the Content Overlay on a storefront page

Sign in as an administrator and open the storefront page you want to edit, any page built on an editable template (the homepage is used here). Two small round admin buttons sit at the bottom-left of every storefront page; click the content-tools button (shown selected) to open the Content Overlay bar along the bottom of the screen. The bar has two controls: an 'Active Editable Content List' dropdown, which lists every editable area on the page so you can jump straight to one, and a 'Content Overlay' toggle. Switch the toggle on to enter in-context editing mode - the page's editable areas become interactive. These overlay controls are visible only to administrators. Ordinary visitors never see them.

Step 3: Open the builder and compose the page

With the overlay switched on, move your cursor over any editable area and an 'Edit' button appears at its top-right corner (first image). Click it to open the full-screen page builder (second image). The builder is laid out in four regions. 1) A top toolbar: Close (exit the builder), Undo and Redo, Open in admin, Change editor (switch between this visual builder and the classic editor), Preview, and Save. 2) A left-hand Widgets panel: a 'Search widgets' box to filter the list, a 'Select newly added elements' checkbox, and a Containers palette of building blocks - Section, Slider, Featured Content - Products Style and Featured Content - Categories Style. 3) The live page canvas in the centre, which shows the real page and updates as you work. 4) A right-hand properties panel, which stays empty ('Select a widget on the canvas to edit it') until you select something. To add a new block, drag a container from the palette onto the canvas where you want it; to edit what is already there, select it (next step).

Step 4: Select an element and edit its content

Click any element on the canvas to select it. Three things happen at once. First, a small inline toolbar appears on the element itself: arrows to move it up, down, left or right (reordering it among its neighbours), a duplicate button, and a delete button. Second, a breadcrumb across the top shows exactly where the element sits in the page structure - for example Section > Four Columns > Title - and you can click any level of that breadcrumb to select the parent container instead of the child. Third, the right-hand panel becomes that element's editor, with Content, Style and Advanced tabs. On the Content tab you edit the element's content: for a heading it is a single Text field (first image); for a paragraph or text block it is a full rich-text editor - bold, italic, underline, lists, alignment, insert link and insert image, with a live word count. Whatever you change is reflected on the canvas immediately: in the second image one column's heading has been edited to 'Autumn Sale - 20% Off' while the other three columns are left untouched.

Step 5: Style the element, set advanced options, and preview

The Style tab changes how the selected element looks, with no code (first image): Size (Small, Medium or Large), Style (the default styling or a custom one), Alignment (left, centre or right) and Colour (a preset colour or one of your custom brand colours), each with a short explanation beneath it. The Advanced tab is for finer, developer-level control (second image): publish or unpublish the section, add your own CSS Classes, give the element an HTML id, and add custom HTML Attributes - useful for targeting an element with site styling or analytics. When the layout is right, click Preview in the top bar to see the page exactly as a visitor will - editing is switched off in preview - and use the desktop, tablet and mobile icons to confirm the design adapts to each screen size (third image). Click Edit to return to editing.

Step 6: Save, publish and verify

When your changes are ready, click Save in the top bar to publish them to visitors. While editing you can use Undo and Redo to step back and forward, or Close to exit without saving - unsaved changes are discarded, so a page only changes for visitors once you Save. To confirm everything worked: reload the page as a visitor and check the change persists.

Existing editable-template behaviour is unchanged - the builder is an opt-in overlay. If you need any of the permissions enabled or have questions, contact Infigo Customer Support.