Neue Funktionen, Designanpassungen oder technische Updates gehören zur Weiterentwicklung eines Onlineshops. Werden Änderungen jedoch direkt auf der Live-Website vorgenommen, können Fehler entstehen, die das Einkaufserlebnis beeinträchtigen. Im schlimmsten Fall funktionieren wichtige Prozesse wie der Warenkorb oder die Kaufabwicklung nicht mehr.
Eine Staging Umgebung schafft einen geschützten Bereich, in dem du Anpassungen vor der Veröffentlichung überprüfen kannst. Wir erklären dir, wie Staging funktioniert, warum eine Staging Umgebung sinnvoll ist und wie du eine Staging Site mit Shopify erstellen kannst.
Was ist eine Staging Umgebung?
Eine Staging Umgebung ist eine vom Live-System getrennte Testumgebung, in der du Änderungen an einer Website, einem Onlineshop oder einer Anwendung vor der Veröffentlichung überprüfen kannst. Sie bildet die tatsächliche Produktionsumgebung möglichst realitätsnah nach. So lassen sich neue Funktionen, Updates und Designänderungen testen, ohne den laufenden Betrieb zu beeinträchtigen.
Entwicklungsumgebung vs. Staging Umgebung vs. Produktionsumgebung
Die Webentwicklung findet in drei wesentlichen Umgebungen statt: Development, Staging und Live. Zunächst wird der Code in einer Entwicklungsumgebung geschrieben. Anschließend wird er zur Qualitätssicherung auf eine Staging Umgebung übertragen. Abschließend wird die Live-Website aktualisiert, sodass die Änderungen für alle Nutzer:innen sichtbar sind.
Entwicklungsumgebung (Development)
Eine Development Site ist eine Testumgebung, in der Entwickler:innen Code schreiben und ihre Ideen umsetzen. In der Regel handelt es sich um eine lokale Umgebung, auf die nur das Entwicklungsteam zugreifen kann. In dieser Phase werden Bilder, Texte, Videos und Code für individuelle Funktionen wie interaktive Produktfilter hinzugefügt. Zwar finden hier bereits erste Tests statt, die Entwicklungsumgebung ist jedoch meist noch nicht vollständig ausgearbeitet.
Staging Umgebung
Nach Abschluss der Entwicklung wird der Code auf einer neuen Staging Site veröffentlicht. Sie dient als Generalprobe, bei der alle Probleme behoben werden, bevor die Website für die Öffentlichkeit zugänglich ist.
Staging Sites sind online erreichbar und befinden sich üblicherweise auf einer eigenen Staging-Domain mit einer URL wie staging.deinewebsite.de. Bei Shopify handelt es sich dabei um dein dupliziertes Theme oder deinen Development Store.
Stelle sicher, dass deine Staging Site nicht indexierbar ist. Das bedeutet, dass du Suchmaschinen daran hindern solltest, sie in ihren Suchergebnissen anzuzeigen. Dafür kannst du mit wenigen zusätzlichen Codezeilen entsprechende Maßnahmen ergreifen. Außerdem solltest du deine Staging Site gegebenenfalls mit einem Passwort schützen, wenn sie Informationen enthält, die deine Kund:innen noch nicht sehen sollen. Dazu gehören beispielsweise bevorstehende Rabattaktionen oder vertrauliche Kennzahlen aus einer internen Datenbank.
Sobald die Staging Site online ist, können die beteiligten Personen sie überprüfen und Feedback geben. Anschließend wird der Code zurück in die Entwicklungsumgebung übertragen, wo Entwickler:innen die erforderlichen Anpassungen vornehmen. Danach werden die Änderungen erneut auf der Staging Site veröffentlicht. Dieser Prozess wiederholt sich, bis alle Beteiligten ihre Zustimmung geben.
Produktionsumgebung
Eine Live-Website ist die endgültige, öffentlich zugängliche Version einer Website. Sie wird auch als Produktionsumgebung, Produktionswebsite oder kurz als Prod bezeichnet.
In dieser Phase wird die Website für die Öffentlichkeit freigegeben und Aktualisierungen werden für alle Nutzer:innen sichtbar. Sie können Einkäufe tätigen, mit deinen Inhalten interagieren und sich mit deiner Marke beschäftigen. Sobald eine Änderung live ist, können alle darauf zugreifen. Deshalb ist eine gründliche Qualitätssicherung in der Staging-Phase besonders wichtig.
Warum solltest du eine Staging Umgebung nutzen?
Aktualisierungen an deiner Website können unbeabsichtigt die Nutzererfahrung beeinträchtigen. Deshalb sind Tests in einer Staging-Umgebung ein wichtiger Bestandteil der Webentwicklung und Website-Pflege.
Eine Staging Site hilft dir dabei, verschiedene Bereiche deines Onlineshops zu überprüfen:
- Software-Updates: Neue Versionen von Anwendungen, Plugins oder anderen Software-Komponenten lassen sich vor der Veröffentlichung auf Kompatibilität überprüfen.
- Designänderungen: Neue Layouts, Navigationselemente und Produktdarstellungen können getestet werden, bevor Kund:innen sie sehen.
- Neue Funktionen: Zusätzliche Filter, Suchfunktionen oder andere Erweiterungen lassen sich hinsichtlich ihrer Funktionalität prüfen.
- Schnittstellen: Verbindungen zu Warenwirtschaftssystemen, Zahlungsanbietern oder anderen externen Diensten können getestet werden.
- Website-Relaunches: Umfangreiche technische und gestalterische Veränderungen können unabhängig vom bestehenden Onlineshop vorbereitet werden.
- Fehlerbehebung: Technische Probleme lassen sich in einer kontrollierten Umgebung nachstellen und untersuchen.
Shopify Staging Umgebung erstellen: 3 Möglichkeiten
Shopify-Stores verfügen standardmäßig nicht über eine integrierte Staging-Umgebung. Es gibt jedoch einige alternative Möglichkeiten, darunter das Duplizieren eines Themes, das Erstellen eines Development Stores oder die Nutzung einer Staging-App eines Drittanbieters. Shopify hat außerdem seine integrierten Testfunktionen um Rollouts erweitert. Damit können Shop-Betreiber:innen Theme-Änderungen planen und A/B-Tests mit Themes durchführen.
1. Dein Theme duplizieren
Die einfachste Möglichkeit, mit einem regulären Shopify-Konto eine Staging-Umgebung zu erstellen, besteht darin, dein Theme zu duplizieren. Dein Theme enthält die visuellen und strukturellen Elemente deines Stores, nicht jedoch Backend-Einstellungen wie Apps, Checkout oder Inventar.
Die Einrichtung ist unkompliziert und mit wenigen Klicks erledigt. Außerdem musst du keine Apps von Drittanbietern installieren, da die Staging-Umgebung direkt in den Shopify-Adminbereich integriert ist.
Diese Methode eignet sich besonders für Designänderungen wie Layoutanpassungen, überarbeitete Texte oder saisonale Neugestaltungen. Als Testumgebung für Integrationen oder funktionale Änderungen, beispielsweise an den Checkout-Einstellungen, ist sie hingegen nicht geeignet.
So erstellst du eine Shopify Staging Site, indem du dein Theme duplizierst:
- Öffne in deinem Shopify-Adminbereich den Menüpunkt Onlineshop > Themes.
- Wähle unter Aktuelles Theme > Aktionen die Option Duplizieren aus.
- Du hast nun eine identische Kopie deines Live-Themes. Diese kannst du beliebig bearbeiten, ohne die Live-Website zu beeinflussen. Über die Option Vorschau kannst du eine Testansicht erstellen.
- Sobald du deine Tests abgeschlossen hast, kannst du die erforderlichen Änderungen an deiner Live-Website vornehmen.
Beachte, dass du die Elemente, die du bereits in deiner Testversion hinzugefügt hast, manuell auf deine Live-Website übertragen musst.
2. Einen Development Store erstellen
Wenn du funktionale Änderungen testen möchtest, darunter individuellen Code oder Integrationen von Drittanbietern, ist ein Development Store über ein Shopify-Partnerkonto die beste Wahl. Mit einem Partnerkonto kannst du einen vollständigen Store zu Testzwecken erstellen.
Partnerkonten richten sich an Entwickler:innen, Designer:innen und Agenturen, die Stores für ihre Kund:innen erstellen und verwalten. Sie sind kostenlos und ermöglichen den Zugriff auf einen Development Store. Dort kannst du sowohl das Design als auch die Funktionen deiner eigentlichen Website in einer privaten Umgebung nachbilden.
So erstellst du eine Staging Umgebung mithilfe eines Development Stores:
- Registriere dich für ein Shopify-Partnerkonto.
- Öffne den Bereich Stores > Store erstellen.
- Wähle Development als Store-Typ aus.
- Vergib einen Namen wie „staging-deinewebsite“, damit du den Test-Store leicht von deinem Live-Store unterscheiden kannst.
- Füge Produkte hinzu, installiere dein Theme und konfiguriere alle Einstellungen so, dass dein Development Store deinem Live-Store möglichst genau entspricht. Du kannst deine Store-Daten mithilfe von CSV-Dateien sichern, um Produkte, Kundendaten und Bestellungen gesammelt zu übertragen. Dein Theme kannst du außerdem über den Shopify-Adminbereich herunterladen und sichern.
Jetzt kannst du die gesamte Nutzererfahrung simulieren, ohne deine eigentliche Website zu gefährden.
Obwohl Shopify Development Stores für Testzwecke kostenlos sind, unterliegen sie einigen Einschränkungen. Beispielsweise kannst du nur kostenlose und für Partner geeignete Apps installieren und ausschließlich Test-Versandetiketten erstellen.
Wenn du zusätzliche Apps testen oder funktionsfähige Versandetiketten erstellen möchtest, kannst du einen neuen kostenpflichtigen Store mit dem Basic-Plan einrichten. Genau wie beim Duplizieren deines Themes musst du die Elemente deiner Website manuell auf die Staging Site übertragen.
In diesem Video (auf Englisch) zeigen wir wir, die du einen Development Store bei Shopify erstellen kannst:
3. Eine App verwenden
Beim manuellen Duplizieren deiner Website kann es vorkommen, dass einzelne Elemente nicht übernommen werden. Mit einer Staging-App kannst du sicherstellen, dass eine möglichst genaue Kopie entsteht. Das ist besonders hilfreich, wenn du ein komplexes Theme verwendest.
Einige Staging-Tools wie Duplify, das einen eingeschränkten kostenlosen Plan anbietet, ermöglichen es dir, eine Staging-Umgebung zu erstellen, die deine gesamte Website nachbildet. Anschließend kannst du bestehende Seiten und Produkte testen, bevor du Änderungen live schaltest.
Rewind Staging ist eine vergleichbare App mit einer kostenlosen Testphase. Sie bietet zusätzlich Theme-Backups, mit denen du bei Problemen zu einer vorherigen Version zurückkehren kannst. Im Shopify App Store findest du verschiedene Staging-Apps.
So erstellst du eine Staging Site mit Rewind Staging:
- Installiere Rewind Staging aus dem Shopify App Store in deinem Live-Store.
- Wähle deinen Live-Store als Source Store (Quell-Store) aus.
- Installiere Rewind Staging in deinem Development Store.
- Wähle deinen Development Store als Destination Store (Ziel-Store) aus.
- Kopiere den Schlüssel aus deinem Source Store in deinen Destination Store, um die beiden Stores miteinander zu verbinden.
- Wähle aus, welche Informationen auf die Staging Site übertragen werden sollen, damit sie deinen Live-Store möglichst genau widerspiegelt.
- Aktiviere die Option Continuously for copy changes, um Änderungen fortlaufend zwischen beiden Stores zu synchronisieren.
- Klicke auf Begin task, um den Kopiervorgang zu starten.
Häufige Staging Fehler
Damit Tests aussagekräftig bleiben, sollten sowohl technische als auch organisatorische Fehler vermieden werden.
1. Veraltete Testdaten verwenden
Wenn sich die Staging Umgebung stark vom aktuellen Live-System unterscheidet, können Probleme während der Testphase unentdeckt bleiben.
Deshalb sollten relevante Einstellungen und Daten regelmäßig aktualisiert werden. Bei Onlineshops betrifft das beispielsweise Produktinformationen, installierte Erweiterungen und technische Konfigurationen.
2. Sensible Kundendaten ungeschützt übernehmen
Werden Datenbanken kopiert, können personenbezogene Informationen in die Testumgebung gelangen. Das kann Datenschutz- und Sicherheitsrisiken verursachen.
Für Tests sollten daher möglichst synthetische oder anonymisierte Daten verwendet werden. Zusätzlich ist sicherzustellen, dass ausschließlich berechtigte Personen Zugriff erhalten.
3. Suchmaschinenzugriff nicht verhindern
Wenn eine Staging-Website öffentlich erreichbar ist, können Suchmaschinen möglicherweise deren Inhalte indexieren. Dadurch können unerwünschte Suchergebnisse mit doppelten Inhalten entstehen.
Eine Staging Umgebung sollte deshalb durch geeignete Zugriffsbeschränkungen geschützt werden. Ergänzend kann eine Noindex-Anweisung eingesetzt werden. Diese allein stellt jedoch keinen ausreichenden Zugriffsschutz dar.
4. Externe Schnittstellen nicht berücksichtigen
Eine Testumgebung kann unter Umständen mit denselben externen Diensten kommunizieren wie das Live-System. Dadurch könnten unbeabsichtigt echte Bestellungen, E-Mails oder andere Vorgänge ausgelöst werden.
Besonders bei Zahlungsdiensten und Bestellsystemen ist deshalb auf geeignete Testmodi sowie getrennte Zugangsdaten und Schnittstellen zu achten.
5. Änderungen ungeprüft veröffentlichen
Erfolgreiche Tests bedeuten nicht automatisch, dass eine Änderung auch nach der Veröffentlichung fehlerfrei funktioniert.
Insbesondere bei Onlineshops können sich neue Bestellungen, veränderte Lagerbestände oder andere zwischenzeitliche Änderungen auf den Prozess auswirken. Ein vollständiges Überschreiben der Live-Datenbank kann deshalb problematisch sein.
Nach der Veröffentlichung sollten zentrale Funktionen erneut überprüft werden. Außerdem ist ein Wiederherstellungsplan sinnvoll, falls unerwartete Fehler auftreten.
Fazit
Eine Staging Umgebung ermöglicht es, Änderungen an Websites und Onlineshops unter kontrollierten Bedingungen zu testen, bevor sie veröffentlicht werden. Dadurch können technische Probleme frühzeitig erkannt und Risiken für den laufenden Betrieb reduziert werden.
Welche Staging Variante geeignet ist, hängt von den technischen Anforderungen und der jeweiligen Shop-Infrastruktur ab. Während für kleinere Anpassungen teilweise einfache Vorschaufunktionen genügen, benötigen komplexere Entwicklungen häufig separate Testsysteme.
Besonders im E-Commerce ist ein strukturierter Testprozess sinnvoll, da bereits kleine technische Fehler die Nutzererfahrung und Kaufabwicklung beeinträchtigen können.
