Project Overview

This was a flagship headless commerce project — replacing a traditional Shopify Online Store with a fully custom, server-rendered storefront built on Shopify Hydrogen (React + Remix) and deployed to Shopify Oxygen. The core requirement was real-time enterprise ERP integration (NetSuite and SAP) for accurate available-to-promise inventory visibility, which is simply not achievable with a standard Shopify theme approach.

Architecture

Shopify Hydrogen + Oxygen

• Built and deployed the entire storefront on Shopify Hydrogen using React and Remix, with edge rendering on Shopify Oxygen for global low-latency performance.
• Used Remix loaders for SSR data fetching with intelligent caching strategies to maintain fast render times despite heavy third-party data dependencies.
• Developed reusable, mobile-responsive React components for all key UI elements — product pages, collection grids, cart, account portal — ensuring pixel-perfect implementation from Figma designs.

Real-Time ERP Integration

• Available-to-Promise (ATP) Inventory: Integrated with NetSuite and SAP ERP systems to implement real-time ATP logic on Product Detail Pages — showing customers precisely how many units are available for immediate shipment vs. on backorder.
• Multi-Location Inventory: Enabled dynamic per-warehouse/per-store-location stock visibility on PDPs and the cart, improving conversion by surfacing localised availability and accurate delivery estimates.
• API Orchestration: Orchestrated data flow between Shopify Storefront API (product/catalogue data) and external ERP APIs, implementing optimised data-fetching strategies to maintain fast render times despite the volume of third-party API calls.

Advanced Order Tracking Portal

• Developed a custom account portal that pulls order status and shipment tracking directly from ERP and 3PL providers — giving customers live, granular updates well beyond standard Shopify order statuses.
• Integrated 3PL API for real-time carrier tracking events, displayed with a visual timeline in the customer account section.

Performance Optimisation

• Monitored and optimised Core Web Vitals (FCP, LCP, CLS) using Lighthouse and PageSpeed Insights throughout development.
• Implemented caching strategies and asset lazy loading to mitigate external API latency impact on page speed — achieving 90+ scores even with live ERP data calls on every page load.

Results

• Delivered a storefront capable of showing real-time ERP inventory data per warehouse location — a capability impossible in standard Shopify themes.
• Maintained 90+ Lighthouse performance scores despite heavy third-party API dependencies.
• Customers gained live, accurate delivery estimates and granular shipment tracking, significantly reducing customer service enquiries.