How do I build a Shopify order-tracking page without installing a tracking app?

# shopify.app.toml — your own custom app for your own store (created with Shopify CLI)
[access_scopes]
scopes = "read_orders,write_orders,write_app_proxy"

[app_proxy]
url = "https://track.example.com/proxy"
prefix = "apps"
subpath = "track"

# Shoppers open https://your-store.com/apps/track?order=1001&email=…
# Shopify forwards it, signed, to https://track.example.com/proxy

// server.js — Node 20+, Express. Runs on your server, not in the theme.
import crypto from "node:crypto";
import express from "express";

const app = express();
const { SHOPIFY_API_SECRET, SHOPIFY_ADMIN_TOKEN, LASTSCANNED_KEY } = process.env;

// 1. Shopify signs every app proxy request with your app's client secret.
function validProxySignature(query) {
  const { signature, ...params } = query;
  if (typeof signature !== "string") return false;
  const message = Object.keys(params)
    .map((key) => `${key}=${[].concat(params[key]).join(",")}`)
    .sort()
    .join("");
  const digest = crypto.createHmac("sha256", SHOPIFY_API_SECRET).update(message).digest("hex");
  return digest.length === signature.length &&
    crypto.timingSafeEqual(Buffer.from(digest), Buffer.from(signature));
}

// 2. Find the order with the Admin GraphQL API, and only show it to its owner.
async function findOrder(shop, name, email, customerId) {
  const res = await fetch(`https://${shop}/admin/api/2026-10/graphql.json`, {
    method: "POST",
    headers: { "Content-Type": "application/json", "X-Shopify-Access-Token": SHOPIFY_ADMIN_TOKEN },
    body: JSON.stringify({
      query: `query ($q: String!) {
        orders(first: 1, query: $q) {
          nodes { id name email customer { id } fulfillments { trackingInfo { number company } } }
        }
      }`,
      variables: { q: `name:${name}` },
    }),
  });
  const order = (await res.json()).data?.orders?.nodes?.[0];
  if (!order) return null;
  const ownsIt = customerId
    ? order.customer?.id === `gid://shopify/Customer/${customerId}`
    : !!email && order.email?.toLowerCase() === email.toLowerCase();
  return ownsIt ? order : null;
}

// 3. Track every number on the order in one lastscanned call (up to 100).
async function track(numbers) {
  const res = await fetch(
    `https://api.lastscanned.com/v1/track?numbers=${numbers.map(encodeURIComponent).join(",")}`,
    { headers: { Authorization: `Bearer ${LASTSCANNED_KEY}` } },
  );
  return (await res.json()).results ?? [];
}

const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);

app.get("/proxy", async (req, res) => {
  if (!validProxySignature(req.query)) return res.status(401).send("Bad signature");
  const { shop, logged_in_customer_id, order: orderNo, email } = req.query;
  const order = orderNo && (await findOrder(shop, `#${String(orderNo).replace(/^#/, "")}`, email, logged_in_customer_id));

  // application/liquid makes Shopify render this inside your theme's layout.
  res.set("Content-Type", "application/liquid");
  if (!order) return res.send(`<h1>Track your order</h1>
<form method="get"><input name="order" placeholder="Order number">
<input name="email" type="email" placeholder="Email"><button>Track</button></form>`);

  const numbers = order.fulfillments.flatMap((f) => f.trackingInfo.map((t) => t.number)).filter(Boolean);
  const results = numbers.length ? await track(numbers) : [];
  res.send(`<h1>Order ${esc(order.name)}</h1>` + results.map((r) => r.error
    ? `<p>${esc(r.trackingNumber)}: no tracking yet</p>`
    : `<h2>${esc(r.carrier)} ${esc(r.trackingNumber)}: ${esc(r.statusDescription || r.status)}</h2>
<ul>${r.events.map((e) => `<li>${esc(e.localTime)} · ${esc(e.description)} · ${esc(e.location)}</li>`).join("")}</ul>`).join(""));
});

app.listen(3000);

Trigger:  Fulfillment created
Action:   Send HTTP request
  Method:  POST
  URL:     https://api.lastscanned.com/v1/watches
  Headers: Authorization: Bearer {{secrets.lastscanned_key}}
           Content-Type: application/json
  Body:
{
  "trackingNumbers": [{% for tracking_info in fulfillment.trackingInfo %}"{{ tracking_info.number }}"{% unless forloop.last %},{% endunless %}{% endfor %}],
  "metadata": { "orderId": "{{ fulfillment.order.id }}", "orderName": "{{ fulfillment.order.name }}" }
}

# The same call Flow makes, from a terminal (one watch per number; re-checks are free)
curl -X POST https://api.lastscanned.com/v1/watches \
  -H "Authorization: Bearer $LASTSCANNED_KEY" \
  -H "Content-Type: application/json" \
  -d '{"trackingNumbers":["1Z000Y770414233027","873970594430"],
       "metadata":{"orderId":"gid://shopify/Order/1234567890","orderName":"#1001"}}'

# Point your lastscanned webhooks at your server (returns a whsec_ signing secret)
curl -X PUT https://api.lastscanned.com/v1/webhook \
  -H "Authorization: Bearer $LASTSCANNED_KEY" \
  -H "Content-Type: application/json" \
  -d '{"url":"https://track.example.com/lastscanned"}'

// Not on a plan with Flow's Send HTTP request? Subscribe your custom app to fulfillments/create
// (in shopify.app.toml: [[webhooks.subscriptions]] topics = ["fulfillments/create"], uri = "/shopify/fulfillments")
app.post("/shopify/fulfillments", express.raw({ type: "application/json" }), async (req, res) => {
  const hmac = crypto.createHmac("sha256", SHOPIFY_API_SECRET).update(req.body).digest("base64");
  const given = req.get("X-Shopify-Hmac-Sha256") ?? "";
  if (hmac.length !== given.length || !crypto.timingSafeEqual(Buffer.from(hmac), Buffer.from(given))) return res.sendStatus(401);
  res.sendStatus(200);

  const f = JSON.parse(req.body.toString("utf8"));
  if (!f.tracking_numbers?.length) return;
  await fetch("https://api.lastscanned.com/v1/watches", {
    method: "POST",
    headers: { Authorization: `Bearer ${LASTSCANNED_KEY}`, "Content-Type": "application/json" },
    body: JSON.stringify({
      trackingNumbers: f.tracking_numbers,
      metadata: { orderId: `gid://shopify/Order/${f.order_id}`, orderName: f.name },
    }),
  });
});

// lastscanned webhooks: verify Lastscanned-Signature (t=<unix>,v1=<hex HMAC-SHA256 of "t.body">)
app.post("/lastscanned", express.raw({ type: "application/json" }), async (req, res) => {
  const raw = req.body.toString("utf8");
  const parts = Object.fromEntries((req.get("Lastscanned-Signature") ?? "").split(",").map((p) => p.split("=")));
  const expected = crypto.createHmac("sha256", process.env.LASTSCANNED_WEBHOOK_SECRET).update(`${parts.t}.${raw}`).digest("hex");
  const fresh = Math.abs(Date.now() / 1000 - Number(parts.t)) < 300;
  if (!fresh || parts.v1?.length !== expected.length ||
      !crypto.timingSafeEqual(Buffer.from(parts.v1), Buffer.from(expected))) return res.sendStatus(400);
  res.sendStatus(200); // any 2xx within 10 seconds; failed deliveries are retried

  const event = JSON.parse(raw); // dedupe on event.id (also sent as Lastscanned-Event-Id)
  const { watch, result, reason } = event.data;
  if (event.type === "tracking.updated" && result.status === "exception") {
    await tagOrder(watch.metadata.orderId, ["tracking-exception"]);
  }
  if (event.type === "watch.ended" && reason === "not_found") {
    await tagOrder(watch.metadata.orderId, ["no-scan-14d"]); // the carrier never had a record
  }
});

async function tagOrder(orderId, tags) {
  await fetch(`https://${process.env.SHOP}/admin/api/2026-10/graphql.json`, {
    method: "POST",
    headers: { "Content-Type": "application/json", "X-Shopify-Access-Token": SHOPIFY_ADMIN_TOKEN },
    body: JSON.stringify({
      query: `mutation ($id: ID!, $tags: [String!]!) { tagsAdd(id: $id, tags: $tags) { userErrors { message } } }`,
      variables: { id: orderId, tags },
    }),
  });
}

// stale.js — run hourly (cron, a scheduled function, anything). Webhooks fire on change,
// so silence is something you check for: read every active watch and its latest result.
const DAYS = 5;

let cursor = "";
do {
  const res = await fetch(`https://api.lastscanned.com/v1/watches?limit=200${cursor ? `&cursor=${cursor}` : ""}`, {
    headers: { Authorization: `Bearer ${process.env.LASTSCANNED_KEY}` },
  });
  const page = await res.json();
  for (const w of page.watches) {
    const last = w.result?.events?.[0]?.timestamp ?? w.createdAt; // events are newest first, UTC
    const days = (Date.now() - Date.parse(last)) / 86_400_000;
    if (days >= DAYS && w.metadata?.orderId) {
      await tagOrder(w.metadata.orderId, [`no-scan-${DAYS}d`]); // tagsAdd ignores tags already on the order
    }
  }
  cursor = page.nextCursor;
} while (cursor);

Trigger:  Scheduled time (every hour)
Action:   Get order data
  Query:  tag:"no-scan-5d" AND NOT tag:"no-scan-5d-sent"
For each order:
  Action: Send internal email
    To:      ops@your-store.com
    Subject: No carrier scan in 5 days: {{ getOrderDataForeachitem.name }}
  Action: Add order tags   → no-scan-5d-sent