Fluid Page Editor - User Guide

What is the Page Editor?

The Fluid Page Editor is your visual workspace for customizing website pages. It's designed for theme engineers who want to create beautiful, professional pages without complex coding.

With the Page Editor, you can:

Edit pages visually by clicking and selecting sections
See changes instantly as you make them
Customize content easily using simple settings panels
Choose from three professional themes (Base, Vox, Fluid)
Access advanced options when you need more control

Getting Started

Choosing Your Theme

Fluid provides three professionally designed themes to choose from:

Base Theme - Clean and minimal design perfect for any business
Vox Theme - Modern and bold styling ideal for creative businesses
Fluid Theme - Versatile design that adapts well to your brand

Each theme comes with pre-built sections and layouts that you can customize to match your needs.

Accessing the Page Editor

Go to Sidebar > Website > Pages in your Fluid dashboard
Click "Edit" on any existing page, or "Create New Page"
The Page Editor opens with your page ready to customize

Your Page Editor Interface

The editor has three main areas:

Left panel with Templates, Sections, and Layers tabs
Center preview showing your page as visitors will see it
Right panel with settings to customize selected sections

How Pages Work

Think of your pages like building blocks that stack together:

Your Page uses a Template which contains Sections that have Blocks

Pages and Templates

In Fluid, all pages are templates. This means:

Every page you create can serve as a template for other pages
You can create new templates from the left sidebar menu
You can turn any existing page into a reusable template

Common types of templates you might create:

Product Page Template - For showcasing individual products
Home Page Template - Your main website layout
Collection Template - For displaying groups of products
About Page Template - For company information pages
Landing Page Template - For marketing campaigns

Sections

Sections are content areas you can create for your pages. Examples of sections you might build:

Hero Section - Large banner with headline and call-to-action
Gallery Section - Showcase images or videos
Text Section - Written content and descriptions
Form Section - Contact forms and data collection
Testimonial Section - Customer reviews and quotes

Each section you create can have its own customizable settings.

Blocks

Blocks are elements you can add within your sections. Examples include:

Text blocks for headings and paragraphs
Image blocks for photos and graphics
Button blocks for links and calls-to-action
Video blocks for embedded media

Using the Page Editor

Step 1: Choose Your Approach

Visual Editing (For everyone):

Point and click to edit your pages
No coding knowledge needed
Perfect for customizing content, images, colors, and layout

Code Editing (For more customization):

Edit the underlying code when you need deeper control
Access advanced styling and structure options
Requires HTML and Liquid knowledge

Step 2: Navigate the Interface

Left Panel - Three Tabs:

Templates: Browse existing templates or create new ones
Sections: View sections you've created for your theme
Layers: See which sections are active on the current page

Center Preview:

Shows your page exactly as visitors will see it
Click on any section to select it
Changes appear instantly as you make them
Add sections by clicking the "Add Section" button - opens a modal with available sections
Delete sections by selecting them and using the delete option

Right Panel - Settings:

Automatically shows options for the selected section
Simple controls for text, images, colors, and layout
Settings change based on which section you've selected

Step 3: Customize Your Content

Editing Sections:

Click on any section in the preview or Layers tab
Settings for that section appear in the right panel
Make your changes using the simple controls
Watch your changes appear instantly in the preview

Adding New Sections:

Click the "Add Section" button in the center preview area
A modal opens showing all available sections for your template
Browse through the section options and click to select one
The new section is added to your template and appears in the preview
Customize the new section using the settings panel

Removing Sections:

Click on the section you want to remove in the preview
Use the delete option to remove it from your template
The section disappears from both the preview and the Layers tab

Common Settings You'll See:

Text content - Edit headlines, descriptions, button text
Images - Upload photos, logos, background images
Colors - Change text colors, background colors, button colors
Layout - Adjust spacing, alignment, and positioning

Global Variables

Fluid provides global variables that you can use throughout your themes to access important information:

Page Information

{{ page.title }} - Current page title
{{ page.content }} - Page content
{{ page.url }} - Page web address
{{ page.featured_image }} - Main page image

Product Information (for product pages)

{{ product.name }} - Product name
{{ product.price }} - Product price
{{ product.description }} - Product description
{{ product.images }} - Product photos
{{ product.available }} - Whether product is in stock

Formatting Helpers

{{ product.price | money }} - Format price as currency
{{ image.url | img_url: '300x200' }} - Resize images
{{ product.created_at | date: '%B %d, %Y' }} - Format dates

Advanced Options (Code Mode)

For theme engineers who need more control:

Code Editor Features:

HTML Tab: Edit page structure and add Liquid variables
CSS Tab: Create custom styles and layouts
Variables Tab: Set theme-wide settings and colors
Preview Tab: Test your changes before publishing

Creating Custom Sections (Advanced)

What are Schemas?

Schemas are simple instructions that tell the Page Editor what settings to show. When you create a section, you add a schema at the end that defines what options users can customize.

Simple Schema Example

<div class="my-section">
  <h2>{{ section.settings.title }}</h2>
  <p>{{ section.settings.description }}</p>
</div>

{
  "name": "My Custom Section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Section Title"
    },
    {
      "type": "textarea",
      "id": "description", 
      "label": "Description"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background Color"
    }
  ]
}