Testing Shopify Webhooks Locally: A Complete Guide

If you're building a Shopify app or custom integration, you'll need to handle webhooks. Order created, fulfillment updated, customer registered — Shopify sends events for everything.

The problem? Testing these webhooks locally is painful. You create a test order, wait for the webhook, realize you need to change something, create another order, wait again...

This guide shows you a better way.

Why Shopify Webhooks Are Tricky to Test

Shopify webhook development has some unique challenges:

• Test orders cost time — Even in development mode, creating orders takes multiple clicks
• Event variety — You need to test orders/create, orders/updated, orders/cancelled, fulfillments, refunds...
• Payload complexity — Shopify payloads are large and nested, easy to miss a field
• HMAC verification — Shopify signs webhooks, and you need to verify them correctly

The Traditional Approach (And Why It's Slow)

Most tutorials tell you to:

1. Set up ngrok to expose your localhost
2. Register the ngrok URL in Shopify admin
3. Create a test order in your development store
4. Wait for the webhook to arrive
5. Check your logs, make changes, repeat

This works, but it's slow. Every code change means creating another test order. And if ngrok restarts, you need to update the webhook URL in Shopify.

A Better Approach: Capture and Replay

Instead of creating test orders every time, capture the webhook once and replay it as many times as you need.

https://hookreplay.dev/hook/abc123xyz

$ npx hookreplay

● hookreplay> config api-key hr_xxxxxxxxxxxx
✓ API key saved!

● hookreplay> connect
✓ Connected! Waiting for replay requests...

Testing Different Shopify Events

Shopify has dozens of webhook topics. Here are the most common ones you'll need to test:

With capture-and-replay, you only need to trigger each event type once. Then you can replay them indefinitely while you build and debug your handlers.

Handling HMAC Verification

Shopify signs all webhooks with an HMAC signature. You should verify this in production, but during development you have options.

Option 1: Skip verification in development

const verifyShopifyWebhook = (req) => {
  if (process.env.NODE_ENV !== 'production') {
    return true; // Skip in development
  }
  
  const hmac = req.headers['x-shopify-hmac-sha256'];
  const hash = crypto
    .createHmac('sha256', process.env.SHOPIFY_WEBHOOK_SECRET)
    .update(req.rawBody)
    .digest('base64');
    
  return hmac === hash;
};

Option 2: Use your development store's secret

When you capture a webhook from your development store, it's signed with that store's webhook secret. Use the same secret locally and verification will pass.

Testing Edge Cases

One of the biggest advantages of capture-and-replay is testing edge cases. With HookReplay, you can edit the payload before replaying.

Want to test:

• Order with 50 line items? — Add more items to the array
• Customer with no email? — Set email to null
• Refund greater than order total? — Edit the refund amount
• Missing shipping address? — Remove the field

These edge cases are hard to create naturally in Shopify. With payload editing, you can test them in seconds.

Real-Time Forwarding

Sometimes you want webhooks forwarded to localhost in real-time as they arrive, not just replayed later. HookReplay supports this too.

With the CLI connected, any new webhook that arrives at your HookReplay URL is instantly forwarded to your localhost. You get the best of both worlds: real-time for new events, replay for debugging.

Summary

Testing Shopify webhooks locally doesn't have to mean creating test orders all day. With capture-and-replay:

• Capture each event type once
• Replay unlimited times while you debug
• Edit payloads to test edge cases
• Keep a history of all webhooks for reference

Spend your time writing code, not clicking through Shopify's admin.