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

Redesign storefront to match minimal reference design

Browse Source 
Product cards, header, footer, PDP, and typography reworked toward a
leaner layout; adds shop policy pages backed by the Storefront API.

- Type: switch to Geist Sans/Mono, regular-weight headings
- Product cards: drop borders, rounded corners, and action buttons
- Header: shorter bar, no bottom border, center-out hover underline,
  bag icon replacing the cart icon (drawer wording updated to match)
- Footer: single line with policy links and social icons on bg-background
- Policies: /policies/[handle] renders shop.privacyPolicy,
  termsOfService, refundPolicy, shippingPolicy, subscriptionPolicy
  (SSG, hourly revalidation)
- PDP: image grid with mobile carousel + dots and click-to-zoom,
  sticky info column, colour swatches from option optionValues with a
  configurable name-to-colour fallback in config/swatches.ts,
  Shop-purple checkout button
- Recommendations: left-aligned heading on bg-background
- Ignore .env*.local and tsconfig.tsbuildinfo

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
This commit is contained in:
Rami Bitar
2026-08-01 11:11:25 -04:00
co-authored by Claude Opus 5
parent e3d5e75299
commit 69f7435d6e
25 changed files with 1055 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/shopify/header.tsx
+18 -20
View File
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
import Link from 'next/link';
import { useCartStore } from '@/hooks/use-shopify-cart';
import CartDrawer from '@/components/shopify/cart-drawer';
import { RiShoppingCartLine, RiCloseLine, RiMenu3Line } from '@remixicon/react';
import { RiShoppingBagLine, RiCloseLine, RiMenu3Line } from '@remixicon/react';
const CartIcon: React.FC = () => {
const toggleCart = useCartStore((s) => s.toggleCart);
@@ -15,11 +15,12 @@ const CartIcon: React.FC = () => {
return (
<button
onClick={toggleCart}
className="relative p-2.5 text-foreground hover:text-primary transition-all duration-200 rounded-full hover:bg-secondary"
aria-label={`Open bag (${itemCount})`}
className="relative p-2 text-foreground hover:text-muted-foreground transition-colors"
>
<RiShoppingCartLine size={20} />
<RiShoppingBagLine size={20} />
{itemCount > 0 && (
<span className="absolute -top-0.5 -right-0.5 bg-primary text-primary-foreground text-[10px] font-mono rounded-full w-5 h-5 flex items-center justify-center font-semibold shadow">
<span className="absolute top-0 right-0 bg-primary text-primary-foreground text-[10px] font-mono rounded-full w-4 h-4 flex items-center justify-center">
{itemCount > 99 ? '99+' : itemCount}
</span>
)}
@@ -49,31 +50,31 @@ const Header: React.FC<HeaderProps> = ({
const [menuOpen, setMenuOpen] = useState(false);
return (
<nav className="bg-white/95 backdrop-blur-md border-b border-border sticky top-0 z-50">
<nav className="bg-background/95 backdrop-blur-md sticky top-0 z-50">
<div className="max-w-screen-2xl mx-auto px-8">
<div className="flex justify-between items-center h-20">
<div className="flex justify-between items-center h-14">
{/* Logo */}
<Link href="/" className="flex items-center group">
<Link href="/" className="flex items-center">
{logoUrl ? (
<img
src={logoUrl}
alt={storeName}
className="h-9 w-auto object-contain"
className="h-6 w-auto object-contain"
/>
) : (
<span className="text-4xl font-semibold tracking-tighter font-poppins text-foreground group-hover:text-primary transition-colors">
<span className="text-base font-medium tracking-tight text-foreground">
{storeName}
</span>
)}
</Link>
{/* Desktop Navigation */}
<div className="hidden md:flex items-center gap-x-10 text-sm font-medium">
<div className="hidden md:flex items-center gap-x-8 text-sm">
{links.map((link, index) => (
<Link
key={index}
href={link.url}
className="text-foreground hover:text-primary relative after:absolute after:bottom-[-2px] after:left-0 after:h-[2px] after:w-0 after:bg-primary after:transition-all hover:after:w-full"
className="text-foreground relative after:absolute after:bottom-[-4px] after:left-1/2 after:-translate-x-1/2 after:h-px after:w-0 after:bg-foreground after:transition-[width] after:duration-300 hover:after:w-full"
>
{link.label}
</Link>
@@ -81,16 +82,16 @@ const Header: React.FC<HeaderProps> = ({
</div>
{/* Actions */}
<div className="flex items-center gap-x-2">
<div className="flex items-center gap-x-1">
<CartIcon />
{/* Mobile hamburger */}
<button
onClick={() => setMenuOpen(!menuOpen)}
className="md:hidden p-2.5 text-foreground hover:text-primary transition-all rounded-full hover:bg-secondary"
className="md:hidden p-2 text-foreground hover:text-muted-foreground transition-colors"
aria-label="Toggle menu"
>
{menuOpen ? <RiCloseLine size={28} /> : <RiMenu3Line size={28} />}
{menuOpen ? <RiCloseLine size={22} /> : <RiMenu3Line size={22} />}
</button>
</div>
</div>
@@ -98,21 +99,18 @@ const Header: React.FC<HeaderProps> = ({
{/* Mobile Menu */}
{menuOpen && (
<div className="md:hidden border-t bg-white">
<div className="max-w-screen-2xl mx-auto px-8 py-8 flex flex-col gap-y-6 text-lg font-medium">
<div className="md:hidden bg-background">
<div className="max-w-screen-2xl mx-auto px-8 pb-6 flex flex-col gap-y-4 text-sm">
{links.map((link, index) => (
<Link
key={index}
href={link.url}
onClick={() => setMenuOpen(false)}
className="text-foreground hover:text-primary transition-colors py-1"
className="text-foreground hover:text-muted-foreground transition-colors"
>
{link.label}
</Link>
))}
<div className="pt-4 border-t text-xs text-muted-foreground font-mono tracking-widest">
PROFESSIONAL • CLEAN • MODERN
</div>
</div>
</div>
)}