CozyLoops - Handcrafted & Artisan React eCommerce Template

► Explore Live Demo Preview Home 2 (Boutique) Home 3 (Studio) Admin Studio React 19 Ready Tailwind CSS v4 Vite Superfast 3 Home Page Variants 3 Shop & Blog Layouts Dynamic Checkout Flow Executive Admin Studio 0 ESLint Errors

Handcrafted & Artisan React eCommerce Template

CozyLoops is a modern, beautifully designed React eCommerce template crafted specifically for handmade businesses, crochet artists, knitting studios, ceramic makers, and independent boutique brands. Built with the latest React 19, Vite, and Tailwind CSS v4, it provides an ultra-fast, mobile-optimized, and aesthetically pleasing shopping experience.

Beyond the complete storefront, CozyLoops includes a fully designed Executive Admin Dashboard Studio (with analytics, products, categories, orders, customers, blog publisher, soft-delete recycle bin, store settings, and real-time interactive notifications). Ready to use standalone with browser localStorage persistence, or connect with your preferred headless CMS or custom Node.js/Python/PHP backend.

Home 1 — Classic Artisan

Swiper hero, category circles, artisan story spotlight

Launch Home 1 Demo → Home 2 — Modern Boutique

Bento grid, live drop countdown, 1-click coupon copy

Launch Home 2 Demo → Home 3 — Slow Living Workshop

Interactive lookbook hotspots, film modal, craft pledges

Launch Home 3 Demo → Top Filter Bar (Original) View Top Filter Layout → Left Sticky Sidebar View Sticky Sidebar Layout → Slide-Out Filter Drawer View Filter Drawer Layout →

100% Interactive Checkout Features:

• Live Inline Quantity Modifiers: Adjust item quantities (+ / -) or remove pieces right inside the checkout order summary.
• Dynamic Free Shipping Goal Meter: Real-time progress tracker towards the ₹999 free delivery threshold.
• Quick-Apply Promo Coupons: Clickable chips to apply COZY15, COZY10, HANDMADE, or FREESHIP.
• Real-Time Card Brand Detection: Automatically recognizes Visa, Mastercard, RuPay, and American Express.
• Instant UPI QR Simulator: Select VPA handles (@okhdfcbank, @okicici, @paytm) and open the dynamic QR scan-to-pay simulator.
• Admin Alert Integration: Placed orders automatically dispatch real-time notifications to the Executive Admin alert bell.

Test Dynamic Checkout Live → Open Executive Admin Studio Live → Craft Storytelling

Artisan Story & Brand Narrative (/about)

View Story Page →

Richly crafted narrative page highlighting studio origins, artisan bios, yarn sourcing transparency, sustainable handmade values, and interactive FAQ milestones designed to build buyer trust and community connection.

Key Highlights

• React 19 & Vite Architecture: Modern frontend stack delivering lightning-fast Hot Module Replacement (HMR) and sub-second builds.
• Tailwind CSS v4: Streamlined, utility-first CSS framework for frictionless styling and color customization.
• 3 Complete Storefront Concepts: 3 unique, beautifully crafted home page layouts designed for different artisan brand aesthetics.
• 3 Shop & Blog Layout Variations: Switch seamlessly between Top Filter Bar, Left Sticky Sidebar, and Slide-Out Offcanvas Drawer.
• Header Navigation Dropdowns: Built-in dropdown menus for Home, Shop, and Blog for easy navigation across all design variants.
• Fullscreen Image Lightbox: Interactive multi-image lightbox modal (ImageLightbox.jsx) with zoom lens, thumbnails strip, keyboard hotkeys, and download capability.
• Quick View Modal: Fast product inspection modal with lightbox preview, quantity controls, and direct checkout.
• Dynamic 2-Column Checkout: Complete checkout flow with coupon codes (COZY15, COZY10, HANDMADE, FREESHIP), card brand auto-detection, and QR/UPI simulator.
• Printable Order Receipt: Order confirmation page (/order-success/:id) with 1-click printable invoice receipt.
• Multi-Step Live Order Tracking: Interactive track order page (/track-order) with visual 4-step progress timeline.
• Executive Admin Studio Included: Full admin suite with analytics, notification center, products, categories, orders, customers, blogs, soft-delete recycle bin, and store settings.
• 100% Standalone Ready: Robust localStorage-powered cart persistence, wishlist logic, and basic mock authentication out of the box.
• 0 ESLint Errors: Rigorously cleaned and verified codebase adhering to strict React 19 safety rules.

Included Pages & Routes

Storefront Features:

• Home 1 — Classic Showcase (/ & /home-1)
• Home 2 — Modern Boutique (/home-2)
• Home 3 — Studio Workshop (/home-3)
• Shop — Top Filter Bar (/shop)
• Shop — Sticky Sidebar (/shop-sidebar)
• Shop — Filter Drawer (/shop-drawer)
• Product Detail & Gallery Lightbox (/product/:id)
• Shopping Bag Cart (/cart)
• Artisan Wishlist (/wishlist)
• Dynamic 2-Column Checkout (/checkout)
• Order Confirmation Receipt (/order-success/:id)
• Multi-Step Order Tracking (/track-order)
• Blog — Top Filter Bar (/blog)
• Blog — Sticky Sidebar (/blog-sidebar)
• Blog — Filter Drawer (/blog-drawer)
• Blog Article Detail (/blog/:id)
• Brand Story & About (/about)
• Contact & Inquiry (/contact)
• Categorized Accordion FAQs (/faq)
• Privacy Policy (/privacy-policy)
• Terms & Conditions (/terms-of-service)
• Sign In with 1-Click Demo Login (/signin)
• Sign Up / Registration (/signup)
• Customer Profile & Orders (/profile)
• Creative 404 Error Page (/404)

Admin Studio Pages:

• Executive Dashboard Overview (/admin)
• Interactive Notification Center (Header Bell)
• Product Catalog Manager (/admin/products)
• Full-Screen Product Editor (/admin/add-product)
• Dynamic Category Manager (/admin/categories)
• Order Fulfillment Center (/admin/orders)
• Customer Directory (/admin/customers)
• Blog / Tutorial Publisher (/admin/blogs)
• Full-Screen Blog Editor (/admin/add-blog)
• Media Assets Library (/admin/media)
• Soft-Delete Recycle Bin (/admin/recycle-bin)
• Global Store Settings (/admin/settings)
• Admin Profile Settings (/admin/profile)

Technology Stack & Libraries

<thead> </thead> <tbody> </tbody>

Technology	Version	Purpose
React	v19.2.x	Core component UI library
Vite	v8.2.x	Next-generation development server & bundler
Tailwind CSS	v4.3.x	Modern utility-first styling engine
React Router	v7.18.x	Client-side routing and navigation
Framer Motion	v13.1.x	Page transitions, micro-interactions & spring animations
Swiper	v14.1.x	Touch-friendly hero carousel & product carousels
React Icons	v5.7.x	Lightweight SVG icon library

Quick Start Guide

Requirements: Node.js 18.0.0+ and npm 8.0.0+

1. Extract the download package and open the crochet directory in your terminal.
2. Run npm install to install dependencies.
3. Run npm run dev to start the local development server at http://localhost:5173.
4. Run npm run build to compile an optimized production distribution.
5. Run npm run lint to verify code quality (returns 0 errors / 0 warnings).

Support & Credits

We provide dedicated template support via the Envato Author portal for standard installation assistance and bug fixes. Comprehensive offline documentation is included in the package covering component architectures, data models, and customization steps.

Credits: React, Vite, Tailwind CSS, React Router, Framer Motion, Swiper. Google Fonts (Plus Jakarta Sans, Playfair Display, Outfit). All placeholder images are locally generated and cleared for commercial distribution.

► View Live Demo Preview