Localization

Localization is URL-first: the locale rides as a path prefix (/de/products/…), detected and persisted for you by the SDK.

Detection & paths

From @kotao/storefront:

• localeFromRequest(request) — the active locale (path prefix, then cookie, then Accept-Language).
• localizePath(path, locale) — prefix a path for a target locale.
• stripLocalePrefixFromRequest(request) — the request your route matching sees, prefix removed (the scaffold’s Worker entry applies this; also re-exported from /react-router).

The switcher

The scaffold ships a localization action route — a form post switches the locale and sets the cookie:

app/routes/localization.tsx

import { handleLocalizationPost } from "@kotao/storefront";

export async function action({ request }: Route.ActionArgs) {
  return handleLocalizationPost(request);
}

Point your language selector’s <Form method="post"> at it with the target locale; the handler sets LOCALIZATION_COOKIE and redirects to the localized path.

Localized content

Translated shop content (products, pages, navigation) is served by the Storefront API for the active locale — your queries don’t change. Your theme’s own UI strings are yours to manage; keep them in a locale map keyed by the active locale from the loader.