Shopify App entwickeln 2026: Der Praxis-Guide mit Remix

Ich bekomme oft die gleiche Anfrage: "Justin, wir brauchen eine Custom App, wie lange dauert das und was kostet das?" Die ehrliche Antwort: Es kommt auf die App-Art an. Wer das nicht versteht, verbrennt Budget an der falschen Stelle. In diesem Guide zeige ich Ihnen, wie Shopify App-Entwicklung 2026 wirklich funktioniert: mit dem aktuellen Remix-basierten Stack, der GraphQL Admin API 2026-01 und dem neuen Billing-Modell mit 0 % Revenue Share auf die ersten 1 Mio. US-Dollar.

Die Shopify-Plattform hat sich in den letzten zwei Jahren grundlegend gewandelt. Das Remix-Template ist heute der einzige offizielle Startpunkt für neue Apps. Express und andere Frameworks werden von Shopify nicht mehr aktiv gepflegt. Das bedeutet kürzere Entwicklungszeiten, aber auch eine steilere Lernkurve für Teams ohne Remix-Erfahrung.

Welche App-Art passt zu Ihrem Projekt?

Die Entscheidung zwischen Custom App, Unlisted App und Public App ist nicht nur technisch: Sie bestimmt Architektur, Zeitaufwand und Kosten erheblich.

Unlisted Apps sind der Mittelweg, den ich für Agentur-Kunden häufig nutze: Die App läuft auf mehreren Shops (wiederverwendbar, eigene Subdomain, OAuth), wird aber nicht im App Store gelistet. Installation erfolgt über einen direkten Link. Kein Review, aber auch kein organischer Traffic.

Der offizielle Tech-Stack 2026

Remix als Pflicht-Framework

Seit Shopify CLI 3.48 gibt es beim App-Scaffolding keine Template-Auswahl mehr: Remix ist gesetzt. Das Template bringt folgendes out of the box:

• OAuth 2.0 komplett vorkonfiguriert (Session Tokens, kein Cookie-Chaos im iFrame)
• Prisma + SQLite für Session Storage (produktiv: PostgreSQL oder PlanetScale)
• App Bridge 4 für eingebettete UX im Shopify Admin
• Polaris 13 als Design-System
• TypeScript als Standard (JavaScript optional, aber nicht empfohlen)

# Voraussetzung: Node.js 20+ und ein Shopify Partner Account
npm init @shopify/app@latest
 
# Lokale Entwicklung (ngrok-Tunnel wird automatisch eingerichtet)
npm run dev
 
# Deploy auf Shopify-managed Hosting oder eigene Infrastruktur
npm run deploy

GraphQL Admin API 2026-01: Was sich geändert hat

Die Admin API wird quartalsweise versioniert. Die Version 2026-01 ist aktuell stabil und hat zwei wichtige Änderungen mitgebracht, die bestehende Integrationen betreffen:

1. Idempotenz-Keys sind jetzt Pflicht für Inventur- und Rückerstattungs-Mutationen. Das verhindert Doppelbuchungen bei Netzwerkfehlern.
2. ReturnReasonDefinition ersetzt den alten ReturnReason-Typ auf dem Return-Objekt.

mutation inventoryAdjustQuantities($input: InventoryAdjustQuantitiesInput!) {
  inventoryAdjustQuantities(input: $input) {
    userErrors {
      field
      message
    }
    inventoryAdjustmentGroup {
      reason
      changes {
        name
        delta
      }
    }
  }
}

{
  "input": {
    "reason": "correction",
    "name": "available",
    "changes": [
      {
        "inventoryItemId": "gid://shopify/InventoryItem/123",
        "locationId": "gid://shopify/Location/456",
        "delta": 5
      }
    ]
  }
}

Webhooks: Pflicht, keine Option

Webhooks machen Ihre App reaktiv, statt auf Poll-Loops zu setzen. Die GraphQL-basierten Webhook-Subscriptions sind der aktuelle Standard; HTTP-Webhooks via REST sind legacy.

mutation webhookSubscriptionCreate($topic: WebhookSubscriptionTopic!, $webhookSubscription: WebhookSubscriptionInput!) {
  webhookSubscriptionCreate(topic: $topic, webhookSubscription: $webhookSubscription) {
    userErrors {
      field
      message
    }
    webhookSubscription {
      id
      topic
      endpoint {
        __typename
        ... on WebhookHttpEndpoint {
          callbackUrl
        }
      }
    }
  }
}

Die drei GDPR-Webhooks sind für jede App Pflicht, auch für Custom Apps, die nie im App Store landen:

import { authenticate } from "~/shopify.server";
 
export const action = async ({ request }: ActionFunctionArgs) => {
  // authenticate.webhook prüft HMAC und gibt Shop + Payload zurück
  const { shop, payload, topic } = await authenticate.webhook(request);
 
  switch (topic) {
    case "ORDERS_CREATE":
      await handleNewOrder(shop, payload as OrderPayload);
      break;
    case "APP_UNINSTALLED":
      await cleanupShopData(shop);
      break;
  }
 
  return new Response(null, { status: 200 });
};

App-Architektur: Embedded vs. Standalone

Embedded Apps (empfohlen für Admin-Funktionen)

Embedded Apps laufen im iFrame des Shopify Admin. App Bridge übernimmt Navigation, Modals und Toast-Notifications. Session Tokens ersetzen Cookies: Das ist im iFrame-Kontext wichtig, da Third-Party-Cookies in modernen Browsern geblockt werden.

import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { authenticate } from "~/shopify.server";
 
export const loader = async ({ request }: LoaderFunctionArgs) => {
  // authenticate.admin kümmert sich um Session Token und OAuth-Redirect
  const { admin } = await authenticate.admin(request);
 
  const response = await admin.graphql(`
    query getRecentOrders {
      orders(first: 10, sortKey: CREATED_AT, reverse: true) {
        edges {
          node {
            id
            name
            totalPriceSet {
              shopMoney {
                amount
                currencyCode
              }
            }
            displayFinancialStatus
          }
        }
      }
    }
  `);
 
  const data = await response.json();
  return json(data.data.orders.edges);
};

Background Jobs für ERP-Sync

Für langlaufende Operationen (etwa den initialen Produkt-Sync nach App-Installation) brauchen Sie eine Queue. Das Remix-Template bringt keine Queue-Lösung mit; ich nutze BullMQ auf einem separaten Worker-Process oder setze auf Inngest für serverlose Workflows.

import { Worker } from 'bullmq';
import { prisma } from '~/db.server';
 
// Läuft auf separatem Worker-Process, nicht auf dem Remix-Server
const worker = new Worker('erp-sync', async (job) => {
  const { shop, sessionId } = job.data;
 
  // Session aus Datenbank holen (Offline Token)
  const session = await prisma.session.findUnique({
    where: { id: sessionId }
  });
 
  // Alle Produkte vom ERP holen und in Shopify anlegen
  await syncProductsFromERP(session, job);
}, { connection: redisConnection });

Kosten und Zeitaufwand in der Praxis

Laufende Betriebskosten einer Custom App:

• Hosting (Railway/Fly.io): 20 bis 80 €/Monat
• Datenbank (PlanetScale/Supabase): 25 bis 60 €/Monat
• Monitoring (Sentry Free/Pro): 0 bis 30 €/Monat

Wer eine Public App plant: Shopify erhebt seit 2023 0 % Revenue Share auf die ersten 1 Mio. US-Dollar Jahresumsatz, danach 15 % (früher 20 %). Das macht den App Store für kleinere Entwickler deutlich attraktiver.

Die Billing API: So rechnen Sie ab

Seit Mai 2026 ist die Billing API offiziell "Legacy". Shopify App Pricing (App Events API) ist der neue Weg für nutzungsbasierte Abrechnung. Für Subscriptions funktioniert die Billing API jedoch weiterhin und ist für die meisten Apps der richtige Einstieg.

mutation AppSubscriptionCreate($name: String!, $returnUrl: URL!, $lineItems: [AppSubscriptionLineItemInput!]!) {
  appSubscriptionCreate(
    name: $name
    returnUrl: $returnUrl
    lineItems: $lineItems
    test: false
  ) {
    userErrors {
      field
      message
    }
    confirmationUrl
    appSubscription {
      id
      status
    }
  }
}

{
  "name": "Pro Plan",
  "returnUrl": "https://ihre-app.beispiel.com/billing/bestaetigung",
  "lineItems": [
    {
      "plan": {
        "appRecurringPricingDetails": {
          "price": { "amount": 29.00, "currencyCode": "USD" },
          "interval": "EVERY_30_DAYS"
        }
      }
    }
  ]
}

Der App Store Review: Was wirklich zählt

Der Review-Prozess dauert heute im Schnitt 2 bis 5 Wochen beim ersten Einreichen. Häufigste Ablehnungsgründe aus meiner Erfahrung:

1. Technische Grundvoraussetzungen prüfen

   HTTPS überall, korrekter OAuth-Flow, alle drei GDPR-Webhooks implementiert und verifiziert, keine deprecated REST-API-Endpunkte mehr genutzt, API-Version nicht älter als 12 Monate.

2. Performance-Anforderungen erfüllen

   95 % aller Requests müssen in unter 500 ms antworten. Der Lighthouse-Score des Shops darf durch Ihre App um nicht mehr als 10 Punkte sinken. App-Blocks müssen Core Web Vitals-kompatibel sein.

3. UX nach Polaris-Guidelines

   Keine eigene Design-Sprache im Shopify Admin. Polaris-Komponenten sind Pflicht. Onboarding-Flow muss sofort nutzbar sein, ohne manuellen Support-Kontakt. Accessibility nach WCAG 2.1 AA.

4. Demo-Screencast erstellen

   Ein Video (mindestens 2 Minuten) mit englischen Untertiteln, das Installation, Onboarding und alle Core-Features zeigt. Fehlende oder schlechte Qualität ist der häufigste Grund für Verzögerungen.

5. Business-Dokumentation vollständig

   Transparentes Pricing (kein verstecktes Pay-to-Play), funktionierender Support-Kanal, aktuelle Privacy Policy und Terms of Service, die DSGVO-konform sind.

Häufige Fehler und wie Sie sie vermeiden

Rate Limits mit exponential Backoff behandeln: Die Admin API gibt bei Überschreitung 429 Too Many Requests zurück. Das @shopify/shopify-api-Paket hat eingebautes Retry-Handling. Das funktioniert aber nur, wenn Sie den offiziellen Client nutzen und nicht selbst fetch gegen die API schicken.

Webhooks nicht doppelt verarbeiten: Shopify garantiert "at-least-once"-Delivery: Ein Webhook kann mehrfach eintreffen. Implementieren Sie Idempotenz (z. B. über eine processed_webhook_ids-Tabelle), bevor Sie in Produktion gehen.

Fazit: Shopify App-Entwicklung lohnt sich 2026

Der Remix-Stack hat die Einstiegshürde gesenkt: OAuth, Session Management und App Bridge sind fertig vorkonfiguriert, typische Fehlerquellen sind wegabstrahiert. Gleichzeitig ist die Plattform reifer geworden: Die GraphQL Admin API ist mächtig, die Billing API funktioniert zuverlässig, und der 0-%-Revenue-Share für die erste Million ist ein echter Anreiz.

Meine Empfehlung: Starten Sie mit einer Custom App für einen bestehenden Kunden, um den Stack zu lernen. Der Aufwand für OAuth, Session Storage und Webhooks ist überschaubar, und Sie bauen gleichzeitig etwas Produktives. Erst danach sollten Sie sich an Public Apps wagen.

Wenn Sie eine App für Ihre eigene ERP-Integration oder Automatisierung planen, schauen Sie sich auch meinen Artikel zu Shopify ERP-Integration an. Dort zeige ich, welche API-Muster sich für bidirektionalen Daten-Sync bewährt haben.

Häufige Fragen

Weiterführende Artikel

• Shopify ERP-Integration meistern: API-Muster für bidirektionalen Datenaustausch mit SAP, Dynamics und DATEV
• Shopify Checkout anpassen: Checkout Extensions als App-Erweiterung entwickeln
• Online Store 2.0 und App Blocks: Theme App Extensions und App Blocks in Ihre App integrieren