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:
- From the page editor: Click the Visual Editor button in the toolbar
- 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).
