Translations

There are two separate kinds of text on your site, and they are edited in different places.

Kind	Example	Edited in
Your content	Footer text, about page, rank labels	The admin panel — Languages
Interface text	"Add to cart", "Checkout", "Your basket is empty"	Files in the theme — this page

If you only want to enable or disable languages, you do not need this page at all.

Where the files are

index.ts

types.ts

en.ts

de.ts

es.ts

index.ts

en.ts is the source of truth. It holds every interface string, grouped by area:

src/lib/i18n/messages/en.ts

export const en = {
  common: {
    loading: "Loading…",
    dismiss: "Dismiss",
    close: "Close",
  },
  header: {
    viewCart: "VIEW CART",
    viewCartAria: "View cart",
    empty: "Empty",
  },
  // …
};

The other 33 files are partial: they only contain the keys they translate. Anything they leave out falls back to the English text automatically, so a partly translated language still works.

Changing wording in English

Find the string

Search src/lib/i18n/messages/en.ts for the text you want to change.

Edit it

src/lib/i18n/messages/en.ts

header: {
  viewCart: "VIEW CART",       
  viewCart: "OPEN BASKET",     
},

Rebuild

bun run build

Interface text is compiled into the site, so unlike admin panel content this needs a rebuild and a redeploy.

Fixing a translation

Same idea, in that language's file:

src/lib/i18n/messages/de.ts

export const de = {
  header: {
    viewCart: "WARENKORB ANSEHEN",
  },
};

Any key you add overrides English for German. Any key you leave out keeps English.

Placeholders

Some strings contain {name} markers that get filled in at runtime:

copyIpAria: "Copy server IP {ip}",

Keep the placeholder exactly as it is, including the braces and the spelling inside them. You can move it around the sentence — word order differs between languages — but {ip} must survive intact or the value will not appear.

Adding a language the theme does not ship

This one touches several files, because the language has to be known to both the interface and the admin panel.

Add the code to the shared list

src/lib/locales.ts

export const LOCALES = [
  "en",
  "bg",
  // …
  "no",   
] as const;

This single list is used by the admin panel's localisation and the language switcher, so adding it here does most of the work.

Create the message file

Copy an existing one as a starting point:

cp src/lib/i18n/messages/de.ts src/lib/i18n/messages/no.ts

Edit it so the exported name matches the code:

src/lib/i18n/messages/no.ts

import type { DeepPartial, Messages } from "../types";

export const no: DeepPartial<Messages> = {
  common: {
    loading: "Laster…",
  },
  // …translate what you want; the rest falls back to English
};

Register it

src/lib/i18n/messages/index.ts

import { no } from "./no";     

export const MESSAGES = {
  // …
  no,                          
};

Add the columns in Supabase

Adding a locale changes the database structure, because translatable fields are stored per language.

From your own computer, with DATABASE_URI pointed at your Supabase project and without NODE_ENV=production:

bun run dev

Open http://localhost:3000/admin once — Payload adds the new columns on start-up — then press Ctrl+C.

Take a Supabase backup first (Database → Backups), and do not use bun run seed for this: it would overwrite your content with the theme's defaults.

English cannot be removed. It is the fallback that every other language sits on top of.
Translations are typed. A misspelled key is a build error, not a silent failure — bun run typecheck will tell you before you deploy.
Do not translate en.ts in place. It is the fallback for every other language; change it only when you want to change the English wording.