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/products.tsx
+19 -40
View File
@@ -48,12 +48,14 @@ interface Product {
interface ProductsProps {
title?: string;
subtitle?: string;
limit?: number;
showLoadMore?: boolean;
}
const Products: React.FC<ProductsProps> = ({
title = 'Our Products',
title = 'Shopify Hydrogen Storefront',
subtitle = 'An agent-friendly Shopify storefront built with Next.js and Hydrogen.',
limit = 12,
showLoadMore = true,
}) => {
@@ -109,10 +111,6 @@ const Products: React.FC<ProductsProps> = ({
fetchProducts();
}, [limit]);
const handleAddToCart = async (product: Product) => {
console.log('Adding to cart:', product);
};
const handleLoadMore = () => {
if (!loadingMore && hasMoreProducts) {
fetchProducts(products, true);
@@ -123,32 +121,20 @@ const Products: React.FC<ProductsProps> = ({
return (
<div className="py-20">
<div className="max-w-screen-2xl mx-auto px-8">
<div className="flex justify-center mb-6">
<div className="inline px-6 py-2 bg-white border rounded-3xl text-xs font-mono tracking-widest text-muted-foreground">
DISCOVER
</div>
</div>
<h2 className="text-center text-6xl font-bold tracking-tighter font-heading mb-5 text-foreground">
<h2 className="text-center text-2xl md:text-3xl font-normal max-w-3xl mx-auto text-foreground">
{title}
</h2>
<p className="text-center text-muted-foreground max-w-md mx-auto mb-16">
Loading our finest selection...
<p className="text-center text-sm font-normal max-w-xl mx-auto text-muted-foreground mt-2.5 mb-16">
{subtitle}
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
{Array.from({ length: 8 }).map((_, index) => (
<div
key={index}
className="bg-white rounded-3xl overflow-hidden animate-pulse border border-border h-[460px]"
>
<div className="h-[280px] bg-zinc-100"></div>
<div className="p-8 space-y-6">
<div className="h-6 bg-zinc-200 rounded-full w-4/5"></div>
<div className="h-4 bg-zinc-200 rounded w-1/3"></div>
<div className="pt-4 flex gap-3">
<div className="h-11 flex-1 bg-zinc-200 rounded-2xl"></div>
<div className="h-11 flex-1 bg-zinc-200 rounded-2xl"></div>
</div>
<div key={index} className="animate-pulse">
<div className="aspect-square bg-zinc-100"></div>
<div className="pt-4 space-y-2">
<div className="h-4 bg-zinc-200 w-4/5"></div>
<div className="h-4 bg-zinc-200 w-1/4"></div>
</div>
</div>
))}
@@ -162,9 +148,12 @@ const Products: React.FC<ProductsProps> = ({
return (
<div className="py-20 bg-zinc-50">
<div className="max-w-screen-2xl mx-auto px-8 text-center">
<h2 className="text-6xl font-bold tracking-tighter font-heading mb-8 text-foreground">
<h2 className="text-2xl md:text-3xl font-normal max-w-3xl mx-auto text-foreground">
{title}
</h2>
<p className="text-sm font-normal max-w-xl mx-auto text-muted-foreground mt-2.5 mb-12">
{subtitle}
</p>
<div className="mx-auto max-w-sm bg-white border border-border rounded-3xl p-12">
<i className="ri-inbox-line text-6xl text-muted-foreground mb-6 block"></i>
<h3 className="font-semibold text-2xl mb-3 tracking-tight">
@@ -188,26 +177,16 @@ const Products: React.FC<ProductsProps> = ({
return (
<div className="py-20 bg-white">
<div className="max-w-screen-2xl mx-auto px-8">
<div className="flex justify-center mb-6">
<div className="inline px-6 py-2 bg-zinc-100 rounded-3xl text-xs font-mono tracking-[1.5px] text-muted-foreground">
CURATED SELECTION
</div>
</div>
<h2 className="text-center text-6xl font-bold tracking-tighter font-heading mb-5 text-foreground">
<h2 className="text-center text-2xl md:text-3xl font-normal max-w-3xl mx-auto text-foreground">
{title}
</h2>
<p className="text-center text-muted-foreground max-w-md mx-auto mb-16 text-lg">
Beautifully designed objects for everyday life
<p className="text-center text-sm font-normal max-w-xl mx-auto text-muted-foreground mt-2.5 mb-16">
{subtitle}
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-8 gap-y-16 mb-20">
{products.map((product) => (
<ProductCard
key={product.id}
product={product}
onAddToCart={handleAddToCart}
/>
<ProductCard key={product.id} product={product} />
))}
</div>