Site Configuration

Almost everything that makes the storefront yours lives in a single file: src/config/site.ts. Components read from this config instead of hardcoding copy, so rebranding the boilerplate is mostly an exercise in editing it.

What the file exports

src/config/site.ts exports three runtime values plus several TypeScript interfaces that describe their shape.

siteConfig is declared as const, so its values are readonly and their literal types flow through the rest of the app — TypeScript will flag a typo in a category slug or a currency code at build time.

siteConfig

Identity

export const siteConfig = {
  name: "Kestrel Supply",
  tagline: "Technology worth keeping",
  description:
    "Audio, wearables, and smart home gear, tested by our team before it reaches the shelf.",
  url: "https://ecommerce-boilerplate.com",
  // ...
} as const;

Contact and social links

  contact: {
    email: "hello@example.com",
    phone: "+1 (555) 000-0000",
    address: "123 Commerce St, Suite 100, Springfield, USA",
  },
  links: {
    linkedin: "https://www.linkedin.com/company/your-company",
    instagram: "https://www.instagram.com/your-company",
    github: "https://github.com/nebulanollie/ecommerce-boilerplate",
  },

Navigation

Two navigation arrays drive the header and footer. Each item is a { label, href } pair — internal routes are plain paths and hash links (/#contact) jump to a section.

  mainNav: [
    { label: "Products", href: "/products" },
    { label: "About", href: "/about" },
    { label: "Contact", href: "/#contact" },
  ],
  legalNav: [
    { label: "Privacy Policy", href: "/privacy-policy" },
    { label: "Terms of Service", href: "/terms-of-service" },
    { label: "Cookie Policy", href: "/cookie-policy" },
  ],

Any internal href must point at a route that actually exists in the app — nothing validates these at build time.

Currencies

The store has one base currency (currency) and a list of currencies the shopper can switch into (currencies). Prices are stored in the base currency and converted for display by formatMoney in src/lib/money.ts.

  currency: { code: "USD", locale: "en-US" } satisfies CurrencyConfig,
  currencies: [
    { code: "USD", locale: "en-US", rate: 1, label: "USD ($)" },
    { code: "EUR", locale: "de-DE", rate: 0.92, label: "EUR (€)" },
    { code: "GBP", locale: "en-GB", rate: 0.79, label: "GBP (£)" },
    { code: "JPY", locale: "ja-JP", rate: 155, label: "JPY (¥)" },
  ] satisfies CurrencyOption[],

• currency (CurrencyConfig) is the single source of truth for how prices render across the storefront, admin, and emails: code is an ISO 4217 code and locale is a BCP 47 locale that drives number grouping and the currency symbol.
• currencies (CurrencyOption[]) lists the switchable options. Each adds rate — the multiplier from the base currency — and label, the short text shown in the switcher.

See Currency & pricing for how conversion and formatting work end to end.

Locales

  defaultLocale: "en",
  locales: [
    { code: "en", label: "English" },
    { code: "es", label: "Español" },
  ] satisfies LocaleOption[],

Each LocaleOption has a code (a BCP 47 code that must also be registered in the src/lib/i18n dictionaries) and a native label for the switcher. The first entry is the default. Adding a language is a data change — drop in src/lib/i18n/<locale>.ts, register it in dictionaries, and add an entry here.

See Internationalization for the full "how to add a locale" walkthrough.

Theme presets

Brand colors live in the --brand* CSS variables in src/app/globals.css; the theme block mirrors and documents them so you can swap schemes from one place.

  theme: {
    active: "default",
    presets: {
      default: {
        brand: "226 57% 21%",
        brandForeground: "210 40% 98%",
        brandAccent: "24.6 95% 53.1%",
        brandAccentForeground: "0 0% 100%",
      },
      emerald: {
        brand: "160 84% 20%",
        brandForeground: "150 40% 98%",
        brandAccent: "160 84% 39%",
        brandAccentForeground: "0 0% 100%",
      },
      violet: {
        brand: "263 60% 26%",
        brandForeground: "270 40% 98%",
        brandAccent: "262 83% 58%",
        brandAccentForeground: "0 0% 100%",
      },
    } satisfies Record<string, ThemePreset>,
  },

theme.active is informational only — the runtime source of truth is globals.css. Each preset is a ThemePreset whose four fields are space-separated HSL triplets ("H S% L%"), so a value drops straight into hsl(var(--brand)) with no conversion.

To recolor the store, edit the --brand* values in src/app/globals.css — either directly or by pasting a preset's triplets onto them. globals.css also defines brand tokens inside the storefront and admin scopes, which is what decides how far a preset actually reaches; Branding & theming has the full picture.

productCategories

productCategories is an array of ProductCategory objects describing the catalog's top-level categories. They drive the header navigation, the hero, and the category cards, and their slug powers category filtering via /products?category=<slug>.

export const productCategories: ProductCategory[] = [
  {
    name: "Audio",
    slug: "audio",
    icon: "/categories/audio.svg",
    image: "/categories/audio.svg",
    description:
      "Headphones, speakers, and studio gear engineered for rich, accurate sound.",
    secondaryDescription:
      "From everyday earbuds to reference monitors, our audio lineup covers listening, recording, and everything in between.",
    badges: ["Headphones", "Speakers", "Microphones"],
  },
  // ...five more
];

ProductCategory fields

Shipped categories

All shipped icon and image paths point at SVGs under public/categories/ (for example /categories/audio.svg). Replace these files, or point the fields at your own assets, to re-illustrate the categories.

Rebranding checklist

Related