Template Layout

Understand the global layout (header, footer, theme) for the ecommerce boilerplate so you can adjust UI without touching core logic.

Scope: UI-only changes. Do not alter routing, data flow, or add/remove layout modules.

Layout entry points

  • Root layout: app/layout.tsx wraps all pages with ApolloWrapper and ClientLayout.
  • Client layout shell: app/_components/ClientLayout.tsx / ClientLayout.client.tsx orchestrates header, footer, and page container.
  • Header/Footer: app/_components/Header.tsx and Footer.tsx (plus .client variants) render navigation, branding, and site chrome.
  • Styles: app/globals.css and Tailwind tokens from the shared config drive base styling.

Theme and branding

Theme tokens and branding values come from data/configs.json:

  • Fonts: appearance.baseFont, appearance.headingFont
  • Colors: appearance.baseColor, appearance.backgroundColor, plus theme mode (theme: "light" | "dark")
  • Meta: meta.title, meta.description, meta.favicon, meta.logo
  • Menus: menus.main, menus.footerMenu
  • Additional: additional.social, additional.copyright, additional.integrations

Keep these contracts intact; adjust UI by consuming the existing values.

Header fields (UI)

  • Logo
  • Site name / description
  • Main menu (from menus.main)
  • Language switcher (if present)
  • Contact fields: email, phone, address, social links
  • Auth actions: login / signup buttons
  • Logo
  • Site name / description
  • Main menu and footer menu
  • Language switcher (if present)
  • Contact fields: email, phone, address, social links
  • Legal links: privacy, terms
  • Copyright text

UI change guidelines

  • Work inside Header/Footer components (or their client variants) to adjust layout, spacing, and visuals.
  • Do not change how menus, branding, or theme values are fetched; only how they are displayed.
  • Keep accessibility in mind (aria labels, focus states, contrast).

Testing

  • Run yarn dev and verify header/footer across key pages (home, products, checkout, auth, profile).
  • Toggle theme and inspect responsiveness (desktop, tablet, mobile).
  • Run yarn lint before opening a PR.