Shop Pages

Using the Layer Manager

The Layer Manager displays the structure and hierarchy of all elements on your page. It helps you organize, select, and manage components within the layout. Inside the Layer Manager, you can: - View element hierarchy – See how each element (such as Body, Row, Column, or Block) is nested within others. - Toggle visibility – Use the eye icon to show or hide elements. - Reorder elements – Drag and drop to rearrange elements within the layout. - Rename or group layers – Keep your workspace organized by labeling or grouping related components. This section is especially useful for managing complex layouts and ensuring that your page structure remains clean and easy to navigate. Here’s the step-by-step tutorial on how to create a simple custom page: ➡️Tutorial on how to make a basic custom page. ➡️Mobile responsiveness

Understanding the Style Manager

The Style Manager provides a complete set of tools to customize the look and layout of any element. It helps you visually control positioning, spacing, fonts, and other styling details without needing to write custom CSS. Below is a breakdown of each section in the Style Manager and what it includes: The General section handles the element’s basic structure and placement on the page. You can configure: - Display Type – Defines how the element behaves in layout (e.g., block, inline, flex). - Positioning – Controls the element’s position (static, relative, absolute, or fixed). - Margin – Sets space outside the element on all sides (top, bottom, right, left). Use this section to control how your element interacts with surrounding components. The Dimension section determines the element’s overall size and spacing. You can set: - Width and Height – Define the base size of the element. - Max Width and Max Height – Limit the maximum size for responsive layouts. - Margin and Padding – Adjust the spacing outside and inside the element. This section helps maintain consistent spacing and proportion across your layout. The Typography section defines how text appears within an element. Available options include: - Font Family – Choose the font style. - Font Size – Adjust text size for readability. - Font Weight – Control the thickness or boldness of text. - Letter Spacing – Set spacing between individual characters. - Color of the Text – Pick the text color. - Line Height – Adjust the vertical spacing between lines. - Text Alignment – Align text to the left, right, center, or justify. This section is essential for achieving clean, legible, and visually consistent text design. The Decorations section allows you to enhance the appearance of your element. You can adjust: - Background Color – Apply a solid color behind your element. - Border – Add a border around your element and select the border style (solid, dashed, dotted, etc.), width, and color. - Border Radius – Round the element’s corners for a softer look. - Box Shadow – Add shadow effects to create depth or visual contrast. - Background – Set custom backgrounds, such as gradients or images, to give your element more visual appeal. This section is ideal for adding visual emphasis and subtle design touches to make elements stand out. The Extra section offers advanced styling options. Available controls include: - Opacity – Adjust the transparency level of the element. - Transition – Set animation timing for smoother style changes (e.g., hover effects). Use this section to add polished, dynamic effects to your design. Here’s the step-by-step tutorial on how to create a simple custom page: ➡️Tutorial on how to make a basic custom page. ➡️Mobile responsiveness

Open Blocks: Building blocks of your Shop Pages

Open Blocks Within the Block Manager, you’ll find several categories: - Basic - adding blocks for images, text, videos and more... - Extra - Tables - Templates - Blocks Basic Contains essential building blocks to structure your page. - 1 Column / 2 Columns / 3 Columns / 2 Columns 3/7 – Create responsive row layouts with different column configurations. - Text – Add text blocks for headings, paragraphs, or any written content. - Link – Insert clickable text or buttons that direct users to other pages or URLs. - Image – Add and customize image elements. - Video – Embed videos from sources like YouTube or Vimeo. - Map – Insert an interactive map for location display. - iFrame – Embed external content or widgets using an iframe code. Extra - Carousel – Add an image or content slider to display multiple items interactively. Tables - Table – Insert structured data or comparison tables to organize information neatly. Templates The Templates section includes pre-designed layouts such as the Product Description template. You can use these ready-made sections to quickly insert structured content without designing from scratch. Blocks The Blocks section contains reusable content blocks — such as the Product Description block — that you can drag into your layout. These blocks can be customized, duplicated, or reused across multiple pages to maintain consistency in design and structure.

How to Create a Custom Page: Basics

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. ➡️ Learn more: Understanding the Style Manager - 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.