← Back to projects

Portfolio Project

F&B Storefront

Shopify online ordering + AI promotions

A Shopify-powered online ordering experience for F&B merchants. AI-generated promotions, smart combo recommendations, and automated menu copy. Replaces expensive delivery platform commissions with a direct channel.

The problem

Small F&B businesses in Singapore face a painful trade-off with online ordering:

Option A: Food delivery platforms. GrabFood, Deliveroo, and foodpanda offer reach — but take 25–35% commission per order. For a business running on 10–15% net margins, that's the difference between profit and loss. Platforms also own the customer relationship.

Option B: No online ordering. Many small F&B businesses simply don't sell online. They miss customers who prefer ordering ahead for pickup. They miss offices that want bulk lunch orders. They miss the growing segment that discovers restaurants online first.

There's a gap: an affordable, merchant-owned online ordering channel that doesn't eat their margins. Small merchants also lack tools to optimize menu pricing, create effective promotions, and write compelling product descriptions.

The approach

Shopify as the commerce backbone.

Shopify handles payments, checkout, inventory, and the merchant admin. The Storefront API gives us full flexibility for the customer-facing experience. Shopify's battle-tested commerce infrastructure stays underneath.

Custom storefront, not a generic theme.

F&B ordering is different from product e-commerce. Customers browse by category and customize items. They expect a fast, mobile-first checkout. We built a purpose-built React storefront to deliver that.

Sync with the POS system.

Menu items, prices, and stock levels sync bidirectionally with F&B Command. Update a price in the POS, it updates on Shopify. Mark an item sold out on Shopify, it reflects in the POS. One source of truth, two channels.

AI runs server-side, results pushed to Shopify.

The AI features run on the shared backend and push results to Shopify via the Admin API. This keeps the storefront fast and the AI logic centralized.

Key features

Custom F&B storefront

  • Menu-style browsing with category tabs
  • Item customization (size, sugar level, add-ons)
  • Pickup time-slot and delivery zone selection
  • Mobile-first design (80%+ orders from mobile)
  • Shopify native payment processing

Order management

  • Real-time incoming order feed with audio notifications
  • Status workflow: New → Preparing → Ready → Collected
  • Pickup/delivery slot management
  • Daily order summary with revenue breakdown

POS sync

  • Bidirectional menu sync (items, prices, modifiers)
  • Sold-out status propagates instantly across channels
  • Combined in-store and online reporting
  • Single inventory source of truth

✦AI Combo/bundle engine

  • Basket analysis to find frequently paired items
  • Time-based combos: breakfast bundles, lunch deals, tea-time offers
  • Merchant approval before going live
  • A/B tracking for combo performance

✦AI Promo suggestions

  • Identifies slow-moving items at risk of waste
  • Suggests time-limited promotions with discount amounts
  • Markdown timing based on shelf life and sell-through rates
  • Weekly promo performance reports

✦AI Menu copy generator

  • Generates descriptions, taglines, and SEO-friendly titles
  • Tone options: casual, premium, playful
  • One-click push to Shopify product pages
  • Bulk generation for entire menu

Tech stack

LayerTechnology
StorefrontReact + Shopify Storefront API
FrameworkReact + Vite + Shopify SDK
IntegrationShopify Admin API
AIGoogle Gemini
DatabasePostgreSQL (shared with F&B Command)
PaymentsShopify Payments

Security and data protection

We follow zero trust principles, aligned with ISO 27001 controls and IMDA's Data Protection Trustmark (DPTM) requirements.

Zero trust architecture

  • Scoped, least-privilege access tokens for all Shopify API communication
  • We verify all Shopify webhook payloads via HMAC signatures
  • Role-based access — staff can manage orders but not access financials

Data protection (PDPA-aligned)

  • Shopify's PCI-DSS and SOC 2 compliant infrastructure handles all customer checkout data
  • Custom backend stores only minimum data needed for fulfillment
  • AI features process aggregate, anonymized data. We never send individual profiles to LLM providers

Integration security

  • We rotate API credentials regularly and store them in secret management
  • Idempotent sync operations with conflict resolution
  • Audit trail for all sync events
  • Payment card data never touches custom infrastructure

What this demonstrates

Shopify ecosystem expertiseE-commerce developmentAPI integrations and data syncAI-powered content generationData-driven featuresSecure integration patternsOmnichannel strategy