A multi-theme e-commerce platform built to serve six very different retail categories — Sports, Fashion, Tech, and Grocery among them — from one shared codebase, instead of maintaining a separate storefront for each.
Building a separate storefront for every retail vertical — sports gear, fashion, electronics, grocery — meant duplicating the same cart, checkout, and product logic again and again, with each copy slowly drifting out of sync as fixes landed in one but not the others. Any shared improvement had to be manually ported across every codebase.
A single Next.js application where the entire visual identity — palette, typography, surface textures, even motion — is driven by CSS custom properties swapped per theme, while cart, wishlist, checkout, and product logic stay identical underneath. Each of the six themes (Sports, Active, Fashion/Maison, Ghorer Bazar, StarTech, TechFix) gets its own premium visual language — shine and metallic effects for tech, carbon texture for sports — without forking a single line of business logic.
The site needed to deploy on ordinary cPanel shared hosting rather than a Node server, which meant working within Next.js's static export mode — no server-side rendering, no API routes at runtime, and careful handling of image optimization since the default Next.js image loader requires a server.
A theming layer built entirely on CSS variables, switched at build time per storefront, so the same components render six distinct brands. Cart state and product data are handled client-side against a static JSON/REST layer, keeping the whole app compatible with static export while still feeling dynamic.
The theme system grew organically as new storefronts were added, and by the sixth theme some CSS variables were doing double duty across unrelated components. Next time, I'd define the full theming contract — every variable a theme is allowed to touch — before the second theme existed, rather than discovering the boundaries by trial and error.