Next.js E-Commerce Example

Complete production-ready e-commerce application with product visualization, shopping cart, checkout, and AI-powered features.

Live Demo

Experience the full Next.js E-Commerce example running live. This is a complete, production-ready application you can use as a starting point for your own store.

View:
Open in New Tab →Running on localhost:8200

Why This Example?

This Next.js e-commerce example demonstrates how to build a complete online store with product customization, shopping cart, and checkout flow. This example is valuable because:

🛍️ Production-Ready

This isn't a toy example - it's a complete e-commerce application with all the features you need: product catalog, search, cart, checkout, and more.

🔄 State Management

Shows how to handle complex state: product selection, cart operations, variant changes, and user preferences - all with React Context.

⚡ Hot Reload

Uses Next.js webpack configuration for instant hot reload when editing components. No rebuilds needed during development.

🚀 Deployment Ready

Pre-configured for Cloudflare Pages and Vercel deployment. One command to deploy to production.

Overview

The Next.js E-Commerce example is a complete, production-ready online store that showcases all Merchify components working together. It includes:

  • •
    Product Catalog: Browse products with search and filtering
  • •
    Product Customization: Real-time product visualization with custom artwork
  • •
    Shopping Cart: Full cart functionality with add/remove/update
  • •
    Checkout Flow: Complete e-commerce checkout experience
  • •
    Theme Support: Light/dark mode with smooth transitions

Key Features

Real-time Mockups

Product mockups update instantly as users select different artworks and product options. No page refreshes needed.

Context-based State

Shop and Product contexts automatically share state between components, eliminating prop drilling.

Fully Customizable

All components are source code, not dependencies. Copy and modify them to match your exact design requirements.

TypeScript Support

Full type safety with TypeScript definitions for all components, hooks, and contexts.

Installation

⚡Quick Start (Recommended)

Use degit to clone just this example (no git history, clean start):

npx degit merchify-dev/ui-components/examples/next-ecommerce my-store

Download just the e-commerce example to 'my-store' folder

Update dependencies to use published npm packages:

cd my-store && npm install merchify@latest @merch/ui@latest

Install latest versions from npm

Start the development server:

npm install && npm run dev

Install remaining dependencies and start dev server

💡 Why degit? It downloads only the example folder without the full monorepo, giving you a clean starting point.

Full Clone (For Contributors)

If you want to contribute or modify the component library, clone the full repository:

git clone https://github.com/merchify-dev/ui-components.git && cd ui-components

Clone the full monorepo

Install dependencies and build packages:

pnpm install && pnpm build

Install all dependencies and build packages

Navigate to the example and start development:

cd examples/next-ecommerce && pnpm dev

Start the e-commerce example

The application will be running at http://localhost:8200

✨ Bonus: With the full clone, changes to packages/ui-react/src/ hot reload instantly in the example!

Next Steps

Explore individual components used in this example:

ProductCard
Display products with images, prices, and options
ProductImage
Generate product mockups with custom artwork
AddToCart
Shopping cart integration with quantity selection
Search
Instant product search with filters