ShipLens
Real-time order tracking customization platform for Shopify merchants.
The Problem
Shopify merchants have no control over what tracking information their customers see. Shipping APIs return hundreds of raw status codes, and customers get confused or contact support unnecessarily. Israeli merchants also need bilingual Hebrew/English support.
How It Works
ShipLens is a standalone Next.js server that renders fully customizable tracking pages inside the client's Shopify storefront via Shopify's App Proxy. When a customer visits the tracking page, Shopify proxies the request to our server, which fetches data from AfterShip and renders the response.
The admin panel lets merchants control visibility and messaging for each of AfterShip's 41 tracking subtags, configure per-order overrides, and set up custom delivery journey steps. A live preview panel shows exactly what customers will see in real time.
Caching uses a dual-layer strategy: AfterShip webhooks update the cache in real-time on status changes (primary), with a 30-minute TTL fallback for direct API calls when webhooks are delayed.
Key Challenges
Rendering inside Shopify's storefront without iframe hacks
Used Shopify App Proxy — the tracking server responds with HTML that Shopify wraps in the store's theme. All requests are HMAC-SHA256 verified for security.
Per-order customization without duplicating global settings for every order
Designed a 3-level precedence system (per-order > global > defaults) with sparse JSONB storage — only changed fields are stored, reducing database bloat.
Bilingual RTL/LTR support in a single codebase
Used CSS logical properties (inline-start/inline-end instead of left/right). HTML dir attribute switches based on language selection.
Deterministic fake tracking timestamps that don't change between page loads
Used SHA256-seeded random number generator keyed by order ID + step number. Same order always produces the same timeline.