Build themes for the Page Editor

The Page Editor is where merchants arrange sections and blocks on a theme template and change their settings. Everything they see in it comes from your theme’s code. This page maps each part of the editor to the code that drives it. For a screen-by-screen guide to the editor, see Page Editor in the Help Center.

How a page is built

Template
└── Sections
    └── Blocks

A template, such as product/default, holds an ordered list of sections. A section can hold blocks. Merchants edit one template at a time.

What each panel reads

Panel	What it shows	Driven by
Templates	The theme’s templates, in Storefront and CMS folders by page type	The template directories, such as `product/default/`
Layers	The sections and blocks on the current template	The template’s sections and each section’s blocks
Sections	Sections a merchant can drag onto the template	`sections/`, filtered by `enabled_on`
Theme	Theme-wide settings	`config/settings_schema.json`. See settings schema
Widgets	Widgets and sections from installed droplets	See Droplet theme extensions
Settings panel, on the right	The selected section’s or block’s settings	The schema’s `settings`. See schema components

The rail also has Site Menu, where merchants edit navigation menus, navigation bars, and footers.

Make sections available

The Sections panel lists a section under Drag to add when its schema allows the current template, and under Not available here when it doesn’t. A section without enabled_on is available on every template.

{
  "name": "Product highlights",
  "enabled_on": {
    "templates": ["product"]
  }
}

The editor does not read disabled_on. To keep a section off a template, list the templates it belongs on in enabled_on.

Make sections and blocks selectable

Fluid wraps each section in an element that the editor uses to select it, so a section needs no extra markup. Add {{ block.fluid_attributes }} to each block’s outer element. Without it, merchants can’t select the block in the preview. See blocks and components.

Change behavior in the editor

Some sections need to behave differently while a merchant edits them. A grid that shoppers see locked behind an overlay has to stay clickable in the editor, or merchants can’t select its blocks. A helper note for merchants must never reach shoppers. Branch on request.design_mode. It’s true when the Page Editor renders the page and false on the live site.

<div class="kit-grid"{% unless request.design_mode %} inert{% endunless %}>
  {% content_for 'blocks' %}
</div>

{% unless request.design_mode %}
  <div class="kit-grid__veil">Choose an enrollment pack to unlock these kits.</div>
{% endunless %}

{% if request.design_mode %}
  <p class="editor-note">Only merchants see this note. Kits unlock for shoppers once an enrollment pack is in the cart.</p>
{% endif %}

Theme JavaScript can’t read Liquid, so render the value into the page and read it from there:

<body{% if request.design_mode %} data-design-mode{% endif %}>

const inEditor = document.body.hasAttribute("data-design-mode");

Don’t work out whether you’re in the editor from the markup. Whether block.fluid_attributes is blank, and whether the page has editor attributes such as data-fluid-section-block-id, can change on the live site. A theme that relies on them can show editor-only behavior to shoppers.

Shape the settings panel

The settings panel renders a section’s or block’s settings in order:

A header setting starts a collapsible group.
visible_if shows a setting only when its condition is true.
info adds help text below a control.

See schema components for every setting type and what it saves.

Edit code in the editor

Code in the top bar switches the template to code editing. Its tabs hold the template’s Liquid, its CSS when the template has its own stylesheet, and its variables as JSON. A section opened from the Sections panel always opens in code mode. For larger changes, work locally with the Fluid CLI and preview them with fluid theme dev.

Save and publish

Most edits stay in the editor until the merchant clicks Save. The editor’s X button closes it without asking about unsaved changes, so save first. A saved template goes live only after Publish.

Saving in the Template Translations sheet publishes right away, including any other unsaved or unpublished changes on the template. See Translate a template.

Start here

Building blocks

Storefront features

Advanced

Member storefront

Build themes for the Page Editor

How a page is built

What each panel reads

Make sections available

Make sections and blocks selectable

Change behavior in the editor

Shape the settings panel

Edit code in the editor

Save and publish

​How a page is built

​What each panel reads

​Make sections available

​Make sections and blocks selectable

​Change behavior in the editor

​Shape the settings panel

​Edit code in the editor

​Save and publish

How a page is built

What each panel reads

Make sections available

Make sections and blocks selectable

Change behavior in the editor

Shape the settings panel

Edit code in the editor

Save and publish