Hello guys how are you? Welcome back to my blog. Today in this blog post I will show you Free Next.js eCommerce Template | Modern, Fast & Fully Responsive Online Store.
For react js new comers, please check the below links:
Guys here is the code snippet for Next.js ecommerce template, free next.js template, react ecommerce site, nextjs shopping cart, responsive ecommerce website, tailwind ecommerce ui, next js online store, modern ecommerce theme, next.js storefront, ecommerce react template, free ecommerce website code, next js bootstrap template, shopping cart template, free nextjs tailwind template, headless commerce template and please use carefully:
Step 1: Create a New Next.js Project
If you haven’t already, create a new Next.js project as well:
npx create-next-app@latest my-ecommerce-demo
cd my-ecommerce-demo
Step 2: Apply below code inside app/layout.js file:
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<title>Zyra – Clean, Minimal HTML Template</title>
<link rel="shortcut icon" href="assets/images/favicon.png" type="image/png"></link>
<link rel="stylesheet" href="assets/css/plugins.min.css"></link>
<link rel="stylesheet" href="assets/css/style.min.css"></link>
</head>
<body className={`${geistSans.variable} ${geistMono.variable}`}>
{children}
</body>
</html>
);
}
Step 3: Update code in a Page.js inside src/app folder
Open the page.js file and replace the content with the following code :
import Link from 'next/link';
export default function Home() {
return (
<div>
{/*====== Header Start ======*/}
<header className="header-area">
<div className="header-navbar">
<div className="container">
<div className="header-wrapper d-flex justify-content-between align-items-center">
<div className="header-logo">
<a href="index.html">
<img src="assets/images/logo-black.png" alt="Logo" />
</a>
</div>
<div className="header-menu header-menu-2 site-nav d-none d-lg-flex justify-content-between">
<ul className="main-menu">
<li className="static active">
<a href="#">Demo</a>
<ul className="sub-menu sub-mega-menu flex-wrap">
<li>
<a className="menu-title" href="#">Column #1</a>
<ul className="sub-mega-item">
<li><a href="index.html">Home 01</a></li>
<li><a href="index.html">Home 02</a></li>
<li><a href="index.html">Home 03</a></li>
<li><a href="index.html">Home 04</a></li>
</ul>
</li>
<li>
<a className="menu-title" href="#">Column #2</a>
<ul className="sub-mega-item">
<li><a href="index.html">Home 05</a></li>
<li><a href="index.html">Home 06</a></li>
<li><a href="index.html">Home 07</a></li>
<li><a href="index.html">Home 08</a></li>
</ul>
</li>
<li>
<a className="menu-title" href="#">Column #3</a>
<ul className="sub-mega-item">
<li><a href="index.html">Home 09</a></li>
<li><a href="index.html">Home 10</a></li>
<li><a href="index.html">Home 11</a></li>
<li><a href="index.html">Home 12</a></li>
</ul>
</li>
<li>
<a className="menu-title" href="#">Column #4</a>
<ul className="sub-mega-item">
<li><a href="index.html">Home 13</a></li>
<li><a href="index.html">Home 14</a></li>
<li><a href="index.html">Home 15</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Page</a>
<ul className="sub-menu">
<li>
<a href="#">About Us <i className="fal fa-chevron-right"></i></a>
<ul className="sub-menu">
<li><a href="index.html">About US 01</a></li>
<li><a href="index.html">About US 02</a></li>
</ul>
</li>
<li><a href="index.html">Our Service</a></li>
<li><a href="index.html">Contact Us</a></li>
<li><a href="index.html">FAQs</a></li>
<li><a href="index.html">Login</a></li>
<li><a href="index.html">Register</a></li>
<li><a href="index.html">Coming Soon</a></li>
</ul>
</li>
<li><a href="index.html">Look Book</a> <span>Hot</span></li>
<li>
<a href="#">Blog</a>
<ul className="sub-menu">
<li>
<a href="#">Blog Layout <i className="fal fa-chevron-right"></i></a>
<ul className="sub-menu">
<li><a href="index.html">Blog</a></li>
<li><a href="index.html">Blog List</a></li>
<li><a href="index.html">Blog Sidebar</a></li>
<li><a href="index.html">Blog Grid 01</a></li>
<li><a href="index.html">Blog Grid 02</a></li>
<li><a href="index.html">Blog Masonry</a></li>
</ul>
</li>
<li><a href="index.html">Blog Details</a></li>
</ul>
</li>
<li><a href="index.html">Contact</a></li>
</ul>
</div>
<div className="header-meta">
<ul className="meta">
<li><a className="cart-toggle" href="javascript:void(0)"><i className="far fa-Shopping-cart"></i><span>3</span></a></li>
<li><a className="search-toggle" href="javascript:void(0)"><i className="far fa-search"></i></a></li>
<li><a className="sidebar-toggle" href="javascript:void(0)"><i className="fal fa-bars"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
{/*====== Header Ends ======*/}
{/*====== Off Canvas Sidebar Start ======*/}
<div className="off-canvas-sidebar">
<div className="off-canvas-sidebar-wrapper">
<a className="sidebar-close" href="javascript:void(0)"><i className="fal fa-times"></i></a>
<div className="off-canvas-sidebar-box">
<a className="logo" href="index.html">
<img src="assets/images/logo-black.png" alt="Logo" />
</a>
<p className="text">Curabitur placerat urna augue, id luctus sem imperdiet id. Nunc congue ac libero ut lacinia. In ultrices elementum ipsum, in tempus enim accumsan..</p>
<ul className="sidebar-social">
<li><a href="#"><i className="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i className="fab fa-twitter"></i></a></li>
<li><a href="#"><i className="fab fa-instagram"></i></a></li>
<li><a href="#"><i className="fab fa-youtube"></i></a></li>
</ul>
<div className="sidebar-image">
<img src="assets/images/aside-image.jpg" alt="" />
</div>
<ul className="sidebar-info">
<li>
<div className="single-info">
<div className="info-icon">
<i className="fas fa-phone"></i>
</div>
<div className="info-content">
<p><a href="tel:61292515600">+100 0000 0000</a></p>
</div>
</div>
</li>
<li>
<div className="single-info">
<div className="info-icon">
<i className="fas fa-envelope"></i>
</div>
<div className="info-content">
<p><a href="#">Gabdu</a></p>
</div>
</div>
</li>
<li>
<div className="single-info">
<div className="info-icon">
<i className="fas fa-map-marker-alt"></i>
</div>
<div className="info-content">
<p>PO Box 126953 Pind Bhamia Ludhiana</p>
</div>
</div>
</li>
</ul>
<p className="copyright">© 2025 love <a href="#">Jassa</a></p>
</div>
</div>
</div>
{/*====== Off Canvas Sidebar Ends ======*/}
{/*====== Search Start ======*/}
<div className="search-wrapper">
<div className="search-box">
<a href="javascript:void(0)" className="search-close"><i className="fal fa-times"></i></a>
<div className="search-form">
<label>Start typing and press Enter to search</label>
<div className="search-input">
<form action="#">
<input type="text" placeholder="Search entire store…" />
<button><i className="far fa-search"></i></button>
</form>
</div>
</div>
</div>
</div>
{/*====== Search Ends ======*/}
{/*====== Off Canvas Cart Start ======*/}
<div className="off-canvas-cart-wrapper">
<div className="off-canvas-cart-box">
<a href="javascript:void(0)" className="cart-close"><i className="fal fa-times"></i></a>
<div className="off-canvas-cart-content">
<div className="cart-title">
<h5 className="title">Shopping Cart</h5>
</div>
<div className="cart-product-widget">
<ul>
<li>
<div className="cart-product d-flex">
<div className="cart-product-image">
<a href="index.html"><img src="assets/images/cart/product-1.jpg" alt="product" /></a>
</div>
<div className="cart-product-content media-body">
<h6 className="title"><a href="index.html">Biker Jacket</a></h6>
<span className="price">1x <span>£150.00</span></span>
</div>
<a href="#" className="product-cancel"><i className="fal fa-times"></i></a>
</div>
</li>
<li>
<div className="cart-product d-flex">
<div className="cart-product-image">
<a href="index.html"><img src="assets/images/cart/product-2.jpg" alt="product" /></a>
</div>
<div className="cart-product-content media-body">
<h6 className="title"><a href="index.html">Biker Jacket</a></h6>
<span className="price">1x <span>£150.00</span></span>
</div>
<a href="#" className="product-cancel"><i className="fal fa-times"></i></a>
</div>
</li>
<li>
<div className="cart-product d-flex">
<div className="cart-product-image">
<a href="index.html"><img src="assets/images/cart/product-3.jpg" alt="product" /></a>
</div>
<div className="cart-product-content media-body">
<h6 className="title"><a href="index.html">Biker Jacket</a></h6>
<span className="price">1x <span>£150.00</span></span>
</div>
<a href="#" className="product-cancel"><i className="fal fa-times"></i></a>
</div>
</li>
</ul>
<div className="cart-product-total">
<p className="value">Subtotal</p>
<p className="price">£600.00</p>
</div>
<div className="cart-product-btn">
<a href="#" className="main-btn btn-block">View cart</a>
<a href="#" className="main-btn btn-block">Checkout</a>
</div>
</div>
</div>
</div>
</div>
{/*====== Off Canvas Cart Ends ======*/}
{/*====== Slider Start ======*/}
<div id="sliderParallax" className="slider-area slider-04 slider-active">
<div className="single-slider bg_cover d-flex align-items-end">
<div className="container">
<div id="slider" className="slider-content-4">
<div className="slider-1 layer" data-depth="0.5">
<img data-animation="slideInRight" data-delay="0.3s" src="assets/images/slider/slider-04-1-1.png" alt="" />
</div>
<div className="slider-2 layer" data-depth="0.2">
<img data-animation="slideInLeft" data-delay="1s" src="assets/images/slider/slider-04-1-2.png" alt="" />
</div>
<div className="slider-3 layer" data-depth="0.2">
<img data-animation="slideInLeft" data-delay="1.6s" src="assets/images/slider/slider-04-1-3.png" alt="" />
</div>
<div className="slider-4 layer" data-depth="0.3">
<img data-animation="zoomIn" data-delay="2s" src="assets/images/slider/slider-04-1-4.png" alt="" />
</div>
<div className="slider-btn layer" data-depth="0.3">
<a data-animation="zoomIn" data-delay="2.2s" href="#" className="main-btn">Shop Now</a>
</div>
</div>
</div>
</div>
</div>
{/*====== Slider Ends ======*/}
{/*====== Shop Banner Start ======*/}
<section className="Shop-banner-area">
<div className="Shop-banner-wrapper flex-wrap">
<div className="Shop-banner-col">
<div className="single-Shop-banner">
<div className="Shop-banner-content">
<div className="content">
<h4 className="title"><a href="index.html">Platform velvet sandals</a></h4>
<span className="price">$53.00</span>
<a href="index.html" className="main-btn">Shop Now</a>
</div>
</div>
<div className="Shop-banner-image bg_cover" style={{ backgroundImage: "url('/assets/images/m4-bg1.jpg')" }}></div>
</div>
</div>
<div className="Shop-banner-col">
<div className="single-Shop-banner">
<div className="Shop-banner-content">
<div className="content">
<h4 className="title"><a href="index.html">bled weekend bag</a></h4>
<span className="price">$69.00</span>
<a href="index.html" className="main-btn">Shop Now</a>
</div>
</div>
<div className="Shop-banner-image bg_cover" style={{ backgroundImage: "url('/assets/images/m4-bg2.jpg')" }}></div>
</div>
</div>
</div>
</section>
{/*====== Shop Banner Ends ======*/}
{/*====== Shop Banner Start ======*/}
<div className="Shop-banner-area">
<div className="Shop-banner-wrapper flex-wrap">
<div className="Shop-banner-col-full">
<div className="single-Shop-banner-3 ">
<div className="Shop-banner-image bg_cover" style={{ backgroundImage: "url('/assets/images/m4-bg3.jpg')" }}></div>
<div className="Shop-banner-content">
<div className="content">
<p className="text">new</p>
<p className="text text-2">259</p>
<a href="index.html" className="main-btn">Shop Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
{/*====== Shop Banner Ends ======*/}
{/*====== Shop Banner Start ======*/}
<section className="Shop-banner-area">
<div className="Shop-banner-wrapper flex-wrap">
<div className="Shop-banner-col">
<div className="single-Shop-banner Shop-banner-2 Shop-banner-bg">
<div className="Shop-banner-content">
<div className="content">
<h4 className="title"><a href="index.html">Platform velvet sandals</a></h4>
<span className="price">$53.00</span>
<a href="index.html" className="main-btn">Shop Now</a>
</div>
</div>
<div className="Shop-banner-image bg_cover" style={{ backgroundImage: "url('/assets/images/m4-bg4.jpg')" }}></div>
</div>
</div>
<div className="Shop-banner-col">
<div className="single-Shop-banner Shop-banner-bg">
<div className="Shop-banner-content">
<div className="content">
<h4 className="title"><a href="index.html">bled weekend bag</a></h4>
<span className="price">$69.00</span>
<a href="index.html" className="main-btn">Shop Now</a>
</div>
</div>
<div className="Shop-banner-image bg_cover" style={{ backgroundImage: "url('assets/images/m4-bg5.jpg')" }}></div>
</div>
</div>
</div>
</section>
{/*====== Shop Banner Ends ======*/}
{/*====== Video Start ======*/}
<div className="video-area video-2 bg_cover mt-10" style={{ backgroundImage: "url('/assets/images/m4-bg6.jpg')" }}>
<div className="container">
<div className="video-play text-center">
<a href="https://www.youtube.com/@Therichpost/videos" className="play video-popup"><i className="fas fa-play"></i></a>
</div>
</div>
</div>
{/*====== Video Ends ======*/}
{/*====== Newsletter Start ======*/}
<section className="newsletter-area pt-10 pb-60">
<div className="container">
<div className="row align-items-center">
<div className="col-lg-5">
<div className="newsletter-content mt-45">
<h4 className="title">Join our newsletter save 10% off</h4>
</div>
</div>
<div className="col-lg-7">
<div className="newsletter-form mt-50">
<form action="#">
<input type="email" placeholder="Email" />
<button className="main-btn">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
</section>
{/*====== Newsletter Ends ======*/}
{/*====== Footer Start ======*/}
<footer className="footer-area bg_cover pt-30 pb-60" style={{ backgroundImage: "url('/assets/images/footer-bg-2.jpg')" }}>
<div className="footer-widget">
<div className="container footer-container">
<div className="row">
<div className="col-lg-3">
<div className="footer-logo-copyright mt-30">
<a href="index.html">
<img src="assets/images/logo-white.png" alt="Logo" />
</a>
<p>© 2025 <span> Love </span> Made with <i className="fa fa-heart"></i> by <a href="#">Jassa</a></p>
</div>
<div className="footer-social mt-30">
<ul className="social">
<li><a href="#"><i className="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i className="fab fa-twitter"></i></a></li>
<li><a href="#"><i className="fab fa-instagram"></i></a></li>
<li><a href="#"><i className="fab fa-youtube"></i></a></li>
</ul>
</div>
</div>
<div className="col-lg-6">
<div className="footer-link-wrapper flex-wrap">
<div className="footer-link mt-30">
<h5 className="footer-title">Useful Link</h5>
<ul className="link">
<li><a href="#">Help & Contact</a></li>
<li><a href="#">Returns & Refunds</a></li>
<li><a href="#">Online Stores</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</div>
<div className="footer-link mt-30">
<h5 className="footer-title">Company</h5>
<ul className="link">about
<li><a href="index.html">About Us</a></li>
<li><a href="index.html">Our Service</a></li>
<li><a href="index.html">Portfolio</a></li>
</ul>
</div>
<div className="footer-link mt-30">
<h5 className="footer-title">Profile</h5>
<ul className="link">
<li><a href="index.html">My Account</a></li>
<li><a href="index.html">Checkout</a></li>
<li><a href="index.html">order Tracking</a></li>
</ul>
</div>
</div>
</div>
<div className="col-lg-3">
<div className="footer-map mt-30">
<div id="contact-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d219104.92617856397!2d75.69186288276121!3d30.900240748451676!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391a837462345a7d%3A0x681102348ec60610!2sLudhiana%2C%20Punjab!5e0!3m2!1sen!2sin!4v1748871818004!5m2!1sen!2sin" width="100%" height="100%" style={{ border: 0 }} allowFullScreen="" loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
{/*====== Footer Ends ======*/}
{/*====== BACK TOP TOP PART START ======*/}
<a href="#" className="back-to-top"><i className="fal fa-chevron-up"></i></a>
{/*====== BACK TOP TOP PART ENDS ======*/}
{/*====== Product Quick View Start ======*/}
<div className="modal fade" id="productQuick">
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="product-quick-view">
<div className="row">
<div className="col-md-6">
<div className="quick-view-image">
<div className="quick-view-thumb">
<div className="quick-thumb-active">
<div className="single-quick-thumb">
<img src="assets/images/product/product-37.jpg" alt="" />
</div>
<div className="single-quick-thumb">
<img src="assets/images/product/product-38.jpg" alt="" />
</div>
<div className="single-quick-thumb">
<img src="assets/images/product/product-27.jpg" alt="" />
</div>
<div className="single-quick-thumb">
<img src="assets/images/product/product-28.jpg" alt="" />
</div>
</div>
</div>
<div className="quick-view-preview">
<div className="quick-preview-active">
<div className="single-quick-preview">
<img src="assets/images/product/product-37.jpg" alt="" />
</div>
<div className="single-quick-preview">
<img src="assets/images/product/product-38.jpg" alt="" />
</div>
<div className="single-quick-preview">
<img src="assets/images/product/product-27.jpg" alt="" />
</div>
<div className="single-quick-preview">
<img src="assets/images/product/product-28.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
<div className="col-md-6">
<div className="quick-view-content">
<h4 className="title">Oversized Check Dress</h4>
<span className="sku-id">REF. 1104693 - TOMY</span>
<div className="quick-price">
<span className="regular-price">£250.00</span>
<span className="sale-price">£200.00</span>
</div>
<div className="quick-quantity-cart-wishlist-compare flex-wrap">
<form action="#">
<div className="quick-quantity d-flex">
<button type="button" className="sub"><i className="fal fa-minus"></i></button>
<input type="text" />
<button type="button" className="add"><i className="fal fa-plus"></i></button>
</div>
<div className="quick-cart">
<button className="main-btn">Add to Cart</button>
</div>
</form>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" title="Add to Wishlist" className="quick-wishlist"><i className="fal fa-heart"></i></a>
<a href="#" data-bs-tooltip="tooltip" data-bs-placement="top" title="Add to Compare" className="quick-compare"><i className="fal fa-repeat-alt"></i></a>
</div>
<div className="quick-description">
<p>Sed vitae eros a quam malesuada porttitor nec nec orci. Ut lacus augue, bibendum at tristique at, ornare eget quam. Donec volutpat ut nibh id sagittis. Morbi fringilla ac libero in consequat.</p>
</div>
<div className="quick-share">
<ul className="social">
<li><a href="#"><i className="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i className="fab fa-twitter"></i></a></li>
<li><a href="#"><i className="fab fa-linkedin"></i></a></li>
<li><a href="#"><i className="fab fa-pinterest-p"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/*====== Product Quick View Ends ======*/}
{/*====== Overlay Start ======*/}
<div className="overlay"></div>
{/*====== Overlay Ends ======*/}
</div>
);
}
Step 4: Guys download assets from below GitHub link add that inside project public folder:
Step 5: Run the Application
Finally, run your Next.js application:
npm run dev
Visit http://localhost:3000 in your browser to see the website in action.
This setup provides a simple ecommerce product page styled with Tailwind CSS, integrated into a Next.js application.
This is it guys and if you will have any kind of query, suggestion or requirement then feel free to comment below. Also if you will have any kind of project then feel free to hire me
Thanks
Ajay