> ## 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, run `fluid signup` from the Fluid CLI, or 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. Before authenticated calls are possible, the merchant must sign the agent in to the Fluid CLI with the emailed code and --shop set to the company's fluid_shop (which also confirms the signup), or open the emailed confirmation link and give the agent an API token.
> After signup, to launch a merchant's store (back-office sync, payments onboarding, store setup, a theme copied from their current site, and a preview link before billing), follow /api/agent-launch.
> 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. The same applies to /api/company/v1 and /api/v1/... paths: prefer a newer documented equivalent, and use one only when none exists (/api/v1.1/... is distinct and documented in company-v0). Use page/per_page offset pagination only on an operation whose spec documents those params — mostly the unversioned company-v0 admin surface, plus some lists on other surfaces, versioned ones included; page every other list with cursors.
> Fluid has three navigation APIs; don't mix them up. Storefront website menus (navigation bars, footers) are /api/menus and nested menu_items, in api-reference/content-v0.yaml (API Reference: Website > Navigation menus), with a how-to in themes/navigation-menus; their list uses flat page/per_page pagination. The Fluid mobile app's navigation is /api/v2/mobile_navigations, in api-reference/mobile-v2.yaml (API Reference: Mobile app > Navigation); its list also uses page/per_page. Portal navigations belong to a portal definition (Fluid OS), in api-reference/fluid-os-v0.yaml (API Reference: Portal > Portal navigation), and each has a platform of web or mobile.
> 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 except two operations that take no credential, POST /api/company (create a company) and GET /api/agreements/{id} — 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.
> The Help Center (/help/...) is for merchants, admins and reps using Fluid. Its admin pages mirror the admin's routes: the screen at admin.fluid.app/settings/taxes is documented at /help/admin/settings/taxes. Use the Help Center for how-to questions about the admin, and the Developer Platform and API Reference for building integrations.
> Help Center pages describe what a company admin sees. A reader's role can hide screens and actions; admins manage roles on Settings > Roles (/help/admin/settings/roles). If someone can't find a screen or button, their role's permissions are the first thing to check.
> Send people who need Fluid support to /help/getting-help. Don't invent support email addresses, phone numbers or response times.

# Run a headless storefront

> Run your Fluid store as a Next.js app on your own domain and servers with Fluid's open-source headless storefront, while Fluid keeps your products, content, carts, checkout, and rep attribution.

A headless storefront is a site you build and host yourself that sells through Fluid. Fluid stays the source of truth for products, content, carts, checkout, and rep attribution. Your app decides how the store looks and where it runs.

Fluid publishes a starter you can copy: [Fluid-WeCommerce/headless-wecommerce](https://github.com/Fluid-WeCommerce/headless-wecommerce), a Next.js app under the MIT license. Set one environment variable to your company's Fluid subdomain and it renders the whole storefront: home, shop, products, enrollment packs, media, libraries, categories, collections, blog, pages, cart, and search.

## Consider a Fluid theme first

We don't recommend a headless storefront unless you need one. A [Fluid theme](https://docs.fluid.app/themes/why-fluid-themes.md) gives you full control of the design, and a headless storefront gives up a lot in return:

* **No editing in the builder.** Your teammates can't change the storefront in Fluid's page editor. Every change goes through a developer and your code.
* **No droplets or marketplace items.** Droplets and other marketplace items can't attach to a headless storefront.
* **No bots.** Fluid's bots can't review your storefront's SEO or make edits for you.
* **You pay for hosting.** Your servers and their costs are yours to run. Fluid themes are served free from a global CDN.
* **No built-in agentic commerce.** A headless storefront doesn't include the agentic commerce features, such as UCP (Universal Commerce Protocol), that Fluid storefronts have from the start.

Go headless only when it's absolutely required.

> [!NOTE]
>
> This guide covers a storefront that uses Fluid's hosted checkout. To build
> the checkout yourself as well, see [Build a headless
> checkout](https://docs.fluid.app/api/guides/headless-commerce.md).

## How it fits together

The starter splits the work between your server, the browser, and Fluid:

| Part | Runs on | What it does |
| - | - | - |
| Your Next.js app | Your server | Reads products and content from the public storefront API, renders every page, and caches the responses. |
| FairShare SDK | The shopper's browser | Records page views, attributes visits to reps, and keeps the cart. See [FairShare SDK and the storefront](https://docs.fluid.app/storefront/fairshare-sdk.md). |
| Fluid checkout | Fluid | Takes payment and places the order. The SDK hands the cart over with the shopper's session, so checkout works from any domain. |

The app reads only the public storefront endpoints, which need no token. See [Public and company endpoints](https://docs.fluid.app/storefront/public-and-company-endpoints.md).

## Run it locally

You need Node.js 20.9 or later, pnpm, and your company's Fluid subdomain: `acme` if your store is at `acme.fluid.app`.

**1. Copy the starter**

```bash theme={null}
git clone https://github.com/Fluid-WeCommerce/headless-wecommerce.git my-storefront
cd my-storefront
pnpm install
```

**2. Point it at your company**

Copy the example settings and set `FLUID_SHOP` to your subdomain.

```bash theme={null}
cp .env.example .env.local
```

```bash .env.local theme={null}
FLUID_SHOP=acme
```

**3. Start the dev server**

```bash theme={null}
pnpm dev
```

Open `http://127.0.0.1:3000`. You see your store's products, content, languages, countries, and brand colors.

> [!WARNING]
>
> Test checkout at `http://127.0.0.1:3000`, not `http://localhost:3000`. On a
> hostname that contains `localhost`, the SDK sends checkout to a local Fluid
> checkout server instead of Fluid's hosted checkout. Deployed sites aren't
> affected.

## Deploy it

The starter is a standard Next.js app, so it runs anywhere Next.js does.

* **Vercel.** Use the **Deploy** button in the repository's README, or import the repository, and set `FLUID_SHOP`. Add your domain under the project's domains. Canonical URLs and the sitemap follow the production domain.
* **Any Node.js host.** Run `pnpm build`, then `pnpm start`. Set `NEXT_PUBLIC_SITE_URL` to the storefront's public URL so canonical URLs and the sitemap use it.

### Settings

Only `FLUID_SHOP` is required. `.env.example` lists every setting.

| Variable | What it does |
| - | - |
| `FLUID_SHOP` | Your company's Fluid subdomain. |
| `NEXT_PUBLIC_SITE_URL` | The storefront's public URL. Detected automatically on Vercel. |
| `FLUID_COMPANY_PRIVATE_TOKEN` | Optional. A company token that lets the header and footer use your Fluid website navigation menus. Keep it on the server: never prefix it with `NEXT_PUBLIC_`. |
| `FLUID_REVALIDATE_SECONDS` | How long to cache Fluid data. Defaults to 300 seconds. |
| `REVALIDATE_SECRET` | The secret for the on-demand cache refresh. See [Keep pages fresh](#keep-pages-fresh). |

## URLs and rep credit

Pages use the same URLs as a Fluid-hosted storefront, so existing links, shares, and QR codes keep working. Every page sits behind the credit segment: a rep's username, such as `/jordan-lee/products/beet-blend`, or `home` when no rep is named, such as `/home/products/beet-blend`.

Links keep the shopper's credit. A shopper who arrives on `/jordan-lee/shop` stays on `/jordan-lee/...` as they browse, and the SDK attributes the visit to that rep. Canonical URLs and the sitemap use `/home/...`. See [Storefront URLs and the credit path](https://docs.fluid.app/storefront/fairshare-sdk.md#storefront-urls-and-the-credit-path).

## Build your own templates

The starter has a folder under `src/templates` for each Fluid template type, such as `product`, `enrollment_pack`, `medium`, `library`, `collection`, `category`, `post`, and `page`, plus the page types such as `home_page`, `shop_page`, and `cart_page`. Each folder has a `default.tsx` and an `index.ts` that registers its templates.

A record picks its template by its slug:

1. If the folder's `index.ts` registers a template under the record's slug, that template renders.
2. Otherwise, `default` renders.

```ts src/templates/product/index.ts theme={null}
export default defineTemplates<"product">({
  default: ProductDefault,         // every other product
  "beet-blend": ProductLanding,    // /home/products/beet-blend
});
```

The template a merchant picks in Fluid Admin isn't used. Your storefront's design lives in your code. If a merchant changes a record's slug, update the key or the record goes back to `default`. See [Slugs and URLs](https://docs.fluid.app/storefront/slugs-and-urls.md).

Templates are built from sections in `src/sections`, which are built from components in `src/components`, the same layering as a Fluid theme.

## Languages and countries

The storefront offers the languages and countries your company has enabled in Fluid, and a picker in the header lets shoppers switch. It chooses a shopper's locale the same way a Fluid-hosted storefront does: the `lang` and `country` query parameters, then the locale cookie, then the browser's language and the shopper's country, then your company's default.

Prices, currencies, and product availability follow the country. Content follows the language. The SDK and checkout read the same cookie, so the cart and checkout stay in the shopper's language and country. See [Translate storefront resources](https://docs.fluid.app/storefront/translations.md) and [Country availability](https://docs.fluid.app/storefront/country-availability.md).

## SEO

Every page gets a title, meta description, canonical URL, Open Graph and Twitter tags, and `hreflang` alternates, from each resource's `seo` settings in Fluid. A resource Fluid marks as not indexable gets a `noindex` tag. Products, posts, and the site carry schema.org structured data, and the app serves `/sitemap.xml` and `robots.txt`. See [SEO for storefront resources](https://docs.fluid.app/storefront/seo.md).

## Cart and checkout

The starter loads the FairShare SDK on every page, the same bundle Fluid-hosted themes use. Shoppers add to the cart with Fluid's cart drawer, and **Checkout** hands the cart to Fluid's hosted checkout. To build your own cart UI, use the React hooks in `src/lib/fairshare/hooks.ts`. See the [FairShare SDK](https://docs.fluid.app/sdk/overview.md) for every cart method.

## Keep pages fresh

The app caches Fluid's responses for `FLUID_REVALIDATE_SECONDS`. To refresh sooner, send a `POST` to `/api/revalidate` on your storefront with an `Authorization: Bearer` header carrying your `REVALIDATE_SECRET`. To refresh whenever something changes in Fluid, point a [webhook](https://docs.fluid.app/api/guides/webhooks.md) at it.

## What the public API doesn't provide

A headless storefront sees only what the public storefront API returns. Plan for these gaps:

* **Page content.** A page returns its title, description, image, and metafields, but not the content built in Fluid's page editor. Build page content in a template. Metafields are a good home for copy merchants should be able to edit. See [Metafields](https://docs.fluid.app/storefront/metafields.md).
* **Redirects.** Redirects set up in Fluid Admin don't apply. Add them to `next.config.ts`.
* **Navigation menus.** Your Fluid website navigation menus need `FLUID_COMPANY_PRIVATE_TOKEN`. Without it, the starter uses the links in `src/config/site.ts`.
* **Tag manager and analytics.** Add your tags to the app's layout yourself.
* **Theme template choice.** The template a merchant assigns in Fluid Admin isn't returned, which is why templates match by slug.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.