> ## 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.

# Build and publish MySite themes

> Write a MySite theme's content, head, and stylesheet, preview it against your own MySite with the Fluid CLI, and publish it to the reps who use it.

A MySite is a rep's personal page at `/my/<username>` on your storefront. It shows the rep's photo, bio, social links, buttons, and the products and content they picked. A MySite theme decides how that page looks. Your reps choose a theme for their MySite, and admins manage the list on the [Mysite Themes](https://docs.fluid.app/help/admin/mysite-themes.md) screen.

A MySite theme isn't a storefront theme. It's a single template made of three parts:

| Part | Local file | What it holds |
| - | - | - |
| Content | `content.liquid` | The page body, in HTML and Liquid |
| Head | `head.liquid` | Extra markup for the page's `<head>`, such as font links and meta tags, in HTML and Liquid |
| Stylesheet | `stylesheet.css` | The theme's CSS |

## Which theme a MySite renders

For each visit to `/my/<username>`, Fluid renders the first of these that exists:

1. The theme in the `preview_theme_id` query parameter, when it's one of your company's MySite themes. `fluid mysite dev` uses this to preview your edits.
2. The theme the rep chose for their MySite.
3. Your company's default MySite theme, marked **Default** on the Mysite Themes screen.
4. Fluid's built-in default theme.

Fluid renders the theme's published version. Every rep who uses a theme sees the same template, filled with their own values.

## Write the theme

### Content

Fluid wraps `content.liquid` in its own HTML document, so write only the page body. Don't add `<!DOCTYPE html>`, `<html>`, `<head>`, or `<body>` tags: they would nest a second document inside Fluid's. Fluid adds the page title and Open Graph tags from the rep's name and bio, and links your stylesheet, so you don't need to. MySite pages don't show your storefront's navigation bar or footer.

A MySite theme has no theme files around it. There are no sections, blocks, snippets, or settings schema, and `{% render %}` or `{% section %}` tags have nothing to load. Write the whole page in `content.liquid`.

Read the rep's values from `fluid_affiliate`. [Theme variables](https://docs.fluid.app/themes/theme-variables.md#my-site-template) lists every field.

### Handle empty values

Reps fill in their MySite over time, so design for missing values:

* **Social links.** Each social field, such as `fluid_affiliate.instagram_url`, is blank unless the rep set it. Show each icon only when its URL is set, and hide the whole icon row when none is.
* **Bio.** `fluid_affiliate.bio` can be blank. Skip its block rather than leaving an empty box.
* **Photo.** `fluid_affiliate.image` always has a value. Fluid uses a placeholder image when the rep has no photo.
* **Buttons and cards.** When a rep hasn't added links or picked products, `fluid_affiliate.links` and `fluid_affiliate.my_site_displayables` hold your company's default MySite links and favorites instead. Both can still be empty, so give the page a layout that works without them.

```liquid theme={null}
{% if fluid_affiliate.instagram_url != blank %}
  <a href="{{ fluid_affiliate.instagram_url }}" aria-label="Instagram" target="_blank" rel="noopener">
    <svg aria-hidden="true" width="24" height="24"><use href="#icon-instagram"></use></svg>
  </a>
{% endif %}

{% if fluid_affiliate.bio != blank %}
  <p class="mysite-bio">{{ fluid_affiliate.bio }}</p>
{% endif %}
```

### Render each card type

Each entry in `fluid_affiliate.my_site_displayables` is a card. Branch on its `favoriteable_type` and read the item from `favoriteable`:

| `favoriteable_type` | The card is | Extra fields on `favoriteable` |
| - | - | - |
| `Product` | A product | `display_price`, `price`, `url` |
| `EnrollmentPack` | An enrollment pack | `enrollment_pack`, `price`, `url` |
| `Medium` | A video, PDF, image, or other media | `kind`, `video_url`, `pdf_url`, `image_url`, `powerpoint_url`, `url` |
| `Page` | A storefront page | `url` |
| `Promotion` | A promotion | `url` |
| `Library` | A playlist | `url` |

Every card's `favoriteable` also has `id`, `type`, `title`, `description`, and `image`. Link each card to its `url`: it's the item's address under the rep's own link, with the rep's username in it.

```liquid theme={null}
{% for card in fluid_affiliate.my_site_displayables %}
  {% assign item = card.favoriteable %}
  <a class="mysite-card mysite-card--{{ card.favoriteable_type | downcase }}" href="{{ item.url }}">
    {% if item.image != blank %}
      <img src="{{ item.image | image_url: width: 400, format: 'auto' }}" alt="{{ item.title }}" loading="lazy">
    {% endif %}
    <span class="mysite-card__title">{{ item.title }}</span>
    {% if card.favoriteable_type == 'Product' %}
      <span class="mysite-card__price">{{ item.display_price }}</span>
    {% elsif card.favoriteable_type == 'Medium' and item.kind == 'video' %}
      <span class="mysite-card__badge">Video</span>
    {% endif %}
  </a>
{% endfor %}
```

### Head

Put markup that belongs in the page's `<head>` in `head.liquid`: font links, extra meta tags, or a small script. Fluid renders it as Liquid with the same values as the content, and adds it to the end of the `<head>`, after its own tags and your stylesheet.

```liquid theme={null}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">
<meta name="theme-color" content="#1f3a5f">
```

The **Add Mysite Theme** dialog in the admin has fields only for the content and the stylesheet. Edit the head with the CLI.

## Work on a theme with the CLI

The `fluid mysite` commands come from the MySite plugin. Install it next to the Fluid CLI, and sign in:

```bash theme={null}
npm install -g @fluid-app/fluid-cli @fluid-app/fluid-cli-mysite
fluid login
```

| Command | What it does |
| - | - |
| `fluid mysite list` | List your company's MySite themes with their IDs |
| `fluid mysite pull --theme <id>` | Download a theme's three files into the current directory, or into `--root <dir>` |
| `fluid mysite dev` | Preview your local files on your own MySite without changing the theme |
| `fluid mysite publish` | Send your local files to the theme. Every MySite that uses it changes straight away |

**1. Pull the theme**

```bash theme={null}
fluid mysite list
fluid mysite pull --theme 4182 --root ./mysite-aurora
```

Pull writes `content.liquid`, `head.liquid`, `stylesheet.css`, and a `.fluid-mysite.json` file that records which theme the directory belongs to. Pulling the same theme again overwrites your local files without asking. To pull a different theme into a directory that already tracks one, add `--yes`.

**2. Preview your edits**

```bash theme={null}
cd mysite-aurora
fluid mysite dev
```

The first run creates a copy of the theme for previews, named after the theme with `(dev …)` added, and later runs reuse it. Members can't choose that copy for their MySite. Each time you save one of the three files, the CLI updates the copy and reloads the page.

The dev server listens on port `9293`, or the next free port, and shows your own MySite rendered with the copy. It also prints a production preview link, your MySite URL with `preview_theme_id` set to the copy. Your signed-in user needs a username in the company, so that you have a MySite to preview against.

Use `--port` to pick another port, `--live-reload off` to stop automatic reloads, and `--root <dir>` to run against another directory.

**3. Publish**

```bash theme={null}
fluid mysite publish
```

The CLI asks you to confirm, then sends your three files to the theme you pulled.

> [!WARNING]
>
> A MySite theme has no draft. `fluid mysite publish` replaces the theme's content, head, and stylesheet, and every rep's MySite that uses the theme changes at once. Preview with `fluid mysite dev` first.

Publish checks your files before it changes anything:

* It stops when any of the three files is missing or can't be read, because sending it would erase that part of the live theme. An empty file is fine, and clears that part on purpose.
* In a session that can't answer a prompt, such as a script or an AI agent, it refuses to publish unless you pass `--yes`. Add `--yes` only when you mean to publish.

If a rep's MySite still shows the old version, **Reset Cache** on the [Mysite Themes](https://docs.fluid.app/help/admin/mysite-themes.md#reset-the-cache) screen clears the cached copies of your reps' MySites.

## Related pages

* [Mysite Themes](https://docs.fluid.app/help/admin/mysite-themes.md), to add, rename, and customize themes in the admin
* [Theme variables](https://docs.fluid.app/themes/theme-variables.md#my-site-template), for every `fluid_affiliate` field
* [Image transformations](https://docs.fluid.app/themes/image-transformations.md), to size card images
* [CLI](https://docs.fluid.app/themes/cli.md), for storefront theme commands


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