BACK TO PORTFOLIO
Shopify Custom App & Liquid Module
Internal Shopify Solution
ROLE: Lead Full-Stack DeveloperQuick Commerce Logistics
Designed a lightweight geolocation verification module for Shopify stores that prompts users for their location, verifies it against regional warehouse coverage circles using haversine algorithms, and unlocks hyperlocal delivery shipping rates in checkout.
THE CHALLENGE
Querying external distance APIs on every page load would degrade storefront load times and exceed API limits under high traffic volumes.
THE SOLUTION
We cached the local coverage zones on the client in SessionStorage and computed distances using browser-native haversine calculations, keeping site speed extremely fast without external API latency.
- Dynamic browser geolocation locator matching boundary coordinates.
- Warehouse distance calculations utilizing lightweight JS API calls.
- Custom shipping rate injection at Shopify Checkout.
- Address search autocomplete using Google Place Autocomplete API.
A fast coordinate distance verification script executing in-browser to determine warehouse proximity in milliseconds.
Hyperlocal Haversine Distance Calculationjavascript
// Lightweight proximity verification running natively in checkout/cart scripts
function calculateDistance(lat1, lon1, lat2, lon2) {
const R = 6371; // Earth's radius in km
const dLat = (lat2 - lat1) * Math.PI / 180;
const dLon = (lon2 - lon1) * Math.PI / 180;
const a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distance = R * c; // Distance in km
return distance;
}
// Verify coordinates against regional hub locations (e.g. max 15km for 60m delivery)
function checkHyperlocalEligibility(userLat, userLng, hubs) {
const MAX_RADIUS_KM = 15;
return hubs.some(hub => {
const dist = calculateDistance(userLat, userLng, hub.lat, hub.lng);
return dist <= MAX_RADIUS_KM;
});
}PERFORMANCE STATS
MOBILE PAGESPEED
96/100
DESKTOP PAGESPEED99/100
AVG. LOAD TIME0.8s
TECH STACK USED
Shopify LiquidJavaScriptGoogle Maps APIShopify Ajax APINode.js