vercel · laugharn · Apr 29, 2026 · Apr 29, 2026 · Apr 29, 2026 · Apr 29, 2026
diff --git a/apps/template/app/about/page.tsx b/apps/template/app/about/page.tsx
@@ -5,17 +5,17 @@ import { Page } from "@/components/ui/page";
 
 export const metadata: Metadata = {
   title: "About",
-  description: "Learn about Vercel Shop, a Next.js storefront template for Shopify.",
+  description: "Learn about Hausu, a Next.js storefront template for Shopify.",
 };
 
 export default function AboutPage() {
   return (
     <Page>
       <Container className="max-w-2xl">
         <article className="prose prose-neutral prose-headings:font-semibold prose-headings:tracking-tight">
-          <h1>About Vercel Shop</h1>
+          <h1>About Hausu</h1>
           <p>
-            Vercel Shop is a Next.js storefront that connects to Shopify. You get product pages,
+            Hausu is a Next.js storefront that connects to Shopify. You get product pages,
             collections, a cart, and search out of the box. Point it at your store and you're
             selling.
           </p>

diff --git a/apps/template/app/collections/[handle]/page.tsx b/apps/template/app/collections/[handle]/page.tsx
@@ -84,6 +84,7 @@ export const unstable_instant = {
         sort: null,
       },
       cookies: [{ name: "shopify_cartId", value: null }],
+      headers: [["x-vercel-ip-postal-code", null]],
     },
   ],
 };

diff --git a/apps/template/app/globals.css b/apps/template/app/globals.css
@@ -8,8 +8,12 @@
   --breakpoint-4xl: 140rem; /* 2240px */
 
   --color-background: var(--background);
+  --color-chartreuse: var(--chartreuse);
   --color-foreground: var(--foreground);
+  --color-link: var(--link);
+  --color-link-foreground: var(--link-foreground);
   --color-shop: #5A31F4;
+  --font-display: var(--font-bricolage);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
   --text-xxs: 0.625rem;
@@ -72,7 +76,10 @@
   ); /* 64px = h-16 single nav row + safe area */
   --radius: 0.625rem;
   --background: #ffffff;
+  --chartreuse: #ccff00;
   --foreground: #010101;
+  --link: #0a1f4b;
+  --link-foreground: #ffffff;
   --card: #ffffff;
   --card-foreground: #010101;
   --popover: #ffffff;
@@ -112,6 +119,9 @@
     letter-spacing: -0.025em; /* tracking-tight */
     font-weight: 600; /* font-semibold */
   }
+  .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    color: var(--link);
+  }
 }
 
 @layer base {

diff --git a/apps/template/app/layout.tsx b/apps/template/app/layout.tsx
@@ -2,7 +2,7 @@ import "./globals.css";
 import type { Metadata } from "next";
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages, getTranslations } from "next-intl/server";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Bricolage_Grotesque, Geist, Geist_Mono } from "next/font/google";
 import { Suspense } from "react";
 
 import { ActionBar } from "@/components/action-bar";
@@ -11,6 +11,7 @@ import { CartProvider } from "@/components/cart/context";
 import { CartOverlayWithAddress } from "@/components/cart/overlay-with-address";
 import { Footer } from "@/components/footer";
 import { Nav } from "@/components/nav";
+import { TopBar } from "@/components/nav/top-bar";
 import { SiteSchema } from "@/components/schema/site-schema";
 import { siteConfig } from "@/lib/config";
 import { getLocale } from "@/lib/params";
@@ -26,6 +27,11 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
+const bricolage = Bricolage_Grotesque({
+  variable: "--font-bricolage",
+  subsets: ["latin"],
+});
+
 export default async function RootLayout({ children }: LayoutProps<"/">) {
   const [locale, messages, t] = await Promise.all([
     getLocale(),
@@ -37,7 +43,7 @@ export default async function RootLayout({ children }: LayoutProps<"/">) {
     <html lang={locale}>
       <head />
       <body
-        className={`${geistSans.variable} ${geistMono.variable} flex min-h-dvh flex-col font-sans antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} ${bricolage.variable} flex min-h-dvh flex-col font-sans antialiased`}
       >
         <a
           href="#main-content"
@@ -48,6 +54,7 @@ export default async function RootLayout({ children }: LayoutProps<"/">) {
         <SiteSchema locale={locale} />
         <NextIntlClientProvider locale={locale} messages={messages}>
           <CartProvider initialCart={null}>
+            <TopBar />
             <Nav locale={locale} />
             <main id="main-content" className="flex flex-1 flex-col min-w-0">
               {children}
@@ -72,7 +79,7 @@ export const generateMetadata = async (): Promise<Metadata> => {
   return {
     alternates: buildAlternates({ pathname: "/" }),
     description: t("defaultDescription"),
-    generator: "Vercel Shop",
+    generator: siteConfig.name,
     metadataBase: new URL(siteConfig.url),
     openGraph: {
       images: [{ url: "/og-default.png", width: 1200, height: 630 }],

diff --git a/apps/template/app/not-found.tsx b/apps/template/app/not-found.tsx
@@ -11,13 +11,13 @@ export default async function NotFoundError() {
     <Page className="flex flex-1 flex-col">
       <Container className="flex flex-1 flex-col items-center justify-center text-center">
         <div className="flex flex-col items-center text-center gap-2.5">
-          <h1 className="text-3xl sm:text-4xl md:text-5xl font-semibold tracking-tight">
+          <h1 className="font-display text-3xl sm:text-4xl md:text-5xl font-semibold tracking-tight">
             {t("notFound")}
           </h1>
           <p className="text-sm md:text-base text-muted-foreground max-w-xl">{t("notFoundDesc")}</p>
           <Link
             href="/search"
-            className="inline-flex items-center justify-center h-12 px-8 rounded-lg text-sm font-medium bg-foreground text-background hover:bg-foreground/90 transition-colors"
+            className="inline-flex items-center justify-center h-12 px-8 rounded-lg text-sm font-medium bg-link text-link-foreground hover:bg-link/90 transition-colors"
           >
             {t("continueShopping")}
           </Link>

diff --git a/apps/template/app/page.tsx b/apps/template/app/page.tsx
@@ -1,14 +1,19 @@
 import type { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
+import { Suspense } from "react";
 
 import { FeaturedProducts } from "@/components/product/products-grid";
+import { ProductsSlider } from "@/components/product/products-slider";
+import { RelatedProductsSectionSkeleton } from "@/components/product/related-products-section";
 import { BannerSection } from "@/components/sections/banner-section";
 import { Container } from "@/components/ui/container";
 import { Page } from "@/components/ui/page";
 import { Sections } from "@/components/ui/sections";
 import { siteConfig } from "@/lib/config";
+import type { Locale } from "@/lib/i18n";
 import { getLocale } from "@/lib/params";
 import { buildAlternates, buildOpenGraph } from "@/lib/seo";
+import { getCatalogProducts } from "@/lib/shopify/operations/products";
 
 export async function generateMetadata(): Promise<Metadata> {
   const t = await getTranslations("seo");
@@ -40,8 +45,17 @@ export default async function HomePage() {
         <BannerSection
           hero={{
             id: "homepage-hero",
-            headline: "Agentic Infrastructure for Commerce",
-            subheadline: "A production-ready, agent-friendly Shopify storefront built on Next.js.",
+            headline: "The Outdoor Edit",
+            subheadline: null,
+            backgroundImage: {
+              url: "https://cdn.shopify.com/s/files/1/0968/7236/6467/files/boomerang-poster.jpg?v=1777564966",
+              alt: "The Outdoor Edit",
+              width: 1280,
+              height: 720,
+            },
+            backgroundVideo: {
+              url: "https://cdn.shopify.com/videos/c/o/v/db1572ad04ae4ecbad692430c6269fcf.mp4",
+            },
             ctaText: "Browse the Catalog",
             ctaLink: "/search",
           }}
@@ -55,7 +69,64 @@ export default async function HomePage() {
             collectionUrl="/search"
           />
         </Container>
+
+        <BannerSection
+          headingLevel="h2"
+          hero={{
+            id: "homepage-bedroom-sale",
+            headline: "The Semi-Annual Bedroom Sale",
+            subheadline: null,
+            backgroundImage: {
+              url: "https://cdn.shopify.com/s/files/1/0968/7236/6467/files/ba52372f-eace-4eca-a867-d92aed5bab5b-color-smoked-ash-oxWB0cyHNJnTlCbm8GGURF572Y8LgF.png?v=1776523451",
+              alt: "The Semi-Annual Bedroom Sale",
+              width: 1920,
+              height: 640,
+            },
+            ctaText: "Shop the Sale",
+            ctaLink: "/collections/bedroom",
+          }}
+        />
+
+        <Container>
+          <Suspense
+            fallback={
+              <RelatedProductsSectionSkeleton title="Shop Bookcases" aspectRatio="portrait" />
+            }
+          >
+            <BookcasesSlider locale={locale} />
+          </Suspense>
+        </Container>
+
+        <BannerSection
+          headingLevel="h2"
+          hero={{
+            id: "homepage-rugs",
+            headline: "Eye-Catching Interior Rugs",
+            subheadline: null,
+            backgroundImage: {
+              url: "https://cdn.shopify.com/s/files/1/0968/7236/6467/files/06d5df4c-347b-4b6b-91d1-c6bbade245ba-2-GOxxEWNRZj0NgqxVk1TPPyAXvdRi0c.png?v=1776523437",
+              alt: "Eye-catching interior rugs",
+              width: 1920,
+              height: 640,
+            },
+            ctaText: "Shop Rugs",
+            ctaLink: "/collections/rugs",
+          }}
+        />
       </Sections>
     </Page>
   );
 }
+
+async function BookcasesSlider({ locale }: { locale: Locale }) {
+  const { products } = await getCatalogProducts({ query: "bookcase", limit: 8, locale });
+  if (products.length === 0) return null;
+  return (
+    <ProductsSlider
+      title="Shop Bookcases"
+      products={products}
+      locale={locale}
+      aspectRatio="portrait"
+    />
+  );
+}
diff --git a/apps/template/app/products/[handle]/page.tsx b/apps/template/app/products/[handle]/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation";
 
 import { ProductDetailPage } from "@/components/product-detail/product-detail-page";
 import { getLocale } from "@/lib/params";
+import { getProductReviews } from "@/lib/reviews/server";
 import { buildAlternates, buildOpenGraph } from "@/lib/seo";
 import { getCatalogProducts, getProduct } from "@/lib/shopify/operations/products";
 
@@ -69,6 +70,7 @@ export const unstable_instant = {
       params: { handle: "__placeholder__" },
       searchParams: { variantId: "1" },
       cookies: [{ name: "shopify_cartId", value: null }],
+      headers: [["x-vercel-ip-postal-code", null]],
     },
   ],
 };
@@ -89,11 +91,14 @@ export default async function ProductPage({
     getProduct(handle, locale).catch(() => notFound()),
   );
 
+  const reviewsPromise = handlePromise.then((handle) => getProductReviews(handle));
+
   const variantIdPromise = searchParams.then((sp) => sp?.variantId as string | undefined);
 
   return (
     <ProductDetailPage
       productPromise={productPromise}
+      reviewsPromise={reviewsPromise}
       locale={locale}
       variantIdPromise={variantIdPromise}
     />

diff --git a/apps/template/app/search/page.tsx b/apps/template/app/search/page.tsx
@@ -73,6 +73,7 @@ export const unstable_instant = {
         sort: null,
       },
       cookies: [{ name: "shopify_cartId", value: null }],
+      headers: [["x-vercel-ip-postal-code", null]],
     },
   ],
 };
@@ -104,7 +105,7 @@ export default async function SearchPage({ searchParams }: PageProps<"/search">)
         <FilterTransitionProvider>
           <Sections className="gap-5">
             <div>
-              <h1 className="text-3xl sm:text-4xl md:text-5xl font-semibold tracking-tight">
+              <h1 className="font-display text-3xl sm:text-4xl md:text-5xl font-semibold tracking-tight">
                 <Link href="/search">{t("title")}</Link>
                 <Suspense fallback={null}>
                   <SearchQueryLabel searchParamsPromise={searchParams} />

diff --git a/apps/template/components/account/page-header.tsx b/apps/template/components/account/page-header.tsx
@@ -1,7 +1,9 @@
 export function AccountPageHeader({ title, description }: { title: string; description?: string }) {
   return (
     <div>
-      <h1 className="text-3xl sm:text-4xl md:text-5xl font-semibold tracking-tight">{title}</h1>
+      <h1 className="font-display text-3xl sm:text-4xl md:text-5xl font-semibold tracking-tight">
+        {title}
+      </h1>
       {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
     </div>
   );

diff --git a/apps/template/components/action-bar/index.tsx b/apps/template/components/action-bar/index.tsx
@@ -10,7 +10,7 @@ export function ActionBar({ children }: ActionBarProps) {
   if (!children) return null;
 
   return (
-    <div className="fixed bottom-5 right-5 z-40 flex items-center bg-input/80 backdrop-blur-md h-12 rounded-full shadow-[0px_2px_4px_0px_rgba(90,90,90,0.30)] outline -outline-offset-1 outline-border/35 px-2">
+    <div className="fixed bottom-5 right-5 z-40 flex items-center bg-link backdrop-blur-md h-12 rounded-full shadow-[0px_2px_4px_0px_rgba(90,90,90,0.30)] px-2">
       {children}
     </div>
   );

diff --git a/apps/template/components/agent/agent-button.tsx b/apps/template/components/agent/agent-button.tsx
@@ -14,11 +14,11 @@ export function AgentButton() {
       <button
         ref={triggerRef}
         type="button"
-        className="flex items-center gap-1.5 px-2 py-1"
+        className="flex items-center gap-1.5 px-2 py-1 text-link-foreground"
         onClick={() => setOpen((prev) => !prev)}
         aria-expanded={open}
       >
-        <MessageCircle className="size-4 text-primary" />
+        <MessageCircle className="size-4" />
         <span className="sr-only">Agent</span>
       </button>
       {open && <AgentPanel open={open} onOpenChange={setOpen} triggerRef={triggerRef} />}

diff --git a/apps/template/components/cart-page/empty-cart.tsx b/apps/template/components/cart-page/empty-cart.tsx
@@ -6,10 +6,12 @@ export async function Empty() {
 
   return (
     <div className="flex flex-col items-center justify-center gap-5 py-10 px-5">
-      <h2 className="text-2xl sm:text-3xl font-semibold tracking-tighter">{t("empty")}</h2>
+      <h2 className="font-display text-2xl sm:text-3xl font-semibold tracking-tighter">
+        {t("empty")}
+      </h2>
       <Link
         href="/"
-        className="inline-flex items-center justify-center h-12 px-8 rounded-lg text-sm font-medium bg-foreground text-background hover:bg-foreground/90 transition-colors"
+        className="inline-flex items-center justify-center h-12 px-8 rounded-lg text-sm font-medium bg-link text-link-foreground hover:bg-link/90 transition-colors"
       >
         {t("continueShopping")}
       </Link>

diff --git a/apps/template/components/cart-page/header.tsx b/apps/template/components/cart-page/header.tsx
@@ -11,7 +11,7 @@ export function Header() {
 
   return (
     <div className="flex items-center gap-2.5">
-      <h1 className="text-3xl sm:text-4xl md:text-5xl font-semibold tracking-tight">
+      <h1 className="font-display text-3xl sm:text-4xl md:text-5xl font-semibold tracking-tight">
         {t("shoppingCart")}
       </h1>
       {count > 0 && (

diff --git a/apps/template/components/cart-page/summary.tsx b/apps/template/components/cart-page/summary.tsx
@@ -32,7 +32,7 @@ function CheckoutLink({
   }, []);
 
   const baseClassName =
-    "flex items-center justify-center w-full h-12 rounded-lg text-sm font-medium bg-foreground text-background transition-colors";
+    "flex items-center justify-center w-full h-12 rounded-lg text-sm font-medium bg-link text-link-foreground transition-colors";
 
   if (isUpdatingCart || isCheckingOut) {
     return (
@@ -48,7 +48,7 @@ function CheckoutLink({
   return (
     <button
       type="button"
-      className={cn(baseClassName, "hover:bg-foreground/90 cursor-pointer")}
+      className={cn(baseClassName, "hover:bg-link/90 cursor-pointer")}
       onClick={async () => {
         setIsCheckingOut(true);
         const { checkoutUrl: url } = await prepareCheckoutAction();

diff --git a/apps/template/components/cart/overlay-content.tsx b/apps/template/components/cart/overlay-content.tsx
@@ -74,13 +74,13 @@ export function OverlayContent({ locale }: OverlayContentProps) {
   if (!displayCart || displayCart.lines.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center h-full px-5 text-center">
-        <h3 className="text-2xl font-semibold tracking-tighter mb-6">{t("empty")}</h3>
+        <h3 className="font-display text-2xl font-semibold tracking-tighter mb-6">{t("empty")}</h3>
         <Button
           onClick={() => {
             setOverlayOpen(false);
             router.push("/");
           }}
-          className="h-12 px-8 bg-foreground text-background hover:bg-foreground/90"
+          className="h-12 px-8 bg-link text-link-foreground hover:bg-link/90"
         >
           {t("continueShopping")}
         </Button>
@@ -104,7 +104,7 @@ export function OverlayContent({ locale }: OverlayContentProps) {
         {/* Checkout Button */}
         <Button
           onClick={handleCheckout}
-          className="w-full h-12 justify-center bg-foreground text-background hover:bg-foreground/90"
+          className="w-full h-12 justify-center bg-link text-link-foreground hover:bg-link/90"
           disabled={isCheckingOut || isUpdatingCart}
           aria-label={t("proceedToCheckout")}
         >
-Original file line number
+Diff line change
@@ Expand Up / @@ -84,6 +84,7 @@ export const unstable_instant = { @@
             sort: null,
           },
           cookies: [{ name: "shopify_cartId", value: null }],
+          headers: [["x-vercel-ip-postal-code", null]],
         },
       ],
     };
@@ Expand Down @@