Hira Mani Couture
Editorial storefront redesign for a Pakistani designer-wear label, with an AI studio concierge
What it is
A ground-up redesign of Hira Mani Couture's Shopify store as a bespoke Next.js storefront. It covers the full journey from campaign landing pages and collection browsing to product detail, search, wishlist, cart, and a WhatsApp-first order handoff, with a conversational AI concierge layered across the experience.
Who it serves
Hira Mani Couture, the designer-wear label founded by Pakistani actor, artist, and drama actress Hira Mani, and the customers shopping its Nau Bahar and Afsanay 2025 collections.
Business value
Gives a celebrity-led fashion label a digital flagship that carries the same editorial care as its campaigns, while keeping the studio's personal, WhatsApp-led service model at the centre of the buying experience.
Primary users
Mobile-first shoppers discovering festive lawn and bridal pieces, and studio staff who confirm orders, sizing, and fabric questions directly with customers.
Category
Full-Stack Application
Role
Full-Stack Developer
Timeline
2026
Status
Production
Team
Solo
Platform
Web
Industry
Fashion & E-commerce
Frontend
Next.js 16
Hira Mani Couture sells handcrafted, high-consideration pieces, but its original Shopify theme treated them like standard catalogue items. The template could not carry the label's editorial voice, the story behind each collection, or the personal relationship Hira Mani has with her audience. Shoppers who needed help with sizing, fabric, or styling had to leave the storefront and start a separate conversation, while the studio handled those questions manually.
Campaign-Led Art Direction
A full-bleed editorial home page with a three-slide campaign hero, oversized serif typography, collection storytelling, and a restrained palette that lets the garments carry the page.
AI Studio Concierge
A conversational assistant grounded in the live catalogue. It can search products, explain fabrics and stitching, answer sizing questions, navigate the storefront, and add a piece to the cart after the shopper confirms size and quantity.
Catalogue Discovery & Filtering
Collection routes, search by name, fabric, or collection, quick-add product cards, size charts, and cross-sell rails keep a growing catalogue easy to browse on mobile.
Cart with WhatsApp Checkout
A slide-out cart and full cart page calculate the selection and turn it into a pre-filled WhatsApp order, so the studio can confirm sizing, delivery, and payment personally instead of forcing a faceless checkout.
Frontend
Backend
Infrastructure
Tools & Services
Next.js 16 App Router renders the storefront as React Server Components, backed by a typed product catalogue that powers collection, product, search, and wishlist routes. Client components handle the cart context, size selection, and Radix-based overlays. The Studio Concierge streams responses from an /api/chat route through the Vercel AI SDK; its tool calls (searchProducts, addToCart, navigate, scrollTo, openCart) execute against the same catalogue and cart state as the rest of the UI. Orders are deliberately not pushed through a hosted checkout: the cart compiles into a pre-filled WhatsApp message so the studio can confirm the details personally.
An AI assistant that can only answer in prose adds another layer of friction. It has to be able to act inside the store.
Gave the concierge a narrow set of typed tools tied to real storefront actions, including product search, cart insertion, navigation, and cart opening. Adding a piece requires an explicit confirmation step with size and quantity before the cart is updated.
The redesign had to support the brand's existing Shopify catalogue and imagery without inheriting the constraints of a themed Shopify storefront.
Kept product content in a typed data layer with a stable product and variant shape, sourced imagery from Shopify's CDN, and built the UI independently. The catalogue boundary stays isolated, so the Shopify Storefront API or a hosted checkout can be introduced later without rewriting the storefront.
Editorial, image-heavy fashion pages are prone to slow loads and layout shift, especially on the mid-range phones most shoppers use.
Kept most of the page tree server-rendered, limited client components to interactive islands, fixed media aspect ratios to reserve layout space, and used responsive imagery with lazy loading below the fold.
Interested in building something similar?
I am always open to discussing new projects, technical challenges, and engineering opportunities.