Template developers: 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

Footer fields (UI)

• 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.