View our full Fluid Page Editor Guide Here

Fluid Page Editor: Complete User Guide

Learn how to create and customize beautiful website pages using Fluid's visual Page Editor—no coding required.

What is the Page Editor?

The Fluid Page Editor is your visual workspace for building and customizing website pages. Whether you're updating content, changing colors, or creating entirely new pages, the Page Editor makes it easy to see your changes in real-time.

What you can do:

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

Getting Started

Accessing the Page Editor

1. Go to Sidebar > Website > Theme in your Fluid dashboard
2. Click Customize on your current theme
3. Scroll down on the left side menu to Page 
4. Click Page which will open up all your pages you can edit

Creating a New Page

1. On the left hand menu, next to Templates click the + sign
2. Here you will see all available templates, including Page 
3. Select Page from the template type
4. Enter the Page Name and you can begin building

Understanding How Pages Work

Think of your pages like building blocks:

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
• You can turn any existing page into a reusable template

Common template types:

• Product Page Template - Showcase individual products
• Home Page Template - Your main website layout
• Collection Template - Display groups of products
• About Page Template - Company information
• Landing Page Template - Marketing campaigns

Sections

Sections are content areas you add to your pages. Examples include:

• 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

Blocks

Blocks are individual elements within your sections:

• 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: 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 using the "Add Section" button
• Delete sections by selecting 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 2: Customize Your Content

Editing Sections

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

Adding New Sections

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

Removing Sections

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

Common Settings You'll See

When you select an element, you'll find these customization options in the right panel:

Text Settings

• Font family, size, color, and alignment
• Line spacing and formatting

Image Settings

• Size, crop, and filters
• Overlay effects and alt text
• Upload new images

Layout Settings

• Margins and padding
• Column layouts
• Responsive behavior

Style Settings

• Background colors
• Borders and shadows
• Animations

Working with Content

Adding and Editing Text

• Click on any text element to edit it directly
• Use the text formatting toolbar for bold, italics, lists, and links
• Change fonts, colors, and sizes using the settings panel

Working with Images

• Click on image elements to select and replace them
• Upload new images through the settings panel
• Adjust image settings like size, alignment, and alt text
• Configure display options and styling

Managing Links and Buttons

• Click on buttons or links to change their destination
• Link to other pages, external websites, or email addresses
• Customize button colors, sizes, and styles
• Add hover effects and animations

Multi-Language Support (Translations)

Fluid's Page Editor supports managing content in multiple languages.

Translating Individual Text Elements

1. Click on any text element within your page preview
2. In the right settings panel, look for the "Translation" button in the top right corner
3. Click to open the Translation Panel
4. Enter or edit translations for each available language
5. Click Save - your translations automatically link to the selected text element

Managing All Translations at Once

1. Click the "Translations" button on the top navigation bar
2. A drawer opens containing all text content from your page, grouped by section
3. Edit translations for multiple sections and languages in one place
4. Click Save - all updates instantly sync with your page

Tips:

• Translations are stored per text field for precise localization
• Default text displays if a translation is missing for the user's language
• You don't need to translate everything at once

Using Global Variables

Fluid provides global variables you can use throughout your themes:

Company Information

 

liquid

{{ company.name }}          - Your business name
{{ company.logo }}          - Your company logo
{{ company.description }}   - Business description
{{ company.email }}         - Contact email
{{ company.phone }}         - Phone number
{{ company.address }}       - Business address

Page Information

 

liquid

{{ 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)

 

liquid

{{ 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

 

liquid

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

Step-by-Step Workflows

Customizing an Existing Page

1. Open your page in the Page Editor
2. Use the Layers tab to see which sections are active
3. Click on a section to select it
4. Customize using the settings panel on the right:
   • Change text content, colors, and styling
   • Upload images and adjust display options
   • Configure section-specific functionality
5. See changes update in real-time in the preview
6. Click Save and Publish when satisfied

Creating a New Template

1. Create a new template from the Templates tab in the left sidebar
2. Or start with an existing page and turn it into a template
3. Add sections to your template
4. Use the Layers tab to see which sections are in your template
5. Apply your template to new pages or modify existing ones

Making a Page into a Template

1. Open any page you want to turn into a template
2. Use the left sidebar menu to access template creation options
3. Click Save as template to make it reusable
4. Name your template so you can easily find it later

Advanced Options (Code Mode)

For users who need more control, the Page Editor offers code editing capabilities:

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 with Schemas

Schemas define what settings appear in the Page Editor. Here's a simple example:

 

liquid

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

{% schema %}
{
  "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"
    }
  ]
}
{% endschema %}

Common Setting Types

• text - Single line text input
• textarea - Multi-line text
• color - Color picker
• image_picker - Image upload
• select - Dropdown menu
• checkbox - True/false toggle

When users select your section, these settings automatically appear in the right panel.

Best Practices

Design Tips

Stay consistent - Use the same fonts and colors throughout your site

Leave breathing room - Don't cram too much content into one section

Test on mobile - Most visitors view sites on their phones (use device preview buttons)

Make navigation easy - Keep menus simple and logical

Content Guidelines

Write clear headlines - Make your message easy to understand

Use quality images - High-resolution photos make a big difference

Keep text scannable - Use short paragraphs and bullet points

Include clear calls-to-action - Tell visitors what you want them to do

Getting Started Tips

1. Pick your theme first - Choose Base, Vox, or Fluid based on your business needs
2. Start with existing sections - Use pre-built sections before creating custom ones
3. Make small changes - Edit one section at a time and preview your changes
4. Keep it simple - Don't try to customize everything at once

Quick Start Guide (5 Simple Steps)

1. Choose your theme - Start with Base, Vox, or Fluid based on your needs
2. Open the Page Editor - Click "Edit" on any page
3. Click on sections - Select what you want to customize
4. Use the settings panel - Simple controls appear automatically on the right
5. Save and publish - Your changes go live instantly

Common Questions

Which theme should I choose?

• Base: Clean and professional (great for service businesses)
• Vox: Bold and creative (perfect for agencies and portfolios)
• Fluid: Flexible and versatile (ideal for e-commerce and multi-purpose sites)

How do I change text and images?

1. Click on the section you want to edit
2. Look at the right panel for settings
3. Edit text directly or upload new images
4. Changes appear instantly in the preview

Can I undo changes?

Yes! Fluid automatically saves drafts, so you can always revert to previous versions.

My page looks different on mobile

Use the device preview buttons at the top to see how your page appears on phones and tablets. Most sections automatically adapt to smaller screens.

Need More Help?

The Page Editor is designed to be simple and intuitive. Start with visual editing and explore code mode only when you need advanced customization options.

For additional support or questions about specific features, contact our support team.