Shopify Blind Box App
Full Shopify app for mystery/blind box products. Features weighted win-rate algorithm, webhook order processing, and theme extensions.
TL;DR: TL;DR: I built a Shopify app that enables merchants to create mystery/blind box products. Customers buy a mystery box, and the app reveals a random product from a curated pool. Features weighted win rates, webhook processing, and storefront theme extensions.
The Problem
Mystery boxes and blind boxes are popular ecommerce products, but Shopify doesn't support them natively:
- No randomization: Can't assign a random product to an order
- No reveal mechanics: No way to show "what you won" after purchase
- Inventory management: Need to balance which products get selected
- Fulfillment complexity: Need to actually ship the revealed product
Merchants were hacking this with multiple variants or manual assignment—neither scales.
My Approach
I built a complete Shopify app with three layers:
- Admin dashboard: Create blind boxes, manage product pools, view purchases
- Webhook processing: Handle order creation, calculate winner, track reveals
- Theme extension: Display blind box info and reveal animations on storefront
The weighted win-rate algorithm balances three factors to help merchants move inventory strategically.
Architecture
Shopify Blind Box App - Architecture Diagram
Key Features
- Weighted Win Rates: Algorithm considers inventory level, days in stock, and price ratio
- Product Pool Management: Add/remove products, set individual weights
- Order Webhooks: Automatic winner calculation on purchase
- Fulfillment Integration: Reveal timing tied to order fulfillment
- Theme Extension: Native storefront display block
- Inventory Sync: Automatic updates when products change
Win Rate Algorithm
The algorithm balances three factors to help merchants move inventory:
final_weight = (
inventory_weight * 0.40 + // Higher inventory = higher chance
days_in_stock_weight * 0.30 + // Older items weighted higher
price_ratio_weight * 0.30 // Lower price = higher chance
)
This naturally:
- Clears overstocked items by increasing their win probability
- Moves slow sellers that have been sitting in inventory
- Maintains customer value by favoring lower-priced items
Results & Metrics
| Metric | Value |
|---|---|
| Completion Status | ~85% |
| Database Tables | 3 main models |
| Webhook Handlers | 4 |
| Admin Pages | 5 (dashboard, list, create, edit, purchases) |
| Algorithm Factors | 3 weights |
| Theme Blocks | 1 storefront display |
What I Learned
The biggest challenge was Shopify's Polaris web components. Unlike React components, Polaris uses custom elements (<s-text-field>, <s-card>) with different prop patterns:
// Standard React
<TextField label="Name" value={name} onChange={handleChange} />
// Polaris Web Components
<s-text-field label="Name" value={name} onInput={handleInput}>
<s-text slot="label">Name</s-text>
</s-text-field>
The webhook processing order was tricky. Orders can be created, updated, and fulfilled rapidly. I implemented idempotency checks to prevent double-processing:
// Check if already processed
const existing = await prisma.blindBoxPurchase.findUnique({
where: { orderId_blindBoxId: { orderId, blindBoxId } }
});
if (existing) return; // Already processed
Frequently Asked Questions
What problem does this app solve?
It enables Shopify merchants to sell mystery/blind box products where customers receive a random item from a curated pool. The app handles randomization, inventory management, and reveal mechanics.
What technologies power this project?
Remix.js (Shopify's official app framework) with TypeScript, Prisma for database access, PostgreSQL for storage, and Shopify's Polaris for the admin UI.
How fair is the randomization?
The weighted algorithm is transparent and merchant-controlled. Weights favor overstocked and slow-moving items while maintaining customer value. Merchants can see and adjust weights per product.
Frequently Asked Questions
More Projects
View allBuilt by Abhinav Sinha
AI-First Product Manager who builds production-grade tools. Passionate about turning complex problems into elegant solutions using AI, automation, and modern web technologies.