> ## 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. > 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. > 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. # Build a navbar country and language selector > Render country and language choices in a Fluid navbar, apply them with the storefront SDK, and customize the included Base theme controls. A navbar locale selector has two parts: * Liquid renders the countries, languages, and current selections. * Theme JavaScript passes the selected ISO codes to the storefront SDK and then reloads the storefront path. Use `window.FairShareSDK.updateLocaleSettings()` for the update. Do not set Fluid locale cookies yourself. ## Render the controls Navbar templates receive `countries` and `language_options` directly. Each entry has an `iso` value and a `selected` boolean. ```liquid theme={null}
``` Use the ISO values without translating or replacing them. Country values look like `us` or `gb` in Liquid. Language values look like `en` or `fr`. Send country codes in uppercase and language codes in lowercase. If you render separate desktop and mobile selectors, give their form controls unique `id` values. Keep the same `name` values so one JavaScript handler can support both forms. ## Apply the selection Put this code in a theme JavaScript asset loaded after the navbar markup or with `defer`: ```javascript theme={null} document.addEventListener("submit", async (event) => { const form = event.target; if (!(form instanceof HTMLFormElement)) return; if (!form.matches("[data-navbar-locale-selector]")) return; event.preventDefault(); const submitButton = form.querySelector('button[type="submit"]'); const errorMessage = form.querySelector("[data-locale-error]"); const country = form.querySelector('[name="country"]').value.toUpperCase(); const language = form.querySelector('[name="language"]').value.toLowerCase(); if (!window.FairShareSDK) { errorMessage.textContent = "Locale settings are not available. Refresh and try again."; errorMessage.hidden = false; return; } submitButton.disabled = true; errorMessage.hidden = true; try { await window.FairShareSDK.updateLocaleSettings({ country, language }); const url = new URL(window.location.href); url.searchParams.delete("lang"); window.location.assign(url.toString()); } catch (error) { console.error("Could not update locale settings", error); errorMessage.textContent = "We could not update your country and language. Try again."; errorMessage.hidden = false; submitButton.disabled = false; } }); ``` Wait for `updateLocaleSettings()` before you navigate. The method first stores normalized locale, language, and country values in session cookies. If a cart exists, it then updates the cart language followed by the cart country and saves the returned cart state. If no cart exists, it stores the locale without making a cart request. The method does not reload the page. If a cart update fails, its Promise rejects after the locale cookies have already changed. Handle that error before you decide whether to navigate. Remove only the `lang` query override before navigating so it does not win over the saved language. Keep the remaining query parameters so theme preview context survives the reload. The reload lets Fluid render translated content and country-specific pricing for the new selection. Your layout must render `{{ content_for_header }}` so Fluid can load the storefront SDK. See [install FairShare](/sdk/installation) if you manage the SDK script yourself. ## Customize the included Base theme The included Base theme uses the same update flow with separate desktop and mobile interfaces. Its CSS classes and IDs are theme hooks, not required platform names. | Hook | Base theme behavior | | ------------------------------------- | ----------------------------------------------------------------------------- | | `#show-language-country-dropdown` | Opens the desktop selector | | `#transparent-overlay` | Closes the desktop selector when you click outside it | | `#countries`, `#languages` | Identify the desktop selects enhanced by Tom Select | | `#show-language-and-country` | Opens the mobile selector | | `#mobile-country-language` | Contains the mobile selector panel | | `#close-language-and-country` | Closes the mobile selector | | `.locale-selector` | Scopes country and language values to one selector | | `.country-selector` | Holds the selected country ISO code | | `.language-selector` | Holds the selected language ISO code | | `.country-item`, `.language-item` | Select a mobile list item from its `data-value` ISO code | | `.search-country`, `.search-language` | Filters the corresponding mobile list | | `.saveLocaleBtn` | Applies both selected values | | `.mobile-save-btn` | Marks the mobile apply button, whose values come from `data-value` attributes | The desktop controls are native `