Skip to main content
The Fluid Page Editor is a browser-based visual editor that lets you build and customize pages without writing code. You can add, reorder, and configure sections through a point-and-click interface, see every change reflected in a live preview instantly, and publish when you’re ready — all from your Fluid admin.

​
Getting Started

1

Navigate to Pages

In your Fluid admin, open the sidebar and go to Website → Pages.
2

Open the Editor

Click Edit next to an existing page, or click Create New Page to start from scratch.
3

Start Customizing

The editor opens with three panels — left, center, and right. Each panel serves a distinct purpose, described below.

​
Interface Overview

The Page Editor is divided into three panels that work together to give you full control over your page layout and content. Left Panel — The left panel has three tabs:
  • Templates — Browse and apply available templates for the current page type. Switching templates changes the underlying structure of the page.
  • Sections — A catalog of all sections available in your theme. Click any section to add it to the page.
  • Layers — A list of every section currently active on the page. Use this tab to reorder sections by dragging, or to select a section that’s hard to click in the preview.
Center Preview — The center panel shows a real-time rendering of your page as it will appear to visitors. Click any section directly in the preview to select it and open its settings in the right panel. Right Panel — When a section is selected, the right panel displays all of its configurable settings, driven by the section’s JSON schema. Settings vary by section type and may include text fields, image pickers, color selectors, toggles, and more.

​
Working with Sections

Pages in Fluid are built from a hierarchy of composable pieces:
A template defines the overall structure of a page type. Within a template, sections are the major visual building blocks — each one is a self-contained unit of layout and content. Sections can contain blocks, which are repeatable items within a section (for example, individual slides in a carousel or testimonials in a testimonials section). Common section types include:
  • Hero — Full-width banner with headline, subheading, and call-to-action
  • Gallery — Image grid or carousel
  • Text — Rich text content block
  • Form — Contact or lead capture form
  • Testimonial — Customer quotes or reviews

​
Adding and Removing Sections

To add a section, open the Sections tab in the left panel and click the section you want. It is added to the bottom of the page by default. You can then drag it into the desired position using the Layers tab. To remove a section, click the section in the preview or select it in the Layers tab, then press the delete icon or use the remove option in the right panel toolbar.
Fluid automatically saves drafts as you work. You won’t lose changes if you close the editor or navigate away — your in-progress edits are preserved until you publish or discard them.

​
Review and publish previous versions

Open the History panel to review earlier versions of the current template. Select a version to load its snapshot in the editor. Use the version’s ellipsis menu for these actions:
  • Click Changes to open the comparison view. Choose any two versions to compare their Liquid and CSS changes.
  • Click Publish to make the selected historical snapshot live.
Publishing an earlier version does not erase the other entries in History, so you can continue to review and compare them.

​
Translations

Fluid’s Page Editor has built-in support for multi-language content. To edit a translation for a specific element, click that element in the preview to select it, then click the Translation button that appears in the right panel. A language selector lets you enter content for each of your active languages independently. For a higher-level view, click Translations in the top navigation bar of the editor to open a full table of every text element on the page alongside all of its language variants. This is the fastest way to audit or complete translations across an entire page at once.

​
Code Mode

For advanced users who need to go beyond the visual editor, Code Mode provides direct access to the underlying template code. Switch to Code Mode using the toggle in the editor toolbar. It exposes four tabs:
  • HTML (Liquid) — The Liquid template markup for the current template or section
  • CSS — Scoped styles applied to this page or section
  • Variables — A live view of the Liquid variables available in the current page scope
  • Preview — A rendered preview of your code changes before you save
Test your pages across screen sizes using the device preview buttons in the editor toolbar. Switch between desktop, tablet, and mobile views to catch layout issues before publishing.