Page Builder

Build and customize your marketplace pages with our intuitive page builder interface.

Quick answer

The Page Builder is where you create and edit your marketplace pages. It has three areas: a sidebar for managing pages and the component library, a preview area with device previews, and a toolbar where you click "Edit" to open the Visual Editor for fine-tuning. System pages like Listings, Cart, and Checkout are generated automatically and configured in Store Settings, not here.

Overview

The Page Builder is where you create and edit your marketplace pages. It consists of three main areas: the Sidebar for page navigation, the Preview Area for viewing your content, and the Toolbar for device previews and actions.

How It All Works Together

Building pages involves two connected tools: the Page Builder for managing pages and adding components, and the Visual Editor for fine-tuning individual elements. Here's the typical workflow:

1. Manage Pages
Create, rename, reorder pages in the sidebar
2. Add Components
Drag components from the library onto your page
3. Enter Edit Mode
Click "Edit" in toolbar to open Visual Editor
4. Fine-tune
Select elements, adjust styles, use AI assistant

Visual Editor & AI Assistant

When you click "Edit" in the toolbar, the Visual Editor opens as a sidebar on the right. Select any element to modify its properties manually, or use the AI assistant to make changes with natural language like "make this text larger" or "add a testimonials section."

Learn more about the Visual Editor

Interface Layout

Pages
Components
Hero Section
Features
Preview:/
Drag a component here
or tap one in the sidebar

Try it: add a New Page, then drag a component into the preview.

The Sidebar

The sidebar on the left shows all your marketplace pages and provides quick actions:

Drag to Reorder

Drag pages by the grip handle to change their order. The frontpage always stays at the top.

Create New Page

Click the + button to add a new page. Choose a name, icon, and whether it's protected (requires login).

Page Actions Menu

Click the three dots (⋮) on any page for options: Rename, Duplicate, Publish/Unpublish, Make Protected, Settings, or Delete.

Rename
Duplicate
Publish / Unpublish
Make Protected
Settings
Delete

Component Library

Click the layers icon to open the component library. Drag components onto your page to add them.

Browse all 28 components

Page Status Indicators

Published (Live)
Draft (Not Live)
Protected (Login Required)

The Toolbar

The toolbar sits at the top of the preview area. At a glance it tells you which page you're on and whether it's live, and it holds the device switcher, edit mode, and the publish controls:

Preview:/frontpage
Live
100%EditDiscardPublish

Page Path & Status

The left side always shows the URL path of the page you're previewing, with status badges next to it: a green Live badge when the page is published, a yellow Draft badge when it isn't, and an orange Protected badge on pages that require login. If you're ever unsure whether visitors can see the page you're editing, this is the answer.

Device Preview

Switch between Desktop (full width), Tablet (768px), and Mobile (375px) to check your layout on different screens - the current width shows next to the icons. The in-builder preview is a close approximation; for true responsive behavior, open the page with View Site (below).

Edit Mode

Click Edit to enter edit mode (the button switches to Exit Edit while you're in it). This enables element selection and opens the Visual Editor sidebar, where you can modify styles and content or use the AI assistant. Undo and redo buttons appear next to it, and the usual keyboard shortcuts work too:

⌘Z⌘⇧Z

View Site

The View Site button opens your live marketplace in a new browser tab - exactly what your visitors see, on your real domain. It's the most accurate way to test responsive behavior and check your work after publishing.

Publish & Discard

Every change you make - editing, reordering, deleting - lands in a draft first, and visitors keep seeing the current live version until you say otherwise. As soon as your draft differs from the live page, two buttons appear: Publish pushes your draft live, and Discard throws the draft away and returns to what's currently live. Experiment freely - nothing reaches your visitors until you hit Publish.

Working with Sections

Every component you add to a page is a section. Hover over any section in the preview and a small toolbar appears in its top-right corner with everything you need to rearrange, edit, or remove it:

Hero Section

Featured Listings

The section toolbar appears on hover

Testimonials

Reorder: Drag or Use the Arrows

Drag the grip handle to move a section anywhere on the page, or click the up/down arrows to nudge it one step - handy on long pages. Reordering is instant: the section moves the moment you drop it, with no page reload, and the new order saves to your draft in the background. Publish when you're happy with it.

Delete a Section

The trash button removes the whole section (with a confirmation step). No need to delete inner elements one by one.

Right-Click for Element Actions

In edit mode, right-click any element for actions like duplicate and delete. The menu header names the exact component it targets and outlines it on the page, so you always know what you're about to change.

Element · in Featured Listings
Duplicate
Restore Hidden Elements (2)
Delete Element

Restore Hidden Elements

Used "Delete Element" on something and want it back? The right-click menu's "Restore Hidden Elements" option brings back every hidden element in the section.

System Pages

Your marketplace includes automatic system pages that you don't need to create manually:

Listings

All marketplace listings with search and filters

Product Detail

Individual listing pages

Cart

Shopping cart for buyers

Checkout

Stripe-powered checkout flow

Seller Dashboard

Where sellers manage listings, orders, and complete Stripe Connect onboarding to get paid

💡 Note

System pages are previewed in an iframe and configured in Store Settings rather than the Page Builder. This ensures they work correctly with your payment and vendor systems.
Page Builder | Prometora Docs