Shopify Headless Architektur: Nahtlose Prozesse mit Custom App für DHL, Stripe & ERP

Immer mehr wachsende E-Commerce-Unternehmen entscheiden sich für eine Shopify Headless Architektur: Das starre Liquid-Theme wird durch ein extrem schnelles, frei gestaltbares Frontend auf Basis von Next.js und React ersetzt, während Shopify im Hintergrund als zuverlässige E-Commerce-Engine für Katalog, Warenwirtschaft und Transaktionen fungiert.

Doch sobald es an die konkrete operative Umsetzung im europäischen und deutschen Markt geht, stoßen viele Händler auf gravierende Hürden: Klassische Shopify App Store Plugins funktionieren im Headless-Betrieb nicht mehr ohne Weiteres.

Insbesondere drei unverzichtbare Säulen bereiten im Standard-Headless-Setup oft Kopfschmerzen: 1. DHL Versand & Packstationen: Die komfortable Auswahl von Packstationen und Postfilialen sowie die automatisierte Generierung von Versandlabels sind im Standard-Storefront oft nicht nativ möglich. 2. Individuelle Stripe Payments & Subscriptions: Maßgeschneiderte Bezahlmethoden wie SEPA-Lastschrift, B2B-Rechnungskauf oder flexible Abonnements stoßen an die Grenzen des Standard-Checkouts. 3. ERP- & WaWi-Echtzeitsynchronisation: Systeme wie Odoo, SAP oder Microsoft Dynamics verlangen einen fehlerfreien Zwei-Wege-Sync von Lagerbeständen, Kundendaten und Auftragsstatus.

Mit der von Aopas entwickelten Custom App Architektur lösen wir diese Limitierungen vollständig auf. In diesem Leitfaden zeigen wir Ihnen, wie die moderne Headless-Architektur aufgebaut ist und wie unsere Middleware für einen unterbrechungsfreien, vollautomatisierten Prozess sorgt.

Warum Standard-Shopify im Headless-Betrieb an Grenzen stößt

Bei einem klassischen Shopify-Shop injizieren Apps ihre Skripte direkt in das Liquid-Theme. In einer entkoppelten Headless-Architektur gibt es dieses Theme jedoch nicht mehr. Ihr Next.js Frontend kommuniziert ausschließlich über die Shopify Storefront API (GraphQL).

Architektur-Vergleich: Theme-Apps vs. Headless Custom App

Standard Shopify (Monolith / Liquid)
  • × App-Store Plugins injizieren unkontrolliert JavaScript
  • × Sinkende Ladezeiten (schlechte Core Web Vitals)
  • × Feste Abhängigkeit vom Standard Shopify Liquid Layout
  • × Manuelle Nachbearbeitung bei DHL-Labels & Packstationen
  • × Starre Zahlungs- und Checkout-Einschränkungen
Aopas Headless Architektur mit Custom App
  • ✓ Blitzschnelles Next.js Frontend mit Sub-Sekunden-Ladezeiten
  • ✓ Zentrale Custom App als sichere Node.js Middleware
  • ✓ Native Integration von DHL Packstationen direkt im Checkout
  • ✓ Volle Flexibilität für Stripe Payments, SEPA & B2B-Konditionen
  • ✓ Echtzeit 2-Wege-Sync zu ERPs wie Odoo, SAP & WaWi

Da die Storefront API primär für die Produktabfrage und das Befüllen des Warenkorbs konzipiert ist, können Drittanbieter-Services wie DHL-Geschäftskundenversand oder tief integrierte ERP-Routinen nicht direkt aus dem Browser aufgerufen werden – aus Sicherheitsgründen dürfen API-Schlüssel niemals im Client liegen.

Die Lösung: Eine Shopify Custom App als dedizierte Middleware, die als intelligenter Datendrehscheibe zwischen Storefront, Shopify Admin API und den Drittsystemen agiert.

Die 4 Säulen unserer Shopify Headless Architektur

Unsere Architektur trennt Präsentation, E-Commerce-Logik und Backend-Integrationen in saubere, hochskalierbare Module auf:

Bausteine der Aopas Headless & Custom App Infrastruktur

1. DHL-Integration: Packstationen & automatisches Fulfillment

Eines der größten Ärgernisse für deutsche E-Commerce-Händler im Headless-Betrieb ist der DHL-Versand. Während Standard-Themes auf unsaubere Script-Injects setzen, integriert unsere Custom App die DHL Post & Paket API nativ in Ihre Benutzeroberfläche:

Nahtlose Packstation- und Filialsuche Im Next.js Checkout-Step können Kunden über eine interaktive Kartensuche oder Postleitzahleneingabe direkt die nächstgelegene DHL Packstation oder Filiale auswählen. Die Custom App validiert die Postnummer und die Anschrift in Echtzeit gegen die DHL-Schnittstelle.

// Beispiel: Webhook-Handler der Custom App für automatisches DHL-Fulfillment
export async function handleOrderPaid(order: ShopifyOrder) {
  // 1. Prüfen ob Packstation-Attribute im Cart vorhanden sind
  const packstation = order.customAttributes.find(a => a.key === 'dhl_packstation_id');
  
  // 2. Erstelle Versandlabel über die DHL Geschäftskunden API
  const dhlShipment = await dhlClient.createShipmentOrder({
    recipient: order.shippingAddress,
    packstationId: packstation?.value,
    weightKg: calculateOrderWeight(order.lineItems),
  });

  // 3. Shopify Fulfillment aktualisieren
  await shopifyAdmin.fulfillments.create({
    orderId: order.id,
    trackingNumber: dhlShipment.trackingCode,
    trackingCompany: 'DHL',
    notifyCustomer: true,
  });
}

2. Stripe Integration: Grenzenlose Bezahlfreiheit im Headless Commerce

Shopify Payments deckt viele Standardfälle ab. Doch anspruchsvolle Marken und B2B-Stores stoßen oft an Grenzen: Sie wollen maßgeschneiderte SEPA-Lastschrift-Verfahren, individuelle Ratenzahlungsmodelle, erweiterte Subscriptions oder reduzierte Transaktionsgebühren durch direkte Stripe-Verträge nutzen.

Unsere Headless-Architektur bindet Stripe Elements oder kundenspezifische Payment-Schnittstellen harmonisch ein: - Maßgeschneiderter Checkout-Flow: Der Bezahlvorgang fügt sich nahtlos in das CI Ihrer Marke ein, ohne den Kunden auf generische Fremdseiten umzuleiten. - B2B-Zahlungsziele & Rechnungsstellung: Automatisierte Bonitätsprüfungen und Rechnungsabwicklungen mit Zahlungszielen (z. B. 30 Tage netto). - Flexible Subscription-Engines: Echte, wiederkehrende Abonnements mit kundenindividuellen Lieferintervallen, die synchron zu Shopify und Ihrem ERP laufen.

3. ERP-Synchronisation: Odoo, SAP & WaWi in Echtzeit

Ein florierender Online-Shop darf keine Insel sein. Wenn Bestände im ERP und im Webshop voneinander abweichen, drohen teure Überverkäufe oder verzögerte Lieferungen.

Unsere Custom App fungiert als bidirektionaler Event-Bus zwischen Shopify und Ihrem ERP (wie z. B. Odoo ERP):

1. Lagerbestands-Sync in Echtzeit: Ändert sich der physische Bestand im Zentrallager (z. B. durch einen B2B-Großauftrag in Odoo), sendet das ERP ein Update an unsere Custom App. Diese aktualisiert den Inventory Level in Shopify in Millisekunden. 2. Kunden- & Stammdatenpflege: Registriert sich ein Neukunde oder ändert seine Rechnungsadresse, wird der Datensatz sofort mit dem ERP synchronisiert (res.partner in Odoo bzw. Debitorendaten in SAP). 3. Finanzbuchhaltung & Rechnungen: Automatische Erstellung von korrekten, GoBD-konformen Ausgangsrechnungen im ERP nach erfolgreichem Kaufabschluss.

Der durchgängige Prozess: Vom Klick bis zum Paket an der Haustür

Wie greifen die Module im Alltag zusammen? Hier ist der durchgängige Datenfluss einer Bestellung in unserer Headless-Architektur:

End-to-End Datenfluss in der Aopas Headless Architektur

1

Kunde konfiguriert Warenkorb im Next.js Frontend und wählt eine DHL Packstation.

2
index.tsx
01020304
import React from 'react'
const App = () => {
return <Layout />
}

Sichere Zahlungsabwicklung via Stripe oder Shopify Checkout mit sofortiger Transaktionsbestätigung.

3
⇄

Aopas Custom App empfängt den Order-Webhook und validiert alle Parameter.

4
✔ build-production
42s
✔ e2e-lighthouse-audit
100/100

Automatischer Bestandsabgleich und Rechnungserstellung im ERP (z. B. Odoo / SAP).

5
live
active users 2,480 +14% this week

DHL Label-Erstellung und automatische Tracking-Code Übermittlung an den Kunden.

Checkliste: Ist Ihre Marke bereit für die Custom App Architektur?

Bevor Sie Ihre E-Commerce-Infrastruktur modernisieren, prüfen Sie die folgenden Punkte:

Kriterien für ein Headless Setup mit Custom App

  • ✓ Ihr aktuelles Shopify Theme stößt bei Ladezeiten oder UX-Design an spürbare Grenzen.
  • ✓ Sie versenden primär mit DHL im DACH-Raum und benötigen Packstationen ohne Drittanbieter-Monatsgebühren.
  • ✓ Sie betreiben ein ERP-System (Odoo, SAP, WaWi) und möchten manuelle Datenübertragung eliminieren.
  • ✓ Sie wollen komplexe Zahlungslogiken oder B2B-Prozesse über Stripe oder kundenspezifische APIs realisieren.
  • ✓ Sie möchten die volle Kontrolle über Ihren Tech-Stack und eine zukunftssichere Omnichannel-Basis aufbauen.

Häufig gestellte Fragen (FAQ)

Was ist der Hauptunterschied zwischen einer Shopify Custom App und einer App Store App? Eine App Store App ist ein vorgefertigtes SaaS-Produkt, das monatliche Gebühren verursacht und seinen Code oft ungefiltert in den Shop lädt. Eine Custom App wird speziell für Ihren Shop und Ihre Infrastruktur entwickelt, gehört zu 100 % Ihnen, läuft auf Ihrer eigenen Cloud-Umgebung und lässt sich exakt an Ihre internen Prozesse anpassen.

Funktioniert die DHL Packstationsauswahl auch auf Smartphones einwandfrei? Ja. Da das Frontend vollständig mit modernen React/Next.js-Komponenten gebaut wird, können wir Geolocation-APIs nutzen, um dem Nutzer auf dem Smartphone mit nur einem Klick die 3 nächstgelegenen Packstationen anzuzeigen.

Kann ich mein bestehendes ERP-System anbinden? Ja. Unsere Custom App unterstützt alle gängigen Schnittstellenprotokolle (REST, GraphQL, XML-RPC, Webhooks). Egal ob Odoo, SAP, Microsoft Dynamics, Plentymarkets, Weclapp oder individuelle Datenbanken – wir binden Ihre Systeme nahtlos an.

Bleibt der Standard Shopify Checkout erhalten? Sie haben die Wahl: Entweder nutzen Sie den bewährten, hochoptimierten Shopify Checkout für maximale Sicherheit und Conversion Rate, oder wir integrieren einen vollständig individuellen Checkout via Stripe Elements für spezielle B2B-Anforderungen.

Bereit für Ihre maßgeschneiderte Shopify Headless Architektur?

Bei Aopas entwickeln wir individuelle Custom Shopify Storefronts und maßgeschneiderte Middleware-Lösungen für ambitionierte E-Commerce-Marken.

Lassen Sie uns gemeinsam prüfen, wie wir Ihre Performance vervielfachen und Ihre Logistik nahtlos automatisieren können.

Kostenloses Erstgespräch mit unseren Headless-Spezialisten buchen