Mit welchem Stack baut man eine Shopify-App?

Shopify stellt ein offizielles App-Template mit React Router (früher Remix) und der Shopify CLI bereit. Grundsätzlich funktioniert aber jeder Stack, der OAuth, Session Tokens und Webhooks sauber umsetzt.

Brauche ich eine eigene Datenbank?

Nicht immer. Konfiguration und kleine Datenmengen passen oft in Metafelder oder Metaobjekte des Shops. Sobald du eigene Logs, Warteschlangen oder größere Datenmengen hast, ist eine eigene Datenbank die bessere Wahl.

Was unterscheidet Custom App und öffentliche App technisch?

Der Code ist ähnlich. Öffentliche Apps brauchen zusätzlich das App-Store-Review, die verpflichtenden Datenschutz-Webhooks, Abrechnung über die Billing API und müssen mit beliebig vielen Shops umgehen können.

Anatomie einer Shopify-App

Im Artikel für Entscheider geht es um die Frage, ob sich eine eigene App lohnt. Hier geht es darum, was dann tatsächlich gebaut wird. Die Beispiele orientieren sich an unseren eigenen Apps Nutrition Tables und Price Changes und an Kundenprojekten wie der Rabatt-Suite für Women’s Best.

Die Bausteine im Überblick

Eine Shopify-App besteht aus zwei Teilen, die an unterschiedlichen Orten laufen:

Die App selbst ist eine normale Webanwendung auf deinem eigenen Server. Sie hat eine Oberfläche im Shopify-Admin, spricht mit der Admin API und empfängt Webhooks.
Die Extensions laufen in der Infrastruktur von Shopify: Blöcke im Theme, Erweiterungen im Checkout und Functions, die zum Beispiel Rabatte berechnen. Sie werden mit der App ausgeliefert, aber von Shopify ausgeführt.

Diese Trennung ist der wichtigste Punkt beim Entwurf. Alles, was im kritischen Pfad des Kunden liegt, also Storefront und Checkout, gehört in Extensions. Dein Server sollte dort nie eine Abhängigkeit sein.

Authentifizierung: OAuth und Session Tokens

Bei der Installation durchläuft der Shop einen OAuth-Ablauf. Die App fordert dabei Scopes an, etwa read_products oder write_discounts, und erhält einen Access Token für die Admin API. Fordere nur die Scopes an, die du wirklich brauchst. Händler sehen die Liste vor der Installation.

Die Oberfläche der App läuft eingebettet im Shopify-Admin. App Bridge stellt dort einen Session Token aus, ein kurzlebiges JWT, mit dem dein Frontend sich gegenüber deinem Backend ausweist. Cookies spielen dabei keine Rolle mehr.

Daten lesen und schreiben: die Admin GraphQL API

Die Admin API ist die zentrale Schnittstelle. Neue Funktionen erscheinen dort nur noch in GraphQL. Ein typisches Beispiel, ähnlich wie bei Nutrition Tables: Die App liest Nährwerte, die als Metafeld am Produkt hängen. Namespace und Key sind hier frei gewählt.

query ProductNutrition($id: ID!) {
  product(id: $id) {
    title
    metafield(namespace: "nutrition", key: "table") {
      type
      value
    }
  }
}

Die API ist nicht nach Anzahl der Anfragen limitiert, sondern nach berechneten Kosten pro Abfrage. Jede Antwort enthält im Feld extensions.cost die verbrauchten und verfügbaren Punkte. Für große Datenmengen, etwa beim Import tausender Produkte, gibt es Bulk Operations, die asynchron laufen und das Ergebnis als Datei liefern.

Auf Änderungen reagieren: Webhooks

Statt regelmäßig nachzufragen, abonniert die App Ereignisse wie orders/create oder products/update. Shopify schickt dann einen POST an deinen Endpunkt. Drei Regeln haben sich bei uns bewährt:

Signatur prüfen. Jeder Webhook trägt im Header X-Shopify-Hmac-Sha256 eine Signatur über den unveränderten Request-Body.
Schnell antworten. Nimm den Webhook an, lege ihn in eine Warteschlange und verarbeite ihn danach. Lange Laufzeiten führen zu Wiederholungen.
Idempotent verarbeiten. Webhooks können doppelt ankommen. Merke dir die X-Shopify-Webhook-Id und ignoriere Duplikate.

So sieht die Signaturprüfung in Node.js aus:

import crypto from "node:crypto";

export function isValidWebhook(rawBody: string, hmacHeader: string, secret: string): boolean {
  const digest = crypto.createHmac("sha256", secret).update(rawBody, "utf8").digest("base64");
  const a = Buffer.from(digest);
  const b = Buffer.from(hmacHeader ?? "");
  return a.length === b.length && crypto.timingSafeEqual(a, b);
}

Wichtig ist der rohe Body. Wenn ein Framework das JSON vorher parst und neu serialisiert, stimmt die Signatur nicht mehr.

Im Shop sichtbar werden: Extensions

Für die Darstellung im Shop gibt es keine Code-Schnipsel mehr, die man ins Theme kopiert. Stattdessen:

Theme App Extensions liefern App-Blöcke, die der Händler im Theme-Editor platziert, und App-Embeds für Skripte, die auf jeder Seite laufen. Beim Deinstallieren verschwinden sie sauber. Eine Nährwerttabelle wäre so ein typischer Block für die Produktseite.
Checkout UI Extensions erweitern den Checkout an festgelegten Stellen, zum Beispiel für Hinweise oder Cross-Selling.

Logik im Checkout: Shopify Functions

Functions ersetzen die früheren Shopify Scripts. Es sind kleine Programme, in JavaScript oder Rust geschrieben und zu WebAssembly kompiliert, die Shopify bei Rabatten, Versandarten, Zahlungsarten oder der Warenkorb-Validierung aufruft. Sie bekommen genau die Daten, die du per GraphQL-Eingabeabfrage anforderst, und müssen in wenigen Millisekunden antworten. Netzwerkzugriffe sind darin nicht vorgesehen.

Bei Women’s Best steckt die gesamte Rabattlogik der 15 Kampagnentypen in Functions. Das Dashboard und die Node.js-API speichern nur die Konfiguration, ausgewertet wird sie im Checkout von Shopify selbst. Dadurch bleibt der Checkout schnell, auch wenn unser Server einmal nicht erreichbar wäre.

Wo die Daten liegen

Für Konfiguration und produktbezogene Daten sind Metafelder und Metaobjekte erste Wahl. Sie liegen im Shop, sind im Theme und in Functions direkt lesbar und überleben jeden Serverumzug. Eine eigene Datenbank brauchst du für alles, was nicht zum Shop gehört: Logs, Warteschlangen, Verknüpfungen zu externen Systemen oder große Datenmengen.

Custom App oder öffentliche App: der technische Unterschied

	Custom App	Öffentliche App
Installation	in einem Shop oder einer Organisation	in beliebig vielen Shops
Review durch Shopify	nein	ja, vor jedem Listing
Datenschutz-Webhooks	empfohlen	verpflichtend (`customers/data_request`, `customers/redact`, `shop/redact`)
Abrechnung	über deinen Vertrag	über die Billing API
Mandantenfähigkeit	nicht nötig	Pflicht

Gerade die Mandantenfähigkeit wird oft unterschätzt. Eine öffentliche App muss Daten, Rate Limits und Fehler sauber pro Shop trennen. Das macht oft einen größeren Teil des Aufwands aus als die eigentliche Funktion.

Unser Fazit

Die meisten Probleme in Shopify-Apps entstehen nicht in der Funktion selbst, sondern an den Rändern: ungeprüfte Webhooks, zu breite Scopes, Logik auf dem eigenen Server, die eigentlich in eine Function gehört. Wer diese Grenzen von Anfang an richtig zieht, hat eine App, die mit dem Shop mitwächst.