YUMI
Headless Commerce for AI-Powered Smart Plush Toy
Customer Rating
Reviews
Content Architecture
Revalidation
The Indian toy market had no product that genuinely combined emotional intelligence, parental oversight, and AI interaction in a form factor kids would actually love. Smart speakers were designed for adults. Educational apps required screen time. Plush toys were passive. The engineering challenge was to build a digital storefront that could match the emotional warmth of the product — fast, trustworthy, and built to convert parents who needed to feel confident before spending ₹13,000 on a toy.
We decoupled the frontend entirely from Shopify, building a Next.js application that consumes Shopify Storefront API and Admin API via GraphQL. Shopify becomes a backend-of-record (inventory, variants, discounts, checkout) while the discovery and conversion experience stays fully custom. Every piece of UI copy, image URL, and section layout lives in 18 JSON config files hosted on S3 — separating deployment from content updates entirely.
Under the Hood
Headless Commerce over Shopify Themes
Full control over UI/UX without Shopify's rendering constraints. Checkout creates a Shopify Cart via Storefront API and redirects to Shopify's hosted checkout — keeping PCI compliance on Shopify while the conversion experience stays fully custom.
Externalized Configuration via AWS S3
18 JSON config files on S3 control all UI content. Changing a headline, swapping an image, or updating an FAQ requires no code deploy — just a config push. Dual environment support via a single {{S3_BASE_URL}} placeholder.
ISR with 1-Hour Revalidation
Pages are statically generated at build time and revalidated every 3600 seconds. S3 configs are fetched at request time on the server, so content changes reflect within the revalidation window without deployment.
Per-Section Error Boundaries
Every major homepage section is wrapped in a React error boundary. If an S3 config fails or a Shopify API call times out, only that section degrades — the rest of the page renders normally.
- +Interactive audio demo — users hear YUMI respond to real questions before buying
- +Pincode serviceability check via Shiprocket API with delivery estimate
- +Referral system embedded in product carousel (₹1,000 discount + ₹1,000 cashback)
- +Responsive media strategy — separate desktop/mobile video files by viewport
- +Shopify product image filtering by alt text convention for clean carousel shots
- +Facebook Pixel integration for full-funnel conversion tracking
- +Dual-environment infrastructure (production + staging)
- +Config generation script with environment-specific S3 URL substitution
Why We Did
What We Did
Every architectural decision has a reason. Here are the ones worth explaining.
Why headless over Shopify themes?
Full control over UI/UX without Shopify's rendering constraints, ability to use React 19 compiler and Next.js App Router for performance optimization. Shopify becomes a backend-of-record while the frontend is completely owned.
Why externalize config to S3 instead of hardcoding?
Separating deployment from content updates means the marketing team can run A/B tests on copy, swap hero videos for seasonal campaigns, or add FAQ entries without touching code or waiting for a deploy.
Why per-section error boundaries?
For a product built on trust (parents buying for children), a partial failure that feels intentional is far less damaging than a blank page or full crash.
Building a store for AI plushies is a challenge — parents need to trust the technology before they trust you with their children. The Beyond Horizon designed every product page to answer parent concerns before they even asked. Our launch exceeded every sales target we set.
Aditya Agarwal
CEO, YUMI AI
More Case Studies
Ready to Build Something Like This?
Let's talk about your project.