Custom Pages

Official guide · English · Version 9c253d0cf11816df

The Pages manager lets you create and manage custom static pages for your storefront. These pages are ideal for content like About Us, Contact, Terms & Conditions, Privacy Policy, Shipping Information, and any other custom content your store needs.

Navigate to Storefront > Content > Pages to access the page manager.

Page List

The main view shows all your custom pages in a list format. Each page entry displays:

  • Page title with its URL slug (e.g., /about-us)
  • Draft label if the page is not published
  • Visual label if the page was created with the visual editor (GrapesJS)
  • Action buttons for editing (rich text editor), visual editing, and deleting

Click Add Page in the top-right corner to create a new page.

Creating a Page

Click "Add Page"

This opens the full-screen page editor.

Fill in the page settings

At the top of the editor, fill in the basic settings:

Field Description
Title The page title displayed in the browser tab and as the main heading
Slug The URL path for the page (auto-generated from the title). Only lowercase letters, numbers, and hyphens are allowed. The page will be accessible at /pages/your-slug.
Published Toggle whether the page is live on your storefront
Show in Navigation Toggle whether the page appears in the storefront navigation menu

Configure SEO settings

The SEO card provides fields for search engine optimization:

Field Limit Description
Focus Keyword 100 chars The primary keyword you want this page to rank for
Meta Title 60 chars The title displayed in search engine results. A character counter turns yellow at 50 and red at 60 characters.
Meta Description 155 chars The description displayed in search results. A character counter turns yellow at 120 and red at 155 characters.
Canonical URL -- The canonical URL for this page (useful if the content exists at another URL)
OG Image -- The image URL displayed when the page is shared on social media
No Index -- Toggle to tell search engines not to index this page

Use AI to generate SEO

Click the Generate SEO button (wand icon) in the SEO card header to let AI automatically generate:

  • Meta title
  • Meta description
  • Focus keyword
  • Suggested slug

The AI analyzes your page title and content to create optimized SEO metadata.

SERP Preview

When a meta title or page title is entered, a Search Preview card shows how your page will appear in Google search results, including the title, URL path, and meta description.

Write your page content

Use the TipTap rich text editor below the settings cards to write your page content. The editor supports:

  • Headings (H1-H6)
  • Bold, italic, underline, strikethrough text
  • Ordered and unordered lists
  • Blockquotes
  • Code blocks
  • Links (via the link insertion dialog)
  • Images (via the image upload dialog)
  • Horizontal rules
  • Text alignment

Save the page

Click Create (for new pages) or Update (for existing pages) in the top-right corner.

AI Content Generation

Click the Generate with AI button (sparkles icon) to open the AI content generation dialog. This lets the AI create an entire page including:

  • Full HTML content with proper formatting
  • Meta title and description
  • Focus keyword
  • Suggested URL slug
  • Embedded images with alt text

Simply provide a topic or title, and the AI will generate professional content for your page.

Info: AI-generated content is a starting point. Always review and customize the generated content to match your brand voice and ensure accuracy.

Visual Editor

Every page can also be edited using the Visual Editor (GrapesJS), a full drag-and-drop page builder. You can switch to the visual editor in two ways:

  1. From the page editor: Click the Visual Editor button in the toolbar
  2. From the page list: Click the layout icon next to any page

When switching to the visual editor for a new page, the page must have a title and slug first. The system will automatically create the page before opening the editor.

See the Visual Editor page for complete details on using the GrapesJS editor.

Editing a Page

Click the pencil icon on any page

This opens the page in the rich text editor with all its existing content and settings pre-filled.

Make your changes

Edit the title, slug, SEO settings, or content as needed.

Click "Update"

Save your changes. The page updates immediately on your storefront (if published).

Deleting a Page

Click the trash icon on any page in the list. A confirmation dialog will appear. Once confirmed, the page is permanently deleted.

Warning: Deleting a page is permanent and cannot be undone. Make sure you no longer need the page before deleting it.

Page Visibility

Pages have two visibility controls:

Setting Effect
Published When on, the page is accessible at its URL. When off, the page returns a 404 error to visitors.
Show in Navigation When on, the page link appears in the storefront navigation menu. When off, the page is still accessible via its direct URL but not linked in the menu.

This means you can create pages that are accessible only via direct link (published but not in navigation), or draft pages that are completely hidden (unpublished).