Page Builder Overview

The Sellrn page builder is a visual editor where you design storefront pages by dragging, dropping, and editing modular blocks called bricks. You do not need to write code to build a page.

Getting to the builder

1. Go to Dashboard → Pages.
2. Click any page in the list to open it in the builder.
3. Alternatively, click + New in the top bar and select New page to create a blank page.

The builder opens full-screen. The URL changes to /builder/:pageId.

The three-panel layout

The builder is divided into three areas:

1. Left panel — Bricks & Layers
   Contains two tabs. The Bricks tab shows every available brick you can drag onto the canvas, grouped by category (Layout, Content, Marketing, Commerce, Media, Forms). The Layers tab shows the tree of every section and brick on the current page so you can select, reorder, and navigate complex layouts.
2. Centre — Canvas
   This is your page. What you see here is what your customers will see. You can click any brick to select it, drag bricks to reorder them, and edit text inline by double-clicking.
3. Right panel — Inspector
   When a brick is selected, the Inspector shows all of its editable properties: text content, images, colors, spacing, layout options, and more. Changes in the Inspector update the canvas in real time.

The toolbar

The top toolbar contains:

• ← Back — returns to the Pages list without losing changes (the page auto-saves as a draft).
• Page name — click to rename the page.
• Viewport switcher — toggle between Desktop, Tablet, and Mobile views to see how your page looks on each screen size.
• Zoom controls — zoom in and out on the canvas.
• Undo / Redo — step back or forward through your edit history.
• History — open the full history drawer to jump to any past state.
• Preview — open the page in a new browser tab at the storefront URL (requires the page to be published or have a preview token).
• Save — saves a draft. Your page is not visible to customers until you publish it.
• AI (sparkle icon) — opens the AI canvas bar to generate or regenerate sections with AI.

How editing works

1. Click a brick on the canvas to select it. A blue outline appears and the Inspector loads its properties.
2. Edit in the Inspector — change text, images, colors, and layout options in the right panel. The canvas updates live.
3. Inline text editing — for Heading and Paragraph bricks, double-click the text on the canvas to edit it directly.
4. Drag to reorder — grab the grip handle (⠿) that appears when you hover over a brick and drag it to a new position.
5. Add a brick — drag from the left Bricks panel onto the canvas, or click the + button that appears between sections.
6. Delete a brick — select it and press Backspace or Delete, or right-click for the context menu.

Saving and publishing

The builder auto-saves to draft every time you make a change. A "Saved" indicator appears in the toolbar when the draft is current.

To make changes visible to customers, click Publish (or Save & Publish). This pushes the draft live. Customers see the published version while you continue working on the draft.

Keyboard shortcuts

Press ? in the builder to open the full keyboard shortcuts overlay. Common shortcuts include:

• Cmd/Ctrl + Z — Undo
• Cmd/Ctrl + Shift + Z — Redo
• Cmd/Ctrl + S — Save draft
• Cmd/Ctrl + K — Open command palette
• Backspace / Delete — Delete selected brick
• Escape — Deselect / close panels