> ## 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 ; public storefront read endpoints require no auth. > Lists use cursor pagination via the page[cursor] and page[limit] query params; follow meta.pagination.next_cursor until it is null. > Never use /api/company/v1 or /api/v1 paths, page/per_page params, or offset pagination — they are legacy. > 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/auth-v0.yaml covers the unversioned auth surface (/api/... paths — authentication, MFA, social auth, and token exchange); 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). > Successful responses wrap the resource payload alongside a top-level integer status and a meta object. # Fluid Page Editor: Visual Page Building and Editing > The Fluid Page Editor lets you customize pages visually — click to select sections, edit settings in the panel, and see changes in real time. 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 In your Fluid admin, open the sidebar and go to **Website → Pages**. Click **Edit** next to an existing page, or click **Create New Page** to start from scratch. 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: ``` Page └── Template └── Sections └── Blocks ``` 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.