Shopify App im Admin: App Home, App Bridge und Polaris Schritt für Schritt

Eine Shopify-App sollte sich für Händler wie ein sinnvoller Teil ihres Admins anfühlen und nicht wie eine fremde Website in einem Fenster. Das beginnt mit der Produktentscheidung: Welche Aufgaben erledigt ein Händler regelmäßig, und welche davon kann er direkt in Shopify ausführen?

Shopify beschreibt die App-Oberfläche im Admin als App Home. Für die meisten Apps empfiehlt die aktuelle Dokumentation das gehostete iframe-Modell. Dabei entwickelst und hostest du eine normale Webanwendung; der Shopify-Admin bettet sie ein. Eine zweite Möglichkeit sind App-Home-UI-Extensions, die auf Preact basieren und für individuelle Distribution ohne eigenes Backend gedacht sind. Vergleiche die Optionen in der offiziellen App-Home-Dokumentation, bevor du dich festlegst.

Schritt 1: Hauptabläufe in Shopify verorten

Liste zunächst die häufigsten täglichen Aufgaben deiner App auf. Dazu können Einrichtung, Konfiguration, Datenübersicht, Statuskontrolle und Änderungen gehören. Plane den Kern dieser Abläufe innerhalb des Admins. Shopify weist in den Integrationsrichtlinien darauf hin, dass Händler für zentrale Funktionen nicht regelmäßig auf eine externe Website wechseln sollen.

Ein externes Dashboard kann für umfangreiche Spezialberichte weiterhin sinnvoll sein. In diesem Fall sollte der Händler aber wichtige Statusinformationen und die für die tägliche Arbeit nötigen Einstellungen auch in Shopify finden. Die Ausnahme für komplexe Funktionen ist kein Freibrief, sämtliche App-Funktionen außerhalb des Admins zu verstecken.

Schritt 2: Passendes App-Home-Modell auswählen

Nutze das iframe-Modell, wenn deine App beispielsweise:

• einen Server, Hintergrundjobs oder Webhooks braucht,
• mehrere Seiten und komplexere Arbeitsabläufe enthält,
• eine normale Web-Plattform und dein eigenes Hosting benötigt.

Prüfe eine App-Home-UI-Extension, wenn die Anwendung klein ist, keinen eigenen Server benötigt und ausschließlich individuell verteilt werden soll. Shopify nennt für diese Variante einen begrenzten Preact-Laufzeitkontext. Das sind unterschiedliche technische Wege – du solltest nicht erst nach dem Aufbau der Oberfläche entscheiden, welches Modell zu deinem Backend passt.

Für eine typische öffentliche App ist der CLI-generierte React-Router-Einstieg ein geeigneter Ausgangspunkt. Er hilft, die Admin-Einbettung und Authentifizierung korrekt zu verbinden.

Schritt 3: App Bridge aktuell und durchgängig einbinden

Verwende für eingebettete Apps die aktuelle App-Bridge-Version und die von deinem offiziellen Shopify-Template erzeugte Konfiguration. App Bridge verbindet die App mit der Umgebung des Shopify-Admins und unterstützt unter anderem Navigation und die sichere Kommunikation mit der Admin-Oberfläche.

Arbeite nicht mit alten Beispielen weiter, die noch eine manuell aufgebaute Session-Token- oder OAuth-Integration voraussetzen, ohne sie mit der aktuellen App-Bridge-Dokumentation abzugleichen. Shopify entwickelt die Authentifizierungsabläufe weiter; das offizielle App-Bridge- und App-Home-Material beschreibt den aktuellen Einstieg.

Schritt 4: Vertraute Oberfläche mit Polaris-Webkomponenten gestalten

Shopifys App Home stellt Polaris-Webkomponenten für die Oberfläche innerhalb deiner App bereit. Nutze sie als Ausgangspunkt für Formulare, Statusanzeigen, Navigation und leere Zustände. Das schafft ein vertrautes Verhalten und hilft dabei, wiederkehrende UI-Muster konsistent umzusetzen.

Arbeite in kleinen Schritten:

1. Lege eine Seite für die wichtigste Händleraufgabe an.
2. Teile sie in verständliche Abschnitte, etwa Status, Einstellungen und Ergebnis.
3. Verwende passende Polaris-Komponenten statt die Admin-Oberfläche mit eigenen, abweichenden Controls nachzuahmen.
4. Zeige direkt am Feld, welche Eingabe erwartet wird und wie Fehler behoben werden.
5. Teste die Seite im echten Shopify-Admin und auf schmalen Bildschirmen.

Die App-Home-Dokumentation enthält Komponenten, Layoutmuster und Beispiele. Übernimm konkrete Elementnamen aus der aktuellen Referenz, denn Webkomponenten und ältere Polaris-React-Komponenten sind nicht automatisch austauschbar.

Schritt 5: Navigation und Rückmeldungen prüfen

Prüfe, ob ein Händler jederzeit erkennt, in welchem App-Bereich er sich befindet. Nutze App-Bridge-Funktionen für Elemente der Admin-Chrome, wo sie zum Ablauf passen, und halte Navigation innerhalb der App nachvollziehbar. Nach dem Speichern einer Einstellung sollte eine eindeutige Bestätigung folgen; bei einem Fehler braucht der Händler eine verständliche Erklärung und einen nächsten Schritt.

Vermeide unnötige zusätzliche Konten oder Anmeldemasken. Laut Shopify sollen Händler eine App grundsätzlich mit ihren Shopify-Zugangsdaten starten können. Zusätzliche Zugangsdaten können bei bestimmten Geschäftssystemen oder Vertragsmodellen erforderlich sein, sollten dann aber den wirklichen Grund haben und im Admin-Ablauf verständlich erklärt werden.

Schritt 6: Mobile Nutzung und Barrierefreiheit testen

Öffne die App nicht nur im Desktop-Admin. Prüfe, ob Formulare, Tabellen, Dialoge und Navigationsschritte auch bei begrenzter Breite bedienbar bleiben. Kontrolliere Tastaturbedienung, sichtbare Fokuszustände, gut erkennbare Labels und ausreichende Kontraste. Polaris-Komponenten nehmen dir diese Prüfung nicht vollständig ab: Entscheidend ist das Verhalten des gesamten App-Ablaufs.

Prüfliste für die Admin-Integration

• Zentrale Aufgaben sind im Shopify-Admin erreichbar.
• Die Einbettung funktioniert nach Installation und erneuter Installation.
• App Bridge ist aktuell und mit dem Template abgestimmt.
• Oberfläche und Statusmeldungen folgen vertrauten Admin-Mustern.
• Händler müssen sich nicht ohne sachlichen Grund separat registrieren.
• Mobilansicht, Tastaturbedienung und Fehlermeldungen sind getestet.

Eine gute Shopify-App-Oberfläche ist nicht einfach eine Website in einem iframe. Sie fügt sich in den Alltag im Admin ein und führt Händler Schritt für Schritt zu ihrer Aufgabe.

Offizielle Shopify-Quellen

• Apps in App Home
• Polaris-Webkomponenten für App Home
• App Bridge Web Components
• App Home APIs und Muster
• Integration in den Shopify-Admin
• Built for Shopify Anforderungen

App Home, App Bridge und Polaris entwickeln sich weiter; prüfe vor der Umsetzung die aktuellen Komponenten- und Integrationshinweise.