iBuy

iBuy is a comprehensive e-commerce tool built for the Shopify ecosystem. It empowers merchants to create complex sales offers—like "Buy 2 Get 1 Free", "Mix and Match Bundles", or "Tiered Volume Discounts"—without needing a developer. The app integrates deeply with the Shopify checkout to automatically apply discounts and update inventory.

Highlights

• Visual Tier Builder: An intuitive drag-and-drop interface for merchants to define discount tiers based on quantity or cart value.
• Dynamic Widgets: Lightweight Javascript widgets that inject offer details directly into the Product Page (PDP) and Cart Drawer, matching the store's CSS automatically.
• Cart Transformation: Automatically merges separate items into a "Bundle Product" at checkout to ensure correct tax and shipping calculations.
• Analytics & ROI: A built-in dashboard tracking how many times an offer was viewed vs. converted, giving merchants clear ROI data.
• Shopify Plus Compatible: Full support for Shopify Scripts and Checkout Extensibility.

Technical Deep Dive

Building for Shopify requires navigating strict API limits, compliance requirements, and ensuring zero impact on the merchant's storefront performance.

Shopify Functions & Native Discounting

iBuy moves away from legacy "Draft Order" hacks and utilizes Shopify Functions (WASM-based backend logic).

• Reliability: By deploying our discount logic as a Function to Shopify's infrastructure, the discounts are applied natively during checkout with <5ms latency. No API calls are made to our server during the checkout process, eliminating a critical point of failure.
• Combinations: We implemented complex "Discount combination" logic, allowing merchants to toggle whether their Bundle discounts stack with global store sales.

App Architecture (Remix)

The app is built using the Shopify App Bridge and Remix.

• Embedded App: The admin dashboard runs inside the Shopify Admin iframe. We use Remix loaders to authenticate requests and fetch shop data server-side, ensuring a snappy, secure experience.
• Prisma & Database: We use Prisma with a PostgreSQL database to model the complex relationships between "Offers", "Target Products", and "Analytics Events". A crucial optimization was indexing shop_domain and product_id to handle millions of queries.

Storefront Optimization

• ScriptTags vs App Embeds: We migrated from legacy ScriptTags to Theme App Extensions (App Embeds). This means our widget code is hosted on Shopify's CDN, not ours, and is loaded async.
• Shadow DOM: To prevent our widget styles from clashing with the merchant's theme (and vice versa), we encapsulate our UI widgets within the Shadow DOM.

Technology Stack

• Framework: Remix (React), Shopify App Bridge
• Backend: Node.js
• Database: Prisma, PostgreSQL
• Storefront: Preact (for 3kb bundle size widgets), Web Components
• Platform: Shopify Functions (Rust/WASM), Checkout UI Extensions
• Infrastructure: Fly.io (for global distribution), Redis (Session storage)

Challenges & Solutions

Challenge: Handling "Flash Sales" (Black Friday traffic). Solution: During flash sales, webhook volume (Order Created, Inventory Update) spikes 100x. We decoupled our webhook processing using a Redis-backed queue (BullMQ). The webhooks are acknowledged instantly, and the processing (updating analytics, syncing inventory) happens asynchronously, ensuring our server never drops a request under load.

Challenge: Database Schema Evolution. Solution: Bundles can be extremely complex (e.g., "Buy 3 of Collection A, get 1 of Collection B at 50% off"). Modeling this in SQL was rigid. We adopted a hybrid approach: storing the core Offer metadata in SQL columns for querying/indexing, but storing the deep configuration logic as a typed JSONB blob. This empowered us to release new offer types without running database migrations every week.