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/product-recommendations.tsx
+30 -33
View File
@@ -11,11 +11,13 @@ import ProductCard from './product-card';
interface ProductRecommendationsProps {
productId?: string;
title?: string;
limit?: number;
}
const ProductRecommendations: React.FC<ProductRecommendationsProps> = ({
productId: productIdProp,
title = 'You Might Also Like These Products 2',
title = 'You May Also Like',
limit = 4,
}) => {
const params = useParams();
const handle = params?.handle as string | undefined;
@@ -31,45 +33,40 @@ const ProductRecommendations: React.FC<ProductRecommendationsProps> = ({
}
return (
<div className="bg-gray-50 py-16">
<div className="container mx-auto px-4">
<h2 className="text-4xl font-bold text-center mb-12 text-gray-900 font-heading">
<section className="bg-background py-16">
<div className="max-w-screen-2xl mx-auto px-8">
<h2 className="text-2xl md:text-3xl font-normal text-foreground mb-8">
{title}
</h2>
{loading ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
{Array.from({ length: 4 }).map((_, index) => (
<div
key={index}
className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse"
>
<div className="aspect-square bg-gray-200"></div>
<div className="p-6">
<div className="h-6 bg-gray-200 rounded mb-2"></div>
<div className="h-4 bg-gray-200 rounded mb-4"></div>
<div className="h-8 bg-gray-200 rounded mb-4"></div>
<div className="h-12 bg-gray-200 rounded"></div>
</div>
</div>
))}
</div>
) : error ? (
<div className="text-center py-8">
<p className="text-gray-500">Recommendations could not be loaded</p>
</div>
{error ? (
<p className="text-sm text-muted-foreground">
Recommendations could not be loaded
</p>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
{recommendations.slice(0, 4).map((recommendedProduct) => (
<ProductCard
key={recommendedProduct.id}
product={recommendedProduct}
/>
))}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12">
{loading
? Array.from({ length: limit }).map((_, index) => (
<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>
))
: recommendations
.slice(0, limit)
.map((recommendedProduct) => (
<ProductCard
key={recommendedProduct.id}
product={recommendedProduct}
/>
))}
</div>
)}
</div>
</div>
</section>
);
};