Template developers: Template Pages

Understand the existing pages in the ecommerce boilerplate. You may adjust UI only—no new pages or core wiring changes.

Scope: You cannot add new pages or change routing/core logic. Update UI only (markup, styles, states, copy) inside existing page files.

Page list (App Router)

• Home: app/page.tsx (build/local) and app/page.client.tsx (builder). Renders sections from data/pages/index.json or CMS, using renderSections.
• About: app/about/page.tsx – uses usePage with pageName query to render CMS sections.
• Contact: app/contact/page.tsx – same pattern as About.
• Products: app/products/page.tsx – product listing; app/products/[id]/ – product detail.
• Blog: app/blog/page.tsx – blog list; app/blog/[id]/ – blog detail.
• Checkout: app/checkout/page.tsx.
• Payment: app/payment/page.tsx.
• Profile: app/profile/page.tsx plus profile tabs/components in app/profile/_components/.
• Auth: app/auth/login/ and app/auth/register/.
• Inquiry: app/inquiry/page.tsx.
• Custom: app/custom/page.tsx.
• Legal: app/legal/page.tsx.
• Other routes: app/about, app/contact, and similar routes rely on CMS content via usePage.

Globals:

• Layout: app/layout.tsx wraps all pages with ApolloWrapper and ClientLayout.
• Shared sections: Most pages pull sections from CMS or data/pages/*.json; section components live in app/_components/sections/.

UI-only change guidelines

• Keep routing, usePage, and renderSections intact. Do not alter section.type mapping or add/remove pages.
• Make UI changes inside existing page components or their child components (e.g., profile tabs, page-level wrappers).
• Preserve data flow, query variables, and headers (e.g., client-portal-id) when adjusting markup.
• Verify changes with existing mocks (BUILD_MODE off) and with builder/CMS (BUILD_MODE=true) to ensure data-aware pages still render.