Executive summary
KOBBO is a live Indian D2C storefront for educational toys, STEM kits, and creative play. The public site at kobbo.in presents a custom Next.js shopping experience on top of a Shopify-powered catalog: collection and product URLs, Shopify CDN media, a cart drawer, account login, and policy pages for shipping, returns, and payments.
This case study documents the storefront evidence a merchandising or founder team can evaluate — product discovery, mobile shopping, brand storytelling, and commerce trust — without inventing revenue, conversion, or traffic figures. It is written for buyers comparing e-commerce development, Shopify development, and website development partners in India.
Brand and business context
KOBBO’s homepage positions the brand as “More Than Toys.” The live copy focuses on educational toys, STEM kits, and creative play rather than generic novelty merchandising. Trust signals on the public storefront include free shipping across India, 7-day easy returns, secure payments, and a Ganpati collection campaign.
The About page states that KOBBO curates toys to spark creativity and skill-building instead of screen-time fillers. Customer-care details published in the footer are support@kobbo.in and +91 8329195232. Payment marks for VISA, Mastercard, and UPI appear in the footer beside cart and policy links.
The site also displays an on-page rating line (“4.8 Rated by 675+ Happy Families”) and parent reviews. Those figures are KOBBO’s own storefront claims, not ShubhDigi performance metrics.
Project requirements
A D2C toy brand needs more than a theme skin. Parents shop on phones, compare prices and materials, and abandon carts when catalog or checkout friction appears. The live KOBBO experience shows a storefront designed around those jobs:
- A brand homepage that leads with merchandising and a Shop Now path
- A dedicated shop catalogue for browsing the full range
- Product detail pages with price, media, and purchase context
- Collection landing pages (including a festive Ganpati collection)
- An About story for brand trust
- Cart drawer, login, and policy pages that complete a commerce loop
Those are the requirements this case study treats as the brief. A before-state audit of a previous website was not available, so the narrative stays with what the live site actually delivers.
Goals
- Give parents a clear path from brand story to product discovery.
- Keep catalogue and product pages shoppable on mobile viewports.
- Use Shopify for catalog, media, and commerce operations while presenting a custom Next.js storefront.
- Surface shipping, returns, and payment trust before checkout anxiety sets in.
- Leave room for seasonal merchandising (festive collections) without rebuilding the information architecture.
Strategy and approach
The strategy visible on the live site is headless-style commerce: Shopify remains the catalog and media source, while Next.js owns presentation. Product images resolve through cdn.shopify.com and are rendered by Next.js image optimization. Collection routes use /collections/… and product routes use /products/… — Shopify’s commerce URL model — on a custom storefront host.
That split matters for D2C brands. Merchandisers can keep Shopify’s product admin, inventory, and media library. The storefront team can design homepage storytelling, mobile navigation, and conversion modules without being limited to a stock theme grid.
The merchandising approach is equally specific: recently added products, shop-by-collection tiles, unboxing/play moments, and parent reviews sit above the brand story. Discovery comes first; biography comes after proof.
Information architecture and user journey
Primary navigation on the live site is Home, Shop Toys, About Us, and Reviews, plus search, account, and cart actions.
Typical parent journeys:
- Homepage to shop. Hero copy and Shop Now send visitors to the catalogue.
- Catalogue to product. Grid cards open product detail pages with title, price, and media.
- Collection campaign. Banner and collection links (for example the Ganpati collection) create seasonal entry points.
- Story to shop. About explains curation, then returns visitors to Shop Toys or Contact.
- Cart recovery. An empty cart drawer explains the state and offers Continue Shopping.
Policy pages — shipping, returns and refunds, terms, privacy, and FAQs — sit in the footer so checkout questions have a public answer. That is a conversion-focused information architecture even when no conversion rate is published.
UI/UX and visual direction
The storefront uses a warm, family-facing visual system: rounded product cards, playful type pairing (Baloo 2 with Inter), and large product photography. Utility classes on the document root (min-h-screen antialiased) match a Tailwind CSS workflow.
Homepage modules are ordered for shopping, not brochure-ware: trust ticker, hero, recently added products, collections, “why parents choose us,” social/unboxing moments, reviews, then brand story. That sequence keeps product discovery above the fold on desktop and in the first few mobile scrolls.
Mobile navigation collapses into an open-menu control, with search and cart remaining reachable. The cart drawer is a slide-over rather than a dead-end page, which keeps the shopper in context.
Development and technical implementation
Verified from the live HTML, network assets, and public routes:
- Next.js / React storefront —
/_next/imageURLs, Next font CSS modules, and App-style routing. - Shopify commerce backend — product and collection paths plus
cdn.shopify.commedia for catalog files and collection images. - Tailwind CSS utility classes on the document root and layout shell.
- Responsive image pipeline — separate hero-desktop and hero-mobile assets preloaded for each viewport.
Checkout, payments, and inventory administration remain inside Shopify’s commerce platform. This case study does not claim a custom payment gateway, a specific Shopify plan, or unpublished API details.
ShubhDigi’s relevant delivery surfaces for a similar brief are custom e-commerce development, Shopify development, and conversion rate optimization.
Important features delivered
What the live project demonstrates:
- Custom D2C homepage with campaign ticker and merchandising modules
- Shop catalogue with product cards, prices, and collection grouping
- Product detail pages for individual SKUs
- Seasonal collection landing (Ganpati Collection)
- About / brand-story page
- Cart drawer with empty and continue-shopping states
- Account login entry
- Search control in the header
- Reviews module with named parent quotes published on the site
- Footer policies and customer-care contacts
- India-focused commerce trust (shipping, returns, UPI/card marks)
Responsive experience
Desktop (~1440) presents a wide merchandising hero, multi-column product grids, and persistent utility links. Mobile (~390) keeps the same journeys behind a compact header: menu, search, and cart stay available, and product cards stack for thumb scrolling. Screenshots in the gallery were captured from the public site at those viewports.
SEO, performance, accessibility, and discoverability
Public, verifiable observations:
- Unique page titles such as “Kobbo | More Than Toys.” and “Our Story | Kobbo | More Than Toys.”
- Semantic navigation and footer taxonomy
- Next.js image optimization for Shopify media
- Separate mobile and desktop hero preloads
- Accessible control labels on search, cart, and menu buttons
This page does not publish Lighthouse scores, Core Web Vitals, rankings, or index counts because those were not independently measured for this write-up.
Outcome
The outcome that can be stated without invention: KOBBO operates a live, shoppable D2C website where parents can discover curated toys, open product pages, add items through a cart drawer, and reach brand story and policy content on both desktop and mobile. Shopify holds catalog and media; Next.js presents the brand.
If you are planning a similar headless or custom Shopify storefront, start a project conversation.
Key takeaways
- D2C toy retail needs product discovery before brand biography.
- Shopify plus a custom Next.js storefront is a verified pattern on this project — not a theme-only storefront.
- Seasonal collections and recently-added modules keep a catalogue feeling current.
- Cart, login, and policy pages complete the commerce loop even when revenue metrics stay private.
- Mobile shopping controls must stay visible; KOBBO keeps search and cart in the compact header.
Sources and verification
Claims on this page come from the public website https://www.kobbo.in/ (homepage, /shop, /about, product and collection URLs) inspected on 19–20 September 2026. Shopify use is inferred from cdn.shopify.com media and Shopify-style routes. Founder attribution was not published on the storefront and is omitted. Instagram media was not copied.
