frontend-shopify/shopify-template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Render the header and footer from the root layout

Browse Source 
Every page was importing Header and Footer and repeating the same store
name, logo, copyright and nav links. Hoisting both into the root layout
renders them once, and a new config/site.ts holds the values they shared.

The body becomes a flex column so the footer sits at the bottom of short
pages. not-found and error now render inside that chrome, so their
full-viewport centering drops to 60vh.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D1vsTA4MX6qFd7nqSAKtdV
This commit is contained in:
Rami Bitar
2026-08-05 15:03:44 -04:00
co-authored by Claude Opus 5
parent 8602e03079
commit ff4adba2fb
17 changed files with 174 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/layout.tsx
+13 -2
View File
@@ -1,7 +1,10 @@
import React from 'react';
import './globals.css';
import { Geist, Geist_Mono } from 'next/font/google';
import Header from '@/components/shopify/header';
import Footer from '@/components/shopify/footer';
import StoreAssistant from '@/components/shopify/store-assistant';
import { site } from '@/config/site';
const geist = Geist({
subsets: ['latin'],
@@ -20,8 +23,16 @@ export default function RootLayout({
}) {
return (
<html lang="en" className={`${geist.variable} ${geistMono.variable}`}>
<body className="font-body antialiased bg-background text-foreground m-0 p-0">
{children}
<body className="font-body antialiased bg-background text-foreground m-0 p-0 flex min-h-screen flex-col">
{/* Header owns the cart drawer, search and account menu, so every
route gets them by rendering here rather than page by page. */}
<Header
storeName={site.storeName}
logoUrl={site.logoUrl}
links={site.navLinks}
/>
<div className="flex-1">{children}</div>
<Footer storeName={site.storeName} copyright={site.copyright} />
<StoreAssistant />
</body>
</html>