Aurelle Storefront

A production-ready, lightweight Next.js storefront for luxury women's fashion, rebuilt from the downloaded Shopify theme as a visual reference only.

Reference Analysis

The Shopify theme pointed to a few reusable patterns worth preserving:

• Transparent header over an editorial hero
• Refined product strip / carousel merchandising
• Pull-quote brand storytelling blocks
• Split media-with-content editorial sections
• Minimal collection header with lightweight sort/filter UI
• Clean PDP with gallery, variants, buy area, and recommendations
• Newsletter-led footer

This project keeps that visual direction while upgrading the interaction model and commerce architecture.

What Is Included

• Homepage
• Collection page
• Product detail page
• Horizontal auto-sliding product rail with drag / swipe / scroll interaction
• Global cart drawer
• Dedicated cart page
• Add to cart, quantity update, remove item, subtotal
• Shopify-compatible checkout integration path
• SEO metadata for core routes
• Vercel-ready Next.js App Router structure

Stack

• Next.js App Router
• TypeScript
• Tailwind CSS
• Server-first route architecture
• Lightweight custom slider implementation
• Headless commerce abstraction with mock and Shopify modes

Project Structure

storefront/
  app/
    api/cart/
    cart/
    collections/
    products/
    globals.css
    layout.tsx
    page.tsx
  components/
    cart/
    layout/
    product/
    providers/
    sections/
    ui/
  data/
    mock-store.ts
  lib/
    commerce/
    shopify/
    store.ts
    utils.ts
  types/
    commerce.ts
    store.ts

Commerce Modes

Mock mode

Default for local demo and client preview. Cart state is managed through local API routes and cookies.

COMMERCE_PROVIDER=mock

Shopify mode

Uses Shopify Storefront API cart operations and the backend checkout URL.

COMMERCE_PROVIDER=shopify
SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
SHOPIFY_STOREFRONT_ACCESS_TOKEN=your-storefront-access-token
SHOPIFY_STOREFRONT_API_VERSION=2025-01

Use the included .env.example as the starting point.

Run Locally

npm install
npm run dev

Open http://localhost:3000.

Production Check

npm run lint
npm run build
npm run start

Deploy To Vercel

1. Push the storefront folder to a Git repository.
2. Import the repository into Vercel.
3. Set the project root to storefront.
4. Add environment variables if using Shopify mode.
5. Deploy with the default Next.js settings.

Shopify Integration Notes

• The UI is decoupled from backend details through lib/commerce.
• Cart operations can switch between mock and Shopify without rewriting the UI layer.
• For real Shopify checkout, product variant merchandiseId values must come from Storefront API product data instead of the local mock IDs.

Notes

• The original Shopify export remains untouched in the parent directory for design reference.
• Current imagery uses curated Unsplash URLs. Replace with owned or licensed brand assets before launch.