Drag-and-drop editing of the storefront.

When the storefront editor opens in the panel, the left side shows the page layers, the centre shows the live preview, and the right side displays settings for the selected module. Drag modules to move them either in the layer list or directly in the preview; changes are automatically saved as drafts and remain invisible in your store until you publish.

Store manager

How to edit the storefront using drag-and-drop?

When the storefront editor opens in the panel, the left side shows the page layers, the centre shows the live preview, and the right side displays settings for the selected module. Who can do this: Store manager. Drag modules to move them either in the layer list or directly in the preview; changes are automatically saved as drafts and remain invisible in your store until you publish. Hold down the dotted handle to the left of the module you wish to move.

What is the storefront editor?

The editor allows you to edit the top bar, header, homepage, and footer on the same screen. The preview is rendered at real device width and scaled to fit the screen. Use the Desktop, Tablet, and Mobile buttons at the top to switch devices. 4 Every change you make is automatically saved to the draft after a short delay. The draft remains invisible to customers until you click Publish. 5

Storefront editor: layers on the left, selected Advantages module toolbar and size handle in the preview centre, and module settings (demo data) on the right. — With demo data.

Moving in the layer list

Press and hold the dotted handle to the left of the module you wish to move. 1
Move the cursor to the desired location. A purple line appears where the module will be dropped. 6 If the list is long, it scrolls automatically as you approach the edges.
Release. The module snaps into place where the line appears, and the preview refreshes.

Slider module being dragged in the layer list, with a purple line indicating the drop target (demo data) — With demo data.

If you change your mind while dragging, press Esc; the module stays in place. 7 To move without a mouse, tab to the handle and use the up and down arrow keys; each press moves the module by one position. Blocks in the header and footer can also be moved between slots (left, centre, right, etc.) within the same region.

Moving and resizing in the preview

Clicking a module in the preview highlights it with a purple border and shows a toolbar above. 2 The toolbar displays the name of the selected object (e.g., "Advantages"); in nested structures, names of parent objects are also listed, and clicking one selects it. When switching devices, the preview scrolls to the selected object. Drag the module to move it, or use the move icon in the toolbar. Rows, columns, and items within custom layout modules can also be moved in the same way.

Drag the square handles at the edges and corners of the selected object to adjust its width and minimum height. 3 Size adjustments are saved for the currently selected device; setting a width on desktop does not break the mobile view. Double-clicking a handle resets the size to automatic.

Esc: selects the parent object in nested structures; cancels dragging or resizing operations; closes open module or block libraries.
Delete: removes the selected object. Ctrl+D: duplicates. Ctrl+C / V: copies and pastes.
Alt+↑ / ↓ (on side-by-side objects ← / →): shifts the selected object by one position.
Ctrl+Z: undo. Ctrl+Shift+Z: redo. Text typed consecutively into a field is undone in a single step.

Hidden and timed modules

Modules that are hidden or whose display time has not yet arrived are not drawn in the preview but remain in the layer list. When moving a module in the preview, its position is determined relative to neighbouring modules at the drop point; the order of hidden modules in between is preserved. Start and end times in the Visibility tab are displayed and saved in your local timezone.

Copying and pasting to another page

Copy the selected module, block, or row/column/item within a custom layout using Ctrl+C. Select an object where you want to paste and press Ctrl+V. The copy is inserted immediately below (or to the right in a column) the selected object. The copied content stays in your browser's clipboard, allowing you to switch to another homepage design and paste it there. Homepage modules paste into designs, while header and footer blocks paste into their respective areas; if pasting into an incompatible location, the editor explains why. On Mac, use ⌘ instead of Ctrl.

Saving and connection loss

The status message in the top right indicates where the save operation is occurring: Saving…, Draft saved, or Could not save. If your internet connection drops, your changes are not lost; once the connection is restored, the editor automatically retries saving. If you try to leave the page with unsaved changes, the browser warns you.

Simultaneous editing

If another user saves the same section in a different tab while you are editing, changes are not silently overwritten. The editor displays a warning and asks which version to keep: Load theirs opens the other record and discards unsaved changes in this tab; Save mine saves the current state in this tab.

Publish

When your changes are ready, click Publish; the pending final change goes live. If you do not want to keep the draft, use Discard changes to revert to the last published version in the store. You can access previous versions via the History button.