Sellzy Documentation

Welcome to Sellzy, a comprehensive, modern multipurpose eCommerce storefront template. Sellzy provides a complete set of beautifully designed pages and components for building online stores, including 5 unique homepage demos, 23 mega-menu shop layouts, 6 product detail variations, vendor marketplaces, blogs, wishlists, carts, checkouts, and much more. Built with Next.js 16 (App Router), React 19, and Tailwind CSS v4.

Key Features

The template includes a wide array of pre-built pages and components for a complete eCommerce storefront:

• 5 Homepage Demos: Unique home page designs (Home 1–5) with hero sliders, category grids, deal timers, product carousels, and promotional bento layouts.
• 23 Mega-Menu Shop Layouts: Category filter grids, left-sidebar shops, full-banner layouts, horizontal filter pages, and list views — each in multiple column variants (2–6 columns).
• 6 Product Detail Pages: Diverse product detail layouts with image galleries, accordions, size/color pickers, and related product sliders.
• Vendor & Marketplace: Vendor grid/list pages, vendor dashboard, vendor account, and left-sidebar /left-top marketplace layouts.
• Blog System: Blog grid and blog list pages with individual blog detail views, search, pagination, categories, tags, and recent posts sidebar.
• Cart & Checkout: Single-vendor and multi-vendor cart pages, two checkout variants, and an order success page.
• Wishlist & Compare: Two wishlist style variants and a product comparison table.
• User Account: My Account dashboard with profile, orders, order details, address, and wishlist tabs.
• Interactive Drawers: QuickView drawer, cart drawer, login/register/OTP/forgot-password drawers, mobile sidebar, and size variation drawer.
• Utility Pages: About, Contact, FAQ, Privacy Policy, Return Policy, Terms & Conditions, Coming Soon, and custom 404 page.
• Animations & UX: Smooth scroll-triggered animations via Framer Motion, Swiper.js carousels, top-loader progress bar, scroll-to-top button, and sticky navigation.

Template Structure

The application follows a modular and scalable Next.js App Router directory structure:

Route Map

Below is a complete list of all page routes in the application, organized by feature group:

Component Library

Sellzy ships with 146+ React components across 26 feature modules. Below is a summary of the key component groups:

Getting Started

Follow these steps to get started with the codebase and run the development server:

1. Prerequisites & Installation

Before you begin, ensure you have Node.js (v18 or newer recommended) installed on your machine. If you haven't installed it yet, please visit the official Node.js website to download and install the LTS (Long Term Support) version.

Once Node.js is installed, open your terminal, navigate to the sellzy-frontend directory, and run the following commands:

# Install dependencies
npm install
# or
yarn install
# or
pnpm install

# Start the development server
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the storefront. The application will automatically update as you modify the source files.

2. Styling and Theming

The project uses Tailwind CSS v4 integrated via @tailwindcss/postcss.

• Design System Tokens: All colors, shadows, typography, and animations are defined in /app/globals.css under the @theme directive. Updating these variables propagates changes throughout the entire template.
• Color Palette: Primary (teal), Secondary (blue), Info, Success, Warning, and Error — each with lighter/light/default/dark/darker variants.
• Fonts: Three Google Fonts auto-loaded via next/font — Public Sans (body), Urbanist (headings), and DM Sans (general text).
• Button System: Pre-built button classes (.btn-primary, .btn-secondary, etc.) with solid and outline variants, in small/medium/large sizes.
• Class Merging: Use the cn() utility from /lib/utils.ts which combines clsx + tailwind-merge for conditional and conflict-free class application.

3. Modifying Components

Components are organized by feature in /components. Each homepage demo has its own subfolder (e.g., home-one/, home-two/). To customize a section, find its component file and modify the Tailwind classes and JSX directly. Product cards in /components/card/ are shared across all pages.

4. Icons

Sellzy uses two icon systems:

• Huge Icons (CSS): Loaded globally via /public/icons/hugeicons/hgi-stroke-rounded.css. Use with <i class="hgi hgi-..."> elements.
• Huge Icons (React): Import from @hugeicons/react and @hugeicons/core-free-icons for component-based SVG icons.

Building for Production & Deployment

Building

To create an optimized production build, run:

npm run build

After the build completes, you can start the production server:

npm run start

Deployment

The easiest way to deploy this Next.js app is to use the Vercel Platform. Check out the Next.js deployment documentation for more details.

Sources and Credits

This template relies on several excellent open-source libraries that power its robust functionality and beautiful user interface:

Next.js 16

The React Framework for the Web

React 19

The library for web and native user interfaces

Tailwind CSS v4

Rapidly build modern websites without ever leaving your HTML

🎬

Framer Motion

Production-ready animation library for React

🎠

Swiper.js

Modern touch slider for carousels and hero banners

ApexCharts

Interactive charts for vendor dashboard analytics

Huge Icons

Beautiful and extensive iconography (CSS + React)

G

Google Fonts

Public Sans, Urbanist, and DM Sans

⏳

NextJS TopLoader

Slim progress bar for page transitions

F

Freepik

High-quality photos, vectors, and PSD assets