> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fluid.app/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> For new direct REST integrations, use the v2026-04 surfaces. The @fluid-app FairShare SDK continues to use its own published public-v2025-06 contract.
> Authenticate with the header Authorization: Bearer <token>; public storefront read endpoints require no auth.
> To sign a new merchant up for Fluid programmatically, call POST https://api.fluid.app/api/company with no credentials, as described in /api/agent-signup. Do not automate the signup form or book a demo. The merchant must open the emailed sign-in link and create an API token before authenticated calls are possible.
> Lists use cursor pagination via the page[cursor] and page[limit] query params; follow meta.pagination.next_cursor until it is null.
> When the same operation exists on more than one surface, use the newest: dated API versions are newer than unversioned ones, and later dates win (v2026-04 > v2025-06 > unversioned v0/v1.1). Fall back to a legacy or unversioned operation only when no newer versioned equivalent exists — the company-v0 notes below list the known superseded operations. /api/company/v1 and /api/v1/... paths are documented in no spec here and must never be used (/api/v1.1/... is distinct and documented in company-v0). Use page/per_page offset pagination only where a spec documents it — in practice the unversioned company-v0 admin surface; every versioned surface uses cursor pagination.
> Navigation menu management is documented in themes/navigation-menus. These unversioned admin endpoints (/api/menus and nested menu_items) are verified against the implementation but are not yet in the synced OpenAPI specs. Use that reference for menu payloads and its flat page/per_page pagination; missing spec coverage does not make these endpoints unavailable.
> The OpenAPI specs under api-reference/ are the authoritative contracts; prefer them over prose when in doubt. api-reference/storefront-v2026-04.yaml covers the v2026-04 storefront surface (/api/v202604/... paths); api-reference/checkout-v2026-04.yaml covers the v2026-04 checkout surface (/api/checkout/v2026-04/... paths — carts, cart auth, discounts, items, subscriptions, orders, enrollments, and store config); api-reference/public-v2025-06.yaml covers the Public SDK surface used by the @fluid-app FairShare SDK, including its parallel cart lifecycle, browser integrations, versioned payment callbacks, unversioned public utilities, and the cart price-override operation; api-reference/payment-v2026-04.yaml covers the v2026-04 payment gateway admin surface (/api/payment/v2026-04/... paths, bearer-authenticated — gateway CRUD, gateway purchase/authorize/$0-verify, transaction list/show and capture/void/credit, and merchant payment configuration); api-reference/payments-v2026-04.yaml covers the v2026-04 cart payment surface (/api/payments/v2026-04/carts/{cart_token}/... paths, authenticated by the cart token in the path with no bearer — payment-method selection, VGS card tokenization, 3D Secure verification, and PayPal/Braintree/Klarna/Apple Pay flows); api-reference/commerce-v2026-04.yaml covers the v2026-04 commerce order-editing surface (/api/v202604/orders/{order_id}/edits paths, bearer-authenticated — post-checkout order edits that atomically insert items and add adjustments/discounts, with an optional dry-run preview); api-reference/webhooks-v0.yaml covers the unversioned webhooks surface (/api/... paths — webhook registration, delivery payloads, callback registrations, company events, and webhook/callback schemas); api-reference/company-v0.yaml covers the legacy unversioned company admin surface (/api/... paths, bearer-authenticated — company settings and management, customers, users, roles, subscription plans, subscription bundles, subscriptions, media, pages, catch-ups, inventory levels, domains, agreements, and admin order actions). company-v0 caveats: it is the legacy v0 admin contract and its lists use flat page/per_page offset pagination, which is expected there despite the general cursor-pagination rule; where an operation exists in both company-v0 and a versioned spec, prefer the versioned spec — the subscriptions lifecycle (list/create/show/update, cancel, pause, reactivate, resume, retry, skip, failed-cycle-waiver, discounts) and subscription bundles are superseded by checkout-v2026-04, and company pages/media CRUD plus the public pages, categories, products, and media list endpoints are superseded by storefront-v2026-04. Subscription plan management (/api/subscription_plans, resource-wrapped {"subscription_plan": {...}} bodies) exists only in company-v0. api-reference/members-v2025-06.yaml covers the v2025-06 unified Member identity surface (/api/v2025-06/members/... paths, bearer-authenticated — member list/create/show/update, lookup by email/username/external_id/legacy_customer_id, member-type assignment, and the sponsor genealogy read). Prefer it over the customers and reps surfaces when the member type matters: /customers does not serialize member_type. api-reference/analytics-v2026-04.yaml covers the v2026-04 Home dashboard analytics surface (/api/v202604/analytics/dashboard/... paths, bearer-authenticated — read-only endpoints for the Home > Overview, Home > Live, and Home > Field tabs, each accepting an optional country ISO alpha-2 query param that scopes aggregations to a single country).
> api-reference/analytics-v0.yaml covers the unversioned analytics surface that backs the fluid-admin Traffic tab (/api/analytics/... and /api/analytics/traffic/... paths, bearer-authenticated — the legacy shares/views/visitors summary plus traffic overview, ranked campaigns, sources, geographies, flows, and per-rep breakdown, all sharing one reporting-period contract).
> Successful responses wrap the resource payload alongside a top-level integer status and a meta object.
> Portal Definition authoring edits and synchronizes the portal JSON resource graph. Widget Package authoring builds either a company-owned or Droplet-owned Remote DOM package. These are separate contracts; do not imply that one defines the other.
> For Widget Package worker code, use only @fluid-app/portal-sdk/widgets/worker. Use only the Portal Definition and Widget Package workflows and public entry points documented here; do not infer support for undocumented surfaces.
> Every portal function and declarative capability used by a widget must appear in that widget's uses array. Use the same typed function value in uses; do not invent capability-name strings.
> Widget styling must use the portal's semantic theme variables for colors, typography, spacing, radii, borders, focus, and charts whenever a token represents the visual decision. Do not create a separate light or dark palette or duplicate theme controls as widget properties.
> Prefer worker-safe Fluid UI components exported by @fluid-app/portal-sdk/widgets/worker when they fit the interaction. When no exported component fits, use semantic HTML, accessible behavior, and the portal theme variables.
> A Portal Definition push updates the remote working definition. A portal version is an immutable snapshot, and activation is a separate live release operation.

# Page Editor

> Edit your theme's page templates: arrange sections and blocks, change their settings, preview by device and language, then save and publish.

Use the Page Editor, also called the Visual Editor, to change how your storefront pages look. You work on one theme template at a time, such as your home page, a product page or a custom page, by arranging its sections and changing their settings.

## Where to find it

In the admin sidebar, under **Platforms**, click **Website** > **Theme**, then click **Customize** on your theme. The editor opens on the theme's default home page template.

You can also open it from the sidebar: under **We-Commerce**, click **Storefront** > **Pages**. Open a page and click **Open Visual Editor**. To open your home page template instead, click **Open Editor** above the list.

## What's on the screen

The editor has a top bar, a rail of panels on the left, the preview area in the middle and a settings panel on the right.

### Top bar

* **X** and the breadcrumb take you back to where you opened the editor, such as **Themes** or **Pages**.
* Next to **X**, two panel buttons hide the left and right panels. Click the left button again to show the left panel. To reopen the right panel, click the gear.
* The template's name, then its status: **Unsaved changes**, or **Saved** with how long ago.
* The three-dot button opens **Theme Actions**: **Edit Code** opens the theme's code editor in a new tab, and **View Site** opens your storefront in a new tab.
* On most page types, **Theme Actions** also has **Clear Cache**, which starts clearing the storefront cache for that page type, if your role allows it. See [Why does Clear Cache fail?](#clear-cache)
* **Design** and **Code** switch between visual editing and code editing.
* **Undo** and **Redo**. The shortcuts are Cmd+Z or Ctrl+Z to undo, and Cmd+Shift+Z or Ctrl+Y to redo.
* The gear opens the template settings in the right panel.
* **Translate** opens the **Template Translations** sheet.
* **History** opens **Version history** in the right panel.
* **Git revision** opens **Theme revisions** for the whole theme. Read [What does Git revision do?](#git-revision) before you use it.
* **Preview** opens the version you're viewing on your storefront, in a new tab.
* **Save** and **Publish**. See [Save and publish](#save-and-publish).

### Left rail

The rail has six panels, in this order. Click an icon to open its panel, and click it again to close the panel.

* **Site Menu**: your menus, **Navigation Bars** and **Footers**. Click **+** to create a menu, or click a menu to edit its links, then click **Save menu**. Open a navigation bar or footer to edit its settings.
* **Templates**: opens by default. Your templates, grouped under **Storefront** and **CMS**.
* **Layers**: the sections and blocks on the template you're editing.
* **Sections**: the sections in your theme.
* **Theme**: settings that apply to the whole theme, in groups your theme defines. The preview area updates as you change them. Read [Save and publish](#save-and-publish) before you save changes here.
* **Widgets**: widgets and sections from droplets you've installed.

#### Templates panel

* The **Storefront** folders are **Home Page**, **Product**, **Enrollments**, **Collection Page**, **Collection**, **Category Page**, **Category**, **Shop**, **Join Page**, **Cart**, **Page** and **Error Page**. The **CMS** folders are **Playlists**, **Media**, **Post** and **Post/Blog Page**.
* Click a folder to see its templates, then click a template to open it. The default template for each type shows a bookmark icon and appears first.
* **+** creates a template. The search icon searches the templates in these folders.
* Hover a template and click its three-dot menu for **Edit Title**, **Duplicate Template**, **Make Default** and **Delete Template**, plus **Restore Default** on **Media** and **Playlists** templates. Which items appear depends on the template. See [Manage templates](#manage-templates).
* For templates you can assign to items, a row under the template you have open shows how many items use it. For the default template, it shows that all items do. Expand the row and click an item to preview the template with that item. See [Use a template for specific items](#use-a-template-for-specific-items).

#### Layers panel

* The panel groups sections under **Header**, **Template** and **Footer**.
* In the **Template** group, click **Add section** to add a section. Hover a section to hide or show it, duplicate it or delete it, and drag its handle to move it. Hidden sections are crossed out.
* You can select **Header** and **Footer** sections, but you can't move, hide, duplicate or delete them here.
* Click a section to open its settings. Click the arrow next to it to show its blocks. **Add block** adds a block. Hover a block to rename, duplicate or delete it, and drag it to reorder.
* **Layers** isn't available in **Code** mode.

#### Sections panel

* **Drag to add** lists the sections you can use on this template. Drag one onto the preview area to add it. The rest are under **Not available here**.
* Hover a section, then point to its eye icon to see a preview.
* Click a section under **Drag to add** to open it and edit its code.
* **+** creates a new section.

#### Widgets panel

* The panel groups widgets under **Injected into \<head>** and **Injected into \<body>**. When you turn a widget on, Fluid adds it to every page.
* Under **Sections**, drag a droplet's section onto the preview area to add it.
* If you haven't installed a droplet with theme extensions, the panel tells you no widgets are available.

### Preview area toolbar

In **Design** mode, a toolbar sits above the preview area:

* **Desktop view**, **Tablet view** and **Mobile view** open a floating preview at that device size.
* The zoom buttons change the zoom of the preview area from 50% to 200%, in steps of 10%.
* **Inspector** is on by default. While it's on, clicking in the preview area selects sections and blocks.
* The country and language pickers preview the page for one of your company's countries and active languages. They start on your company's default country and language.
* **Product** appears on product templates. Choose which product the preview area shows.

### Preview area

While **Inspector** is on:

* Hover a section to see its name, **Add section** buttons above and below it, and a delete button on sections you can delete.
* Click a section to open its settings in the right panel. Click a block to open the block's settings.
* Right-click a section for **Add section above**, **Add section below**, **Edit code** and **Delete section**. **Edit code** opens the theme's code editor in a new tab.
* Hover a block to see its name, a **+** button and a delete button. Right-click a block for **Add block**, **Edit code** and **Remove block**. **+** and **Add block** add a copy of the block right after it.

You can't add a section above the navigation bar or below the footer. You can't delete some sections, such as the header and footer.

### Right panel

* When the editor opens, the right panel shows the template settings:
  * **Template Title**: the template's name.
  * On **Page** templates, **Use Fluid Menu** uses the existing header and footer for the page, and **Use Theme Styles** lets theme styles apply to it.
  * On a template that isn't the default and that you can assign to items, an assignment field such as **Assigned Products** or **Assigned Pages**. Items you don't assign use the default template. See [Use a template for specific items](#use-a-template-for-specific-items).
  * On a template that isn't the default, **Template Actions**: **Make Default** and **Delete Template**. See [Why can't I delete a template?](#delete-template)
* When you select a section, the panel shows the section's name and its settings, often in groups you can expand. The settings depend on the section. A section with none shows **No Settings Available**.
* When you select a block, the panel shows that block's settings in the same way.
* **Version history** lists saved versions. Published versions have a **Published** label.

### Code mode

Click **Code** in the top bar to edit the template's code. The tabs are:

* **Template (liquid)**: the template's Liquid and HTML.
* **CSS**: appears only when the template has its own stylesheet.
* **Variables**: the template's variables, as JSON. **Save** stops with **Invalid variables JSON format** if the JSON isn't valid.

When you open a section from the **Sections** panel, it opens in **Code** mode, and you can't switch it to **Design**. **Translate** and **Preview** aren't available for it.

For Liquid, section schemas and theme variables, see the [theme developer guide](/themes/developer-guide), [theme variables](/themes/theme-variables) and [schema components](/themes/schema-components).

## Save and publish

Most edits stay in the editor until you click **Save** in the top bar. Until then, the top bar shows **Unsaved changes**. If you close or reload the browser tab with unsaved changes, your browser asks you to confirm. The editor's **X** button doesn't, so save first.

These wait for **Save** in the top bar:

* Section and block settings, and anything you change in the **Layers** panel.
* Sections and blocks you add or delete in the preview area.
* **Template Title**, **Use Fluid Menu** and **Use Theme Styles** in the template settings.
* Code you change in **Code** mode.

Saving a template doesn't publish it. After you save, click **Publish**. On your active theme, the published version is what visitors see.

**Publish** publishes:

* The template version you're viewing. After you save, that's the version you just saved.
* Saved changes to the page's header and footer.
* Saved changes to section text that your theme keeps in its English language file.

**Publish** is unavailable while you have unsaved changes, and when all of these are already published.

<Warning>
  Changes in the **Theme** panel also wait for **Save**. When you click **Save**, Fluid saves and publishes them at the same time. On your active theme, they go live right away, before you click **Publish**.
</Warning>

These save as soon as you make them:

* **Edit Title**, **Duplicate Template**, **Delete Template** and **Make Default**.
* Items you add to or remove from a template's assignments.
* Widgets you turn on or off in the **Widgets** panel.

These have their own save button:

* Menus in the **Site Menu** panel: **Save menu**.
* Translations in the **Template Translations** sheet: **Save**. Read the warning in [Translate a template](#translate-a-template) first.

## Edit a section

<Steps>
  <Step title="Select the section">
    Click the section in the preview area, or click it in the **Layers** panel. Its settings open in the right panel.
  </Step>

  <Step title="Change its settings">
    Edit the settings. The preview area updates to show your changes.
  </Step>

  <Step title="Save and publish your changes">
    Click **Save**, then **Publish**. See [Save and publish](#save-and-publish).
  </Step>
</Steps>

## Add a section

<Steps>
  <Step title="Open the section picker">
    Click **Add section** in the **Template** group of the **Layers** panel, or above or below a section in the preview area.
  </Step>

  <Step title="Choose a section">
    Under **Available Sections**, click a section to preview it. Use the search box to narrow the list. If you have sections from droplets, switch between the **Theme** and **Apps** tabs.
  </Step>

  <Step title="Add it">
    Click **Add section**. Then click **Save** and **Publish** in the top bar. See [Save and publish](#save-and-publish).
  </Step>
</Steps>

## Create a template

<Steps>
  <Step title="Start a new template">
    Open the **Templates** panel and click **+**.
  </Step>

  <Step title="Choose the type">
    In **Template Type**, choose the kind of page. For a custom page, choose **Page**.
  </Step>

  <Step title="Name it">
    Enter a **Template name**. It's required, can be up to 120 characters, and can't contain `/ \ : * ? " < > |`. You can also change the **Initial HTML**.
  </Step>

  <Step title="Create it">
    Click **Confirm**. The new template opens in the editor.
  </Step>
</Steps>

<Note>
  A template isn't a page. To publish a page at its own address, go to **Storefront** > **Pages**, click **Create Page**, and choose the template in the **Theme Template** card. You can also assign existing pages to a template from the template's settings.
</Note>

## Use a template for specific items

<Steps>
  <Step title="Open the template">
    In the **Templates** panel, open a **Product**, **Page**, **Post**, **Collection**, **Category**, **Enrollments**, **Media** or **Playlists** template that isn't the default for its type.
  </Step>

  <Step title="Open its settings">
    Click the gear in the top bar.
  </Step>

  <Step title="Choose the items">
    Under the assignment field, such as **Assigned Products**, click **Select Products** or **Add Products**. Choose the items, then click **Confirm**.
  </Step>
</Steps>

The change saves right away. To remove an item, click the close icon on its badge.

## Manage templates

* To make a template the default, choose **Make Default** from its menu in the **Templates** panel, or from **Template Actions** in its settings. Click **Continue** to confirm.
* To rename a template, choose **Edit Title** from its menu, type the new name and press Enter.
* To copy a template, choose **Duplicate Template** from its menu.
* To delete a template, choose **Delete Template** from its menu, or from **Template Actions** in its settings, then click **Delete**. This can't be undone. If you don't see **Delete Template**, read [Why can't I delete a template?](#delete-template)

### Restore a Media or Playlists template

To reset a **Media** or **Playlists** template, choose **Restore Default** from its menu, then click **Restore default** in the confirmation dialog. This replaces the template's content with the standard media display section.

* On the template you have open, the restore works like other edits. Click **Save**, then **Publish**.
* On any other template, Fluid publishes the restore right away.
* You can find the earlier content as a version in **History**.

## Translate a template

<Warning>
  Saving translations publishes right away. It publishes the template, its header and footer, and its language files. That includes changes you haven't saved or published yet, such as section and block changes and edits in the **Template (liquid)** tab. Publish or undo your other edits before you save translations.
</Warning>

<Steps>
  <Step title="Open translations">
    Click **Translate** in the top bar. The **Template Translations** sheet opens. Each section's text fields are rows, with one column for each of your company's languages.
  </Step>

  <Step title="Add translations">
    Type translations into the table. Use the search box and **Filters** to find untranslated text. To generate translations, click **Translate section** on one section, or click **Translate All** and then **Continue** to translate every section. **Translate All** can take a while, so stay on the screen until it finishes.
  </Step>

  <Step title="Save">
    Click **Save** in the sheet.
  </Step>
</Steps>

To add a language to the table, turn it on in [Languages](/help/admin/settings/languages).

## Go back to an earlier version

<Steps>
  <Step title="Open version history">
    Click **History** in the top bar.
  </Step>

  <Step title="Look at a version">
    Click a version to load it in the editor.
  </Step>

  <Step title="Publish or compare it">
    Hover the version and open its menu. Choose **Publish** to publish that version, or **Changes** to compare it with the version before it. The menu appears once the template has more than one saved version, and the first version has no **Changes** option.
  </Step>
</Steps>

## FAQ

<AccordionGroup>
  <Accordion title="Can I undo changes?" id="undo-changes">
    Use **Undo** and **Redo** in the top bar for changes you've made in the editor. Publishing clears the undo history. To go back to a version you saved earlier, use **History**.
  </Accordion>

  <Accordion title="Why don't I see Save, Publish or Customize?" id="no-save-publish">
    Your role doesn't have the **Theme** switch **Customize and edit theme settings**. An admin who manages roles can turn it on in the role's **Permissions** tab, in the **Content & Website** card. See [Roles](/help/admin/settings/roles).

    Without it, your theme doesn't show **Customize**, and the theme's code editor (**Edit Code**) says you don't have permission to view the page.
  </Accordion>

  <Accordion title="Why does Clear Cache fail?" id="clear-cache">
    **Clear Cache** needs the **Developer** switch that starts with **Manage webhooks and API configuration**. Without it, you see **Failed to clear cache**. An admin who manages roles can turn it on in the role's **Permissions** tab, in the **Settings** card. See [Roles](/help/admin/settings/roles).
  </Accordion>

  <Accordion title="Why can't I delete a template?" id="delete-template">
    You can't delete a default template. Make another template the default first, then delete this one.

    The **Templates** panel menu doesn't show **Delete Template** on the template you have open. To delete it, use **Template Actions** in its settings. Some templates don't offer **Delete Template**.
  </Accordion>

  <Accordion title="What does Git revision do?" id="git-revision">
    **Git revision** opens **Theme revisions**, where you can restore the whole theme to an earlier published revision. That includes its settings, every template and every asset.

    <Warning>
      Restoring also publishes. On an active theme, the restored revision goes live immediately.
    </Warning>

    If the theme isn't connected to Git yet, the dialog offers **Connect to Git**. After you connect, publish the theme to record its first revision. A new publish can take a moment to appear in the list.
  </Accordion>
</AccordionGroup>

## Related pages

* [Page Editor in the theme docs](/themes/page-editor)
* [Theme developer guide](/themes/developer-guide)
* [Droplets](/concepts/droplets)
* [Languages](/help/admin/settings/languages)
* [Countries](/help/admin/settings/countries)
* [Roles](/help/admin/settings/roles)