Creating a custom page allows you to share more information about your farm or business with your customers.
1. Navigate to Shop Pages
Go to Dashboard → Business Section → Shop Pages.
2. Add a New Page
Enter your custom page title (e.g., “About Us,” “Delivery Policy,” “Our Growing Practices”).
Click “Add Page.”
✅ Your new page will appear in the list below, ready for editing.
3. Edit Your Page
Click the ✏️ Edit button next to your newly added page.
You’ll be redirected to the Shop Pages Custom Block Builder where you can design and add your content.
✨ Tip: Use this page to tell your story, highlight your values, or provide important details like delivery and return policies.
4. Understanding your tools to Build and Edit Your Page
Once you’re inside the Custom Block Builder, it’s important to understand the function of each tool in the top toolbar (from left to right):
View Modes
These tools let you preview and design your page across different devices.
Desktop View 🖥 – Default view for designing your page. Use this for the main layout and structure.
Tablet View 📱 – Allows you to adjust how your page looks on medium screens like tablets. Great for checking text wrapping and spacing.
Mobile View 📲 – Lets you optimize for small screens. Adjust font sizes, margins, and stacking order for better readability.
Builder Display
Use these views to map out, refine, and preview your page before publishing.
View Component – highlights the structure of elements on the page.
Preview – shows what your page will look like live, without the editing grid.
Full Screen – expands the builder to take up the full screen.
View Code – allows you to view and edit the HTML/CSS code directly. Great for those who are familiar with working with code, otherwise see Editing Tools.
Page Management
From saving changes to undoing edits or clearing the your site page, these controls help you stay organized and in control as you build your page.
Undo – revert your last action.
Redo – restore the previously undone action.
Clear Canvas – [caution!] removes everything from the page to start fresh.
Save – saves your current design changes.
Go Back – returns you to the previous page or Shop Pages list.
Editing Tools
These are your core builder controls for shaping your page. Use them to add, arrange, and style content exactly how you want it to appear. See related articles for more guidance on how to use each tool.
Open Style Manager – opens styling options (e.g., colors, fonts, spacing).
Customize how your elements look — including fonts, colors, spacing, backgrounds, and borders — all without writing code.
It’s where you visually style and fine-tune every part of your layout.
The Settings section lets you assign identifiers and titles to your elements for easy tracking and management.
You can configure:
ID – A unique identifier automatically assigned to each element (e.g.,
idx4). This is useful for referencing the element in code or custom styling.Title – An optional label that helps you name or describe the element (e.g., “Header Section,” “Main Button”) for better organization within the editor.
Use this section to keep your project structured and easy to navigate.
Open Layer Manager – shows a hierarchical view of all elements on the page.
View and organize the structure and hierarchy of your page elements (Body → Row → Column → Block).
Use it to toggle visibility, rename layers, or reorder components.
➡️ Learn more: Using the Layer Manager
The Block Manager is where you can Add new layout structures and content elements such as text, images, columns, or tables. Includes prebuilt blocks and templates.
➡️ Learn more: Adding Blocks and Templates
Modify Styles - The Style Editor (Modify Styles panel) allows you to write and edit custom CSS directly within the builder.
It gives you full control over your page’s appearance beyond the visual style manager.You can:
Add custom CSS rules – Define styles for specific elements, classes, or IDs.
Modify global styles – Adjust base properties such as margins, padding, colors, or typography that affect the entire layout.
Preview changes instantly – Edits made here are immediately reflected on your canvas.
Organize your code – Keep styles structured and easy to maintain with comments and indentation.
This section is ideal for users who are comfortable with CSS and want to fine-tune design details that aren’t available through the visual editor.
💡 Tip: Always preview your page in all three views to ensure your design looks professional and responsive.