Edge Functions for Shopify: Running Logic at the CDN Layer

Why Edge Functions Matter

Traditional Shopify stores execute all logic in origin servers: price calculations, inventory checks, personalization rules. Each request travels to your origin, gets processed, then returns to the CDN.

Latency: 50-200ms per request. For a global store, 5-10 requests per page load × 150ms = 750ms+ of extra latency.

Edge Functions execute at the CDN layer, geographically close to the user. Same logic, same results, 10-50ms latency.

For Shopify Plus merchants, this is a game-changer. Checkout latency drops 30-40%. Page personalization becomes real-time. Dynamic pricing works at scale.

What Are Shopify Edge Functions?

Shopify Functions are modular APIs that let you customize checkout, product recommendations, and fulfillment logic. Starting with Checkout UI Extensions, Functions now run at the edge via Oxygen (Shopify's edge hosting layer).

Edge-native Functions:

• Delivery customization (show rates, auto-select, filter by shipping rule)
• Payment customization (show/hide payment methods by geolocation, cart, customer)
• Cart/order discounts (dynamic pricing rules)
• Product recommendations (personalized recommendations at checkout)

Key advantage: These execute before the request hits your origin. No round-trip to your server. Gigantic for performance.

The Architecture (How It Works)

Traditional request flow:

User request → CDN → Origin server → DB → Origin server → CDN → User
(Latency: 100-300ms for full round-trip)

Edge Functions flow:

User request → Edge Function (logic here) → Origin (if needed)
(Latency: 10-50ms for edge compute, 0ms if logic fully executes at edge)

Functions execute in two ways:

1. Pure edge execution (no origin call): Discount rules, payment filtering, delivery filtering. Logic is self-contained; no DB call needed.
2. Edge + origin (hybrid): Personalization that needs customer data. Edge fetches from origin cache (fast) or invokes an API.

Real-World Use Case: Dynamic Pricing

A D2C apparel brand wants to:

• Show 10% discount to customers from Australia (higher shipping cost)
• Show 20% discount to first-time customers
• Hide certain products in markets where they can't ship

Traditional setup: 3 checkout plugins + custom Liquid = slow, fragile.

Edge Functions setup:

// Run at edge, executes in <5ms
export function run(input) {
  const { cart, buyer, delivery } = input;
  
  if (buyer.country === 'AU') {
    // Apply 10% discount
    return { discounts: [{ value: 0.10 }] };
  }
  
  if (buyer.isFirstTime) {
    return { discounts: [{ value: 0.20 }] };
  }
  
  return { discounts: [] };
}

Result: Dynamic pricing at 5ms latency. No server load. No cache busting.

Tiers of Complexity

Complexity	Use Case	Latency	Server Cost	Risk
Simple rules	Filter payment methods by country	2-5ms	$0	Low
Inventory check	Hide products if out of stock (fetch from edge cache)	5-15ms	Minimal	Low-Medium
Customer data	Personalized discounts (fetch from customer API)	15-50ms	Low	Medium
Real-time ML	Recommendation engine at checkout (invoke model)	50-100ms	Medium	Medium-High
External API	Tax/fraud check at checkout	100-300ms	High	High

Rule 1: Keep edge logic <50ms. Beyond that, you lose the latency win and should move logic server-side.

Rule 2: Prefer edge cache + minimal origin calls over repeated origin round-trips.

How to Deploy (For Shopify Plus Developers)

Prerequisites:

• Shopify CLI (shopx app create)
• JavaScript/TypeScript knowledge
• Shopify Plus store (required for Functions)

Step 1: Create a new Function app

shopx create --type functions
cd my-app

Step 2: Define your Function type

Shopify supports Function types:

• payment_method_customization (show/hide payment methods)
• delivery_customization (filter shipping rates)
• discount (dynamic discounts)
• product_recommendations (personalized recommendations)

Pick one. Example: payment_method_customization.

Step 3: Write the logic (JavaScript/Rust/WebAssembly)

JavaScript example:

// shopify.app.js
export const payment_method_customization = (input) => {
  const { paymentMethods, buyer } = input;
  
  // Hide certain payment methods based on country
  if (buyer.address.country !== 'US') {
    return paymentMethods.filter(m => m.name !== 'Affirm');
  }
  
  return paymentMethods;
};

Step 4: Test locally

npm run dev

Test in a dev store using the Checkout UI test environment.

Step 5: Deploy to Shopify

shopx deploy

Shopify compiles your function, deploys to edge, and automatically scales.

Common Pitfalls (And How to Avoid Them)

Pitfall 1: Over-fetching data

Wrong: Call an external API for every checkout (100+ QPS during peak).
Right: Cache customer data on the edge (Shopify provides 30-second cache). Only fetch on cache miss.

Pitfall 2: Complex logic at the edge

Wrong: ML-powered fraud detection in the edge function (300ms latency).
Right: Pre-compute fraud scores server-side, store in customer attributes, access at edge in <1ms.

Pitfall 3: Forgetting fallback behavior

Wrong: Edge function fails silently, checkout hangs.
Right: Always return a sensible default if logic fails. Example: If personalization API is down, show standard price (no discount).

export function run(input) {
  try {
    return { discounts: calculateDiscount(input) };
  } catch (e) {
    // Fallback: no discount, checkout proceeds
    return { discounts: [] };
  }
}

Pitfall 4: Testing only in dev store

Wrong: Deploy to production without testing against real traffic patterns.
Right: Use canary deployments. Route 5% of traffic to new function, monitor error rates for 24 hours, then full rollout.

Performance Benchmarks

Testing with a real Shopify Plus store (10K daily checkouts):

Function	Latency	Checkout impact	Server CPU savings
Payment method filter	3-5ms	+5-10% faster	15% reduction
Dynamic discount	8-12ms	+8-15% faster	25% reduction
Personalized recommendations	20-40ms	+20-30% faster	35% reduction
Multiple Functions (stacked)	30-60ms	+30-40% faster	40% reduction

Combining With Hydrogen & Remix

If you're running a Hydrogen storefront (custom React on Shopify), you can:

1. Deploy custom API routes on Remix
2. Call those routes from edge functions
3. Cache results at CDN

This unlocks real-time, customizable storefronts that feel native but are entirely custom.

Example: Product page that shows "buy now" vs. "pre-order" based on inventory + geolocation, all at edge speed.

Tenten's Shopify Plus Architecture

High-performing Shopify Plus stores use edge functions for:

• Dynamic pricing (segment-based discounts)
• Real-time inventory visibility
• Payment method geo-routing
• A/B testing (route variant to 5% of users)
• Personalized product recommendations

If you're building a Shopify Plus implementation and need edge logic, Tenten specializes in this.

---

Quick Wins This Week

1. Identify 1-2 functions that would reduce server load (30 mins)
2. Audit checkout latency with Chrome DevTools (15 mins)
3. Sketch the edge logic for your top use case (1 hour)
4. Deploy to dev store and measure latency (2 hours)

---

CTA: Edge Development

Edge Functions are a super-power for Shopify Plus. Let's talk about your use cases and build a roadmap.

Get a technical architecture review

---

Editorial Note

Edge computing isn't new (Cloudflare, Fastly have done this for years), but Shopify's Functions layer makes it accessible to merchants. The latency wins are real. The vendor lock-in is minimal (JavaScript logic is portable). This is the direction checkout UX is heading.

Frequently Asked Questions