Visual Page Builder

Design beautiful storefront pages with our drag-and-drop editor — no coding required.

Overview

The Visual Page Builder is your design studio. Build homepages, landing pages, about pages, and any custom page using a library of 80+ pre-designed components.

Getting Started

  1. Navigate to Page Builder in the sidebar
  2. Select a page to edit or create a new one
  3. The editor opens with a live preview of your page

Editor Layout

The editor has three main areas:

  • Left panel — Component library and page settings
  • Center canvas — Live preview of your page (click to select elements)
  • Right panel — Properties and styling for the selected component

Adding Components

From the Library

  1. Click the + Add button or open the left panel
  2. Browse categories: Hero, Features, Products, Testimonials, FAQ, CTA, and more
  3. Click or drag a component onto the canvas
  4. It appears in the page with placeholder content

Component Categories

  • Hero — Full-width banners, split layouts, video backgrounds
  • Features — Grid layouts, icon cards, comparison tables
  • Products — Product grids, carousels, featured products
  • Testimonials — Quote cards, review sliders, star ratings
  • FAQ — Accordion sections, two-column Q&A
  • CTA — Call-to-action sections, newsletter sign-ups
  • Content — Rich text, images, videos, spacers
  • Navigation — Headers, footers, breadcrumbs

Editing Components

Click any component on the canvas to select it. The right panel shows:

  • Content — Edit text, images, links, and data
  • Style — Colors, spacing, borders, and alignment
  • Settings — Visibility, responsive behavior, and advanced options

Responsive Design

Preview your page on different screen sizes:

  • Desktop — Full-width view
  • Tablet — Medium breakpoint
  • Mobile — Narrow view

Components automatically adapt to smaller screens, but you can fine-tune the mobile layout.

Tip

Always preview on mobile before publishing. Over 60% of e-commerce traffic comes from mobile devices.

Publishing

When you're satisfied with your design:

  1. Click Save to save a draft
  2. Click Publish to make changes live
  3. Your storefront updates instantly

Next Steps