Brand the storefront and apply the generated shop theme

src/app/[country]/[locale]/(checkout)/__tests__/layout.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock("@/contexts/CheckoutContext", () => ({
+  CheckoutProvider: ({ children }: { children: ReactNode }) => children,
+  CheckoutSummary: () => null,
+}));
+
+vi.mock("@/contexts/TenantContext", () => ({
+  useTenantConfig: () => ({ storeName: "Test Store" }),
+}));
+
+import CheckoutLayout from "../layout";
+
+describe("CheckoutLayout branding", () => {
+  it("renders the OLITT logo and never the Spree logo", () => {
+    render(
+      <CheckoutLayout>
+        <div>checkout body</div>
+      </CheckoutLayout>,
+    );
+
+    const logos = screen.getAllByRole("img", { name: "Test Store" });
+    expect(logos.length).toBeGreaterThan(0);
+    for (const logo of logos) {
+      expect(logo).toHaveAttribute("src", "/olitt-logo.svg");
+      expect(logo.getAttribute("src")).not.toContain("spree");
+    }
+  });
+});

src/app/[country]/[locale]/(checkout)/checkout/[id]/page.tsx

@@ -86,8 +86,6 @@ async function CheckoutDataLoader({ params }: CheckoutPageProps) {
         <PageSectionsRenderer
           sections={pageSlots.checkoutPage.beforeMain}
           basePath={basePath}
-          locale={locale}
-          country={urlCountry}
           currency={currency}
           keyPrefix="checkout-before"
         />
@@ -101,8 +99,6 @@ async function CheckoutDataLoader({ params }: CheckoutPageProps) {
         <PageSectionsRenderer
           sections={pageSlots.checkoutPage.afterMain}
           basePath={basePath}
-          locale={locale}
-          country={urlCountry}
           currency={currency}
           keyPrefix="checkout-after"
         />

src/app/[country]/[locale]/(checkout)/layout.tsx

@@ -23,15 +23,15 @@ function CheckoutHeader() {
   const tenantConfig = useTenantConfig();
   const branding = resolveTenantBranding(tenantConfig, {
     name: tenantConfig.storeName ?? "Store",
-    logoUrl: "/spree.png",
+    logoUrl: "/olitt-logo.svg",
   });
   const navigation = resolveTenantNavigation(tenantConfig);
 
   return (
     <header className="flex items-center justify-between">
       <Link href={basePath || "/"} className="flex items-center space-x-2">
         <Image
-          src={branding.logoUrl ?? "/spree.png"}
+          src={branding.logoUrl ?? "/olitt-logo.svg"}
           alt={branding.name ?? tenantConfig.storeName ?? "Store"}
           width={90}
           height={32}
@@ -138,18 +138,9 @@ interface CheckoutLayoutProps {
 
 function CheckoutLayoutContent({ children }: CheckoutLayoutProps) {
   return (
-    <div
-      className="min-h-screen flex flex-col"
-      style={{
-        background: "var(--color-background)",
-        color: "var(--color-text)",
-      }}
-    >
+    <div className="min-h-screen flex flex-col bg-background text-foreground">
       {/* Mobile header */}
-      <div
-        className="lg:hidden border-b"
-        style={{ borderColor: "var(--color-border)" }}
-      >
+      <div className="lg:hidden border-b border-border">
         <div className="px-5">
           <CheckoutHeader />
         </div>
@@ -175,13 +166,7 @@ function CheckoutLayoutContent({ children }: CheckoutLayoutProps) {
         </div>
 
         {/* Desktop summary sidebar — Shopify: light gray bg with left border */}
-        <div
-          className="hidden lg:block lg:col-start-3 border-l"
-          style={{
-            borderColor: "var(--color-border)",
-            background: "var(--color-surface)",
-          }}
-        >
+        <div className="hidden lg:block lg:col-start-3 border-l border-border bg-muted">
           <div className="sticky top-0 px-10 py-10">
             <CheckoutSummary />
           </div>

src/app/[country]/[locale]/(storefront)/page.tsx

@@ -105,9 +105,7 @@ export default async function HomePage({
               <FeaturedProductsSection
                 key={section.type}
                 basePath={basePath}
-                country={country}
                 currency={currency}
-                locale={locale}
                 section={section}
               />
             );

src/app/[country]/[locale]/(storefront)/pages/[...slug]/page.tsx

@@ -58,12 +58,6 @@ export default async function DynamicStorePage({
   }
 
   return (
-    <DynamicPageRenderer
-      page={page}
-      basePath={basePath}
-      locale={locale}
-      country={country}
-      currency={currency}
-    />
+    <DynamicPageRenderer page={page} basePath={basePath} currency={currency} />
   );
 }

src/app/[country]/[locale]/(storefront)/products/[slug]/page.tsx

@@ -107,8 +107,6 @@ export default async function ProductPage({
         <PageSectionsRenderer
           sections={pageSlots.productPage.beforeMain}
           basePath={basePath}
-          locale={locale}
-          country={country}
           currency={currency}
           keyPrefix="product-before"
         />
@@ -118,8 +116,6 @@ export default async function ProductPage({
         <PageSectionsRenderer
           sections={pageSlots.productPage.afterMain}
           basePath={basePath}
-          locale={locale}
-          country={country}
           currency={currency}
           keyPrefix="product-after"
         />

src/app/layout.tsx

@@ -35,6 +35,7 @@ export const metadata: Metadata = {
     default: rootStoreName,
   },
   description: getStoreDescription(),
+  icons: { icon: "/olitt-logo.svg" },
 };
 
 export default async function RootLayout({

src/components/home/FeaturedProductsSection.tsx

@@ -1,10 +1,10 @@
 import Link from "next/link";
-import type { CSSProperties } from "react";
 import { Suspense } from "react";
 import { FeaturedProducts } from "@/components/products/FeaturedProducts";
 import { ProductCardSkeleton } from "@/components/products/ProductCardSkeleton";
 import { Button } from "@/components/ui/button";
 import type { HomepageFeaturedProductsSectionConfig } from "@/lib/homepage";
+import { buildSectionThemeVars } from "@/lib/homepage/section-theme";
 
 function CarouselSkeleton() {
   return (
@@ -18,24 +18,17 @@ function CarouselSkeleton() {
 
 interface FeaturedProductsSectionProps {
   basePath: string;
-  locale: string;
-  country: string;
   currency?: string;
   section: HomepageFeaturedProductsSectionConfig;
 }
 
 export async function FeaturedProductsSection({
   basePath,
-  locale,
-  country,
   currency,
   section,
 }: FeaturedProductsSectionProps) {
   const theme = section.theme ?? {};
-  const sectionStyle: CSSProperties = {
-    backgroundColor: theme.background,
-    color: theme.foreground,
-  };
+  const sectionStyle = buildSectionThemeVars(theme);
   const mutedTextColor = theme.mutedForeground ?? "#64748b";
   const borderColor = theme.borderColor ?? "#cbd5e1";
 
@@ -79,12 +72,7 @@ export async function FeaturedProductsSection({
         </div>
         <div className="relative group/carousel">
           <Suspense fallback={<CarouselSkeleton />}>
-            <FeaturedProducts
-              basePath={basePath}
-              locale={locale}
-              country={country}
-              currency={currency}
-            />
+            <FeaturedProducts basePath={basePath} currency={currency} />
           </Suspense>
         </div>
       </div>

src/components/home/FeaturesSection.tsx

@@ -1,6 +1,6 @@
 import { ShieldCheck, ShoppingBag, Sparkles, Truck } from "lucide-react";
-import type { CSSProperties } from "react";
 import type { HomepageFeaturesSectionConfig } from "@/lib/homepage";
+import { buildSectionThemeVars } from "@/lib/homepage/section-theme";
 
 interface FeaturesSectionProps {
   section: HomepageFeaturesSectionConfig;
@@ -21,10 +21,7 @@ function getFeatureIcon(iconName?: string) {
 
 export async function FeaturesSection({ section }: FeaturesSectionProps) {
   const theme = section.theme ?? {};
-  const sectionStyle: CSSProperties = {
-    backgroundColor: theme.background,
-    color: theme.foreground,
-  };
+  const sectionStyle = buildSectionThemeVars(theme);
   const mutedTextColor = theme.mutedForeground ?? "#6b7280";
   const cardBackground = theme.cardBackground ?? "#ffffff";
   const borderColor = theme.borderColor ?? "#e5e7eb";

src/components/home/HeroSection.tsx

@@ -1,12 +1,12 @@
 import { ArrowRight, Play } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
-import type { CSSProperties } from "react";
 import { Button } from "@/components/ui/button";
 import type {
   HomepageActionIcon,
   HomepageHeroSectionConfig,
 } from "@/lib/homepage";
+import { buildSectionThemeVars } from "@/lib/homepage/section-theme";
 
 interface HeroSectionProps {
   basePath: string;
@@ -36,10 +36,7 @@ function getActionIcon(icon?: HomepageActionIcon) {
 
 export async function HeroSection({ basePath, section }: HeroSectionProps) {
   const theme = section.theme ?? {};
-  const sectionStyle: CSSProperties = {
-    backgroundColor: theme.background,
-    color: theme.foreground,
-  };
+  const sectionStyle = buildSectionThemeVars(theme);
   const mutedTextColor = theme.mutedForeground ?? "#6b7280";
   const cardBackground = theme.cardBackground ?? "#ffffff";
   const borderColor = theme.borderColor ?? "#e5e7eb";

src/components/page-builder/DynamicPageRenderer.tsx

@@ -4,24 +4,18 @@ import type { DynamicPageConfig } from "@/lib/page-builder";
 interface DynamicPageRendererProps {
   page: DynamicPageConfig;
   basePath: string;
-  locale: string;
-  country: string;
   currency?: string;
 }
 
 export function DynamicPageRenderer({
   page,
   basePath,
-  locale,
-  country,
   currency,
 }: DynamicPageRendererProps) {
   return (
     <PageSectionsRenderer
       sections={page.sections}
       basePath={basePath}
-      locale={locale}
-      country={country}
       currency={currency}
       keyPrefix={page.slug}
     />

src/components/page-builder/PageSectionsRenderer.tsx

@@ -8,17 +8,13 @@ import type { DynamicPageSectionConfig } from "@/lib/page-builder";
 interface PageSectionsRendererProps {
   sections: DynamicPageSectionConfig[];
   basePath: string;
-  locale: string;
-  country: string;
   currency?: string;
   keyPrefix?: string;
 }
 
 export function PageSectionsRenderer({
   sections,
   basePath,
-  locale,
-  country,
   currency,
   keyPrefix = "section",
 }: PageSectionsRendererProps) {
@@ -39,9 +35,7 @@ export function PageSectionsRenderer({
               <FeaturedProductsSection
                 key={key}
                 basePath={basePath}
-                country={country}
                 currency={currency}
-                locale={locale}
                 section={section}
               />
             );

src/components/products/FeaturedProducts.tsx

@@ -1,8 +1,7 @@
 import dynamic from "next/dynamic";
 import { ProductCardSkeleton } from "@/components/products/ProductCardSkeleton";
 import { PRODUCT_CARD_FIELDS } from "@/lib/data/cached";
-import { cachedListProducts } from "@/lib/data/products";
-import { getAccessToken } from "@/lib/spree";
+import { getProducts } from "@/lib/data/products";
 
 const LazyProductCarousel = dynamic(
   () =>
@@ -22,23 +21,17 @@ const LazyProductCarousel = dynamic(
 
 interface FeaturedProductsProps {
   basePath: string;
-  locale: string;
-  country: string;
   currency?: string;
 }
 
 export async function FeaturedProducts({
   basePath,
-  locale,
-  country,
   currency,
 }: FeaturedProductsProps) {
-  const userToken = await getAccessToken();
-  const productsResponse = await cachedListProducts(
-    { limit: 8, fields: PRODUCT_CARD_FIELDS },
-    { locale, country },
-    userToken,
-  );
+  const productsResponse = await getProducts({
+    limit: 10,
+    fields: PRODUCT_CARD_FIELDS,
+  });
 
   return (
     <LazyProductCarousel

src/components/products/ProductCard.tsx

@@ -66,7 +66,7 @@ export const ProductCard = memo(function ProductCard({
       onClick={handleClick}
     >
       {/* Image */}
-      <div className="relative aspect-square bg-gray-100 rounded-md overflow-hidden">
+      <div className="relative aspect-square bg-muted rounded-md overflow-hidden">
         <ProductImage
           src={imageUrl}
           alt={product.name}
@@ -85,25 +85,27 @@ export const ProductCard = memo(function ProductCard({
 
       {/* Content */}
       <div className="p-4">
-        <h3 className="text-sm font-medium text-gray-900 group-hover:text-primary transition-colors line-clamp-2">
+        <h3 className="text-sm font-medium text-foreground group-hover:text-primary transition-colors line-clamp-2">
           {product.name}
         </h3>
 
         <div className="mt-2 flex items-center gap-2">
           {displayPrice && (
-            <span className="text-lg font-semibold text-gray-900">
+            <span className="text-lg font-semibold text-foreground">
               {displayPrice}
             </span>
           )}
           {onSale && strikethroughPrice && (
-            <span className="text-sm text-gray-500 line-through">
+            <span className="text-sm text-muted-foreground line-through">
               {strikethroughPrice}
             </span>
           )}
         </div>
 
         {!product.purchasable && (
-          <span className="mt-2 text-sm text-gray-500">{t("outOfStock")}</span>
+          <span className="mt-2 text-sm text-muted-foreground">
+            {t("outOfStock")}
+          </span>
         )}
       </div>
     </Link>