From 3442f19816acddbc66542c5ed92e9cbd4c71bc57 Mon Sep 17 00:00:00 2001 From: Rami Bitar Date: Tue, 4 Aug 2026 17:36:26 -0400 Subject: [PATCH] Add Handlebars templates for theming the storefront Three files gain a .hbr sibling so a storefront can be compiled with a store's own branding: app/globals.css, app/layout.tsx and components/logo.tsx. The committed files stay as they are and remain the hand-maintained default. Fourteen variables drive them: shopName, logoUrl, primaryColor, accentColor, bgColor, fontHeader and fontBody are supplied per store, while fgColor, primaryFgColor, accentFgColor, surfaceColor, mutedColor, mutedFgColor and borderColor derive from those unless pinned. Two changes were needed for the fonts to be swappable. The CSS variables next/font declares are now generic (--font-heading-family, --font-body-family, --font-mono-family) rather than named after Geist, and headings set font-family: var(--font-heading) so fontHeader has an effect when it differs from fontBody. The compiler lives outside this repo so the template carries no build script or dependency for it. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_013amafJZMQmXgeFEotYWfaw --- app/globals.css.hbr | 237 ++++++++++++++++++++++++++++++++++++++++ app/layout.tsx.hbr | 48 ++++++++ components/logo.tsx.hbr | 58 ++++++++++ 3 files changed, 343 insertions(+) create mode 100644 app/globals.css.hbr create mode 100644 app/layout.tsx.hbr create mode 100644 components/logo.tsx.hbr diff --git a/app/globals.css.hbr b/app/globals.css.hbr new file mode 100644 index 0000000..9857d3f --- /dev/null +++ b/app/globals.css.hbr @@ -0,0 +1,237 @@ +@import 'tailwindcss'; + +@custom-variant dark (&:is(.dark *)); + +@theme { + /* Palette generated from the store's brand colours */ + --color-background: {{bgColor}}; + --color-foreground: {{fgColor}}; + + /* Card */ + --color-card: {{surfaceColor}}; + --color-card-foreground: {{fgColor}}; + + /* Popover */ + --color-popover: {{surfaceColor}}; + --color-popover-foreground: {{fgColor}}; + + /* Primary - the store's main brand colour */ + --color-primary: {{primaryColor}}; + --color-primary-foreground: {{primaryFgColor}}; + + /* Secondary */ + --color-secondary: {{mutedColor}}; + --color-secondary-foreground: {{fgColor}}; + + /* Muted */ + --color-muted: {{mutedColor}}; + --color-muted-foreground: {{mutedFgColor}}; + + /* Accent - the store's secondary brand colour */ + --color-accent: {{accentColor}}; + --color-accent-foreground: {{accentFgColor}}; + + /* Destructive */ + --color-destructive: hsl(0 84.2% 60.2%); + --color-destructive-foreground: hsl(0 0% 98%); + + /* Shop (accelerated checkout) purple */ + --color-shop: #5a31f4; + + /* Border */ + --color-border: {{borderColor}}; + --color-input: {{borderColor}}; + --color-ring: {{primaryColor}}; + + /* Radius - Modern larger corners */ + --radius-sm: 0.5rem; + --radius-md: 0.75rem; + --radius-lg: 1rem; + --radius-xl: 1.25rem; + + /* Typography — {{fontHeaderName}} headings / {{fontBodyName}} body. + The family variables are declared by next/font in app/layout.tsx. */ + --font-sans: var(--font-body-family), system-ui, sans-serif; + --font-mono: var(--font-mono-family), ui-monospace, SFMono-Regular, monospace; + --font-heading: var(--font-heading-family), system-ui, sans-serif; + --font-body: var(--font-body-family), system-ui, sans-serif; + --font-poppins: var(--font-heading-family), system-ui, sans-serif; +} + +/* Base styles for light, modern Shopify storefront */ +/* Tailwind v4 defaults an unqualified `border` to currentColor. shadcn + components (e.g. Button's outline variant) rely on this base layer to pick up + the theme's border colour instead of the text colour. */ +@layer base { + * { + border-color: var(--color-border); + } +} + +body { + font-feature-settings: + 'kern' 1, + 'tnum' 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Modern card design for products and collections */ +.card-modern { + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + border: 1px solid var(--color-border); +} + +.card-modern:hover { + transform: translateY(-8px); + box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.1); + border-color: color-mix(in oklab, var(--color-border), {{fgColor}} 4.5%); +} + +/* Heading styles — regular weight, slightly tightened like the Geist reference */ +h1, +h2, +.font-heading { + font-family: var(--font-heading); + font-weight: 400; + letter-spacing: -0.02em; +} + +/* Swipeable rows (mobile galleries) without a visible scrollbar */ +.no-scrollbar { + scrollbar-width: none; + -ms-overflow-style: none; +} + +.no-scrollbar::-webkit-scrollbar { + display: none; +} + +/* Diagonal strike marking an unavailable product option (size pill, swatch) */ +.option-unavailable { + background-image: linear-gradient( + to top right, + transparent calc(50% - 0.5px), + currentColor calc(50% - 0.5px), + currentColor calc(50% + 0.5px), + transparent calc(50% + 0.5px) + ); +} + +/* Product description (HTML returned by the Storefront API) */ +.product-description p { + margin-bottom: 1rem; +} + +.product-description > :last-child { + margin-bottom: 0; +} + +/* Shop policy body (HTML returned by the Storefront API) */ +.policy-body p, +.policy-body ul, +.policy-body ol { + margin-bottom: 1.5rem; +} + +.policy-body ul, +.policy-body ol { + padding-left: 1.25rem; + list-style: revert; +} + +.policy-body li { + margin-bottom: 0.5rem; +} + +.policy-body h2, +.policy-body h3, +.policy-body h4 { + margin-top: 2.5rem; + margin-bottom: 1rem; + font-size: 1.25rem; + font-weight: 500; +} + +.policy-body a { + text-decoration: underline; + text-underline-offset: 2px; +} + +.policy-body strong { + font-weight: 500; +} + +.policy-body > :last-child { + margin-bottom: 0; +} + +/* Enhanced button styles */ +button, +.btn-modern { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} + +.btn-modern:hover { + transform: translateY(-1px); + box-shadow: + 0 10px 15px -3px rgb(0 0 0 / 0.1), + 0 4px 6px -4px rgb(0 0 0 / 0.1); +} + +/* Hero section styles */ +.hero-bg { + background: linear-gradient( + 135deg, + color-mix(in oklab, var(--color-muted), {{bgColor}} 50%) 0%, + var(--color-muted) 100% + ); +} + +/* Product gallery improvements */ +.product-gallery-main { + transition: box-shadow 0.3s ease; +} + +.product-gallery-main:hover { + box-shadow: 0 0 0 1px + color-mix(in oklab, var(--color-border), {{fgColor}} 10%) inset; +} + +/* Clean price display */ +.price-display { + font-feature-settings: 'tnum'; +} + +@theme inline { + --animate-rainbow: rainbow var(--speed, 2s) infinite linear; + --color-color-5: var(--color-5); + --color-color-4: var(--color-4); + --color-color-3: var(--color-3); + --color-color-2: var(--color-2); + --color-color-1: var(--color-1); + @keyframes rainbow { + 0% { + background-position: 0%; + } + 100% { + background-position: 200%; + } + } +} + +:root { + --color-1: oklch(66.2% 0.225 25.9); + --color-2: oklch(60.4% 0.26 302); + --color-3: oklch(69.6% 0.165 251); + --color-4: oklch(80.2% 0.134 225); + --color-5: oklch(90.7% 0.231 133); +} + +.dark { + --color-1: oklch(66.2% 0.225 25.9); + --color-2: oklch(60.4% 0.26 302); + --color-3: oklch(69.6% 0.165 251); + --color-4: oklch(80.2% 0.134 225); + --color-5: oklch(90.7% 0.231 133); +} diff --git a/app/layout.tsx.hbr b/app/layout.tsx.hbr new file mode 100644 index 0000000..ed535ac --- /dev/null +++ b/app/layout.tsx.hbr @@ -0,0 +1,48 @@ +import React from 'react'; +import './globals.css'; +import type { Metadata } from 'next'; +import { + {{fontHeader}}, +{{#unless sameFont}} + {{fontBody}}, +{{/unless}} + Geist_Mono, +} from 'next/font/google'; +import StoreAssistant from '@/components/shopify/store-assistant'; + +const headingFont = {{fontHeader}}({ + subsets: ['latin'], + variable: '--font-heading-family', +}); + +const bodyFont = {{fontBody}}({ + subsets: ['latin'], + variable: '--font-body-family', +}); + +const monoFont = Geist_Mono({ + subsets: ['latin'], + variable: '--font-mono-family', +}); + +export const metadata: Metadata = { + title: {{json shopName}}, +}; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + {children} + + + + ); +} diff --git a/components/logo.tsx.hbr b/components/logo.tsx.hbr new file mode 100644 index 0000000..bfc8f6a --- /dev/null +++ b/components/logo.tsx.hbr @@ -0,0 +1,58 @@ +import React from 'react'; +import Link from 'next/link'; + +/** Baked in at compile time from the store's theme config. */ +const STORE_LOGO_URL = {{json logoUrl}}; +const STORE_NAME = {{json shopName}}; + +interface LogoProps { + /** Logo image URL. Falls back to the store name as a wordmark when absent. */ + src?: string | null; + /** Wordmark text, and the image's alt text. */ + storeName?: string; + /** Where the logo links to. Pass null to render it unwrapped. */ + href?: string | null; + /** Sizing for the image — height only, so the aspect ratio is preserved. */ + imageClassName?: string; + /** Sizing and weight for the wordmark fallback. */ + textClassName?: string; +} + +const Logo: React.FC = ({ + src, + storeName, + href = '/', + imageClassName = 'h-6', + textClassName = 'text-xl', +}) => { + // Callers pass `logoUrl=""` when they have nothing to supply, so fall back on + // any falsy value rather than only on `undefined`. + const logoSrc = src || STORE_LOGO_URL; + const name = storeName || STORE_NAME; + + const mark = logoSrc ? ( + {name} + ) : ( + + {name} + + ); + + if (href === null) { + return {mark}; + } + + return ( + + {mark} + + ); +}; + +export default Logo;