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
app/layout.tsx
+6 -17
View File
@@ -2,24 +2,16 @@
import React from 'react';
import './globals.css';
import { Space_Grotesk, Inter, Poppins } from 'next/font/google';
import { Geist, Geist_Mono } from 'next/font/google';
const poppins = Poppins({
const geist = Geist({
subsets: ['latin'],
weight: ['400', '500', '600', '700'],
variable: '--font-poppins',
variable: '--font-geist-sans',
});
const spaceGrotesk = Space_Grotesk({
const geistMono = Geist_Mono({
subsets: ['latin'],
weight: ['400', '500', '600', '700'],
variable: '--font-heading',
});
const inter = Inter({
subsets: ['latin'],
weight: ['400', '500', '600'],
variable: '--font-body',
variable: '--font-geist-mono',
});
export default function RootLayout({
@@ -28,10 +20,7 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<html
lang="en"
className={`${poppins.variable} ${spaceGrotesk.variable} ${inter.variable}`}
>
<html lang="en" className={`${geist.variable} ${geistMono.variable}`}>
<body className="font-body antialiased bg-background text-foreground m-0 p-0">
{children}
</body>