NOTE:

• THIS IS NOT A PRODUCTION READY THING. IT IS JUST TO UNDERSTAND THE FLOW OF WORK AND JUST FOR EDUCATIONAL PURPOSE. DO NOT TRY THIS IN PRODUCTS AS IT MAY CAUSE SOME SERIOUS ISSUES TO THE CLIENT SITE OR SHOPIFY ECOSYSTEM. FOR THE PRODUCTION WE NEED PROPER AUTHENTICATION PROCCESS OF STORES AND OTHER HMAC VALUES AND MAINTAIN PROPER SESSIONS FOR THE CLINTS AND ACTIVITIES.
• DO NOT MISUSE IT. IT'S JUST FOR EDUCATIONAL PURPOSE JUST TO UNDERSTAND THE FLOW.
• AUTHOR: StackWise Dev

Shopify Custom App (Beginner Flow)

This project is a simple Node.js server that:

• connects to Shopify Admin API
• registers webhooks
• receives webhook events
• verifies webhook HMAC signature
• saves fetched data in a local JSON database

The flow below is based on server.js logic (starting after line 18 comments).

1) What This Project Does

• Uses SHOPIFY_ACCESS_TOKEN to call Shopify Admin API.
• Creates and lists store webhooks.
• Receives product update webhook data at a local endpoint.
• Verifies webhook source using x-shopify-hmac-sha256.
• Fetches products and orders from Shopify and stores them in database/db.json.

2) Tech Stack

• Node.js + Express
• dotenv for env variables
• lowdb for lightweight local storage
• crypto for HMAC verification

3) Required Environment Variables

Create/update .env.webhook-learning:

PORT=3000
BASE_URL=http://localhost:3000

SHOPIFY_API_KEY=your_client_id
SHOPIFY_API_SECRET=your_client_secret
SHOPIFY_ACCESS_TOKEN=your_admin_api_access_token
SHOPIFY_STORE_URL=https://your-store.myshopify.com
SCOPES=read_products,write_products,read_orders,write_orders

Notes:

• SHOPIFY_ACCESS_TOKEN is required for Admin API calls.
• SHOPIFY_API_SECRET is required for webhook HMAC verification.

4) Install and Run

npm install
npm start

Server starts at:

• http://localhost:3000

5) Project Flow (Step by Step)

Step A: Start server and initialize DB

On startup:

• .env.webhook-learning is loaded.
• Express app is created.
• Raw parser is enabled for /api/webhook/* routes.
• JSON parser is enabled for normal API routes.
• database/db.json is initialized with:
  • products: []
  • orders: []
  • webhooks: []

Step B: Register a webhook in Shopify

Endpoint:

• POST /api/shop/register-webhook

Body example:

{
  "topic": "products/update",
  "address": "https://your-public-url.com/api/webhook/product-update",
  "format": "json"
}

What happens:

• Validates topic, address, format.
• Checks local DB to avoid duplicate topic registration.
• Calls Shopify:
  • POST {SHOPIFY_STORE_URL}/admin/api/2026-04/webhooks.json
  • Header: X-Shopify-Access-Token
• Saves webhook response in db.json.

Step C: (Optional) List webhooks

Endpoint:

• GET /api/shop/webhooks

Purpose:

• Fetch all registered webhooks from Shopify store.

Step D: Shopify sends event to your webhook address

Webhook receiver:

• POST /api/webhook/product-update

This route:

• verifies HMAC using SHOPIFY_API_SECRET
• rejects invalid source with 401
• parses webhook payload from raw body buffer
• logs payload info and returns success

6) Why Raw Body Is Important for HMAC

For webhook verification, Shopify signs the raw request body. If body is parsed into object before verification, HMAC check fails.

That is why this project uses:

• express.raw({ type: "application/json" }) on /api/webhook/* routes.

7) Fetch Data from Shopify

Get Products

• GET /api/shop/products

Get Orders

• GET /api/shop/orders

Both endpoints:

• call Shopify Admin API with X-Shopify-Access-Token
• save result to database/db.json

8) Quick Testing Order for Newbies

1. Add env values in .env.webhook-learning.
2. Run server with npm start.
3. Register webhook using POST /api/shop/register-webhook.
4. Trigger a product update in Shopify admin.
5. Check server logs for webhook payload.
6. Call GET /api/shop/products and GET /api/shop/orders.
7. Open database/db.json to confirm saved data.

9) Common Errors and Fixes

• 401 Unauthorized during register:

  • Check SHOPIFY_ACCESS_TOKEN value.
  • Ensure app is installed on same store.
  • Ensure SHOPIFY_STORE_URL is correct.

• Webhook HMAC validation fails:

  • Confirm SHOPIFY_API_SECRET matches the app secret.
  • Ensure webhook route receives raw body (Buffer).

• Webhook not delivered:

  • Ensure webhook address is publicly reachable HTTPS URL.
  • Confirm topic is correct (products/update, etc.).

10) Security Tips

• Never commit .env.webhook-learning.
• Rotate API secret/token if exposed.
• Keep HMAC verification enabled for every webhook route.