The storefront uses a warm red seed colour to create an inviting shopping feel. The page starts with a hero banner, followed by category chips, then a responsive product grid. Each product card shows an image placeholder, name, rating stars, and price. The cart drawer slides in from the right with full quantity control.
The storefront uses a warm red seed colour to create an inviting shopping feel. The page starts with a hero banner, followed by category chips, then a responsive product grid. Each product card shows an image placeholder, name, rating stars, and price. The cart drawer slides in from the right with full quantity control.
View Live PreviewProduct grid with hover elevation and wishlist icons
Category chip filters for quick browsing
Star ratings with review counts
Slide-out cart drawer with quantity controls
Sale badges and original price strikethrough
Hero banner with seasonal call-to-action
Sticky header with cart item badge
Light/dark mode support
app/layout.tsx — Root layout with MD3Provider
app/providers.tsx — Theme with red seed colour
app/page.tsx — Storefront page composition
app/components/StoreHeader.tsx — Sticky header with cart badge
app/components/ProductCard.tsx — Product grid cards
app/components/CartDrawer.tsx — Slide-out cart
npx degit your-org/md3-templates/ecommerce my-storecd my-store && npm installnpm run devOne-time purchase. Lifetime access and updates.
Live PreviewIncludes:
Full source code
Next.js App Router ready
TypeScript throughout
Light & dark mode
Customisable seed colour
Free updates