> ## 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.
> 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/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); 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.

# Add an account menu

> Drop a cache-safe sign-in link and member account menu into your header with the member_account tag.

<Warning>
  Member storefront is in a limited pilot. Confirm that member storefront is enabled for your company before publishing this tag.
</Warning>

`{% member_account %}` gives one cached header two states. A guest sees a **Sign in** link. A signed-in member sees a round avatar of their initials that opens a small account menu.

Use it when you want the account control without writing the markup yourself. If you would rather build your own links and styles, use `member_routes` instead — see [Sign in and sign out](/themes/member-storefront/authentication).

## Add the tag

Place it in your storefront header or member layout:

```liquid theme={null}
<nav class="site-header__account" aria-label="Account">
  {% member_account %}
</nav>
```

That is the whole theme change. The tag renders an empty element carrying only data, and the SDK builds the markup inside it in the browser:

```html theme={null}
<fluid-member-account
  data-fluid-member-storefront
  data-account-url="https://northwind.account.fluid.app/"
  data-sign-in-url="/auth/sign_in"
  data-sign-out-url="/auth/sign_out"
  data-sign-in-label="Sign in"
  data-account-label="Account"
  data-sign-out-label="Sign out"
></fluid-member-account>
```

With member storefront disabled, the tag renders nothing at all.

The tag takes no arguments. Passing one is a template error.

## What each visitor sees

| Visitor | Result                                                            |
| ------- | ----------------------------------------------------------------- |
| Guest   | A **Sign in** link to the current host's sign-in flow             |
| Member  | An avatar of their initials, opening **Account** and **Sign out** |

Initials come from the member's display name — "Alex Kim" reads AK, and "Alex" reads A. The name arrives with the session the SDK already fetches for prices and greetings, so the avatar costs no extra request.

**Account** opens your company's account host. **Sign out** ends the session on the current host.

The cached HTML always starts in the guest state, exactly like a member-aware section. The menu appears only once the SDK confirms the session. An expired session or a failed request leaves **Sign in** visible.

<Note>
  The cached page never contains the member's name or initials. Both are written in the browser after the session is confirmed.
</Note>

## Keyboard and dismissal

The menu uses a native disclosure element, so it works without extra theme JavaScript:

* **Escape** closes the menu and returns focus to the avatar
* A click outside closes it
* Choosing a link closes it

The panel is sized by its own content and clamped to a maximum width, so a narrow or stretched navigation container will not stretch it.

## Styling

The tag passes your theme's own settings to the menu, using the same values member system screens read — primary color, surface color, border color, and body font among them. The menu matches your system screens with no second palette to maintain. See [Theme settings and system screen styles](/themes/member-storefront/system-screen-styling).

A storefront with no such settings falls back to neutral defaults that inherit the surrounding header's text color, so the avatar stays legible on a light or a dark header.

To go further, style these classes with your own CSS:

| Selector                        | Part                            |
| ------------------------------- | ------------------------------- |
| `fluid-member-account`          | The element as a whole          |
| `.fluid-member-account-avatar`  | The initials circle             |
| `.fluid-member-account-trigger` | The control that opens the menu |
| `.fluid-member-account-links`   | The dropdown panel              |

Two custom properties are available for the panel:

```css theme={null}
fluid-member-account {
  --fluid-member-account-radius: 0.5rem;
  --fluid-member-account-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
}
```

The panel respects `prefers-reduced-motion`.

## Labels and translation

Labels are rendered by the server, so they follow your storefront's language rather than being fixed in the browser. You do not pass label text to the tag.

## Link safety

Only `https:`, `http:`, and root-relative URLs are used. Any other value falls back to a safe default, so a mistyped or hostile value cannot turn a menu item into a script.

## Test your header

* Load a storefront page signed out and confirm **Sign in** is visible.
* Sign in, return to that page, and confirm the avatar shows your initials.
* Open the menu and confirm it contains only **Account** and **Sign out**.
* Press **Escape**, then click outside, and confirm the menu closes both ways.
* View the cached HTML as a guest and confirm it contains no member name or initials.