Live-Vorschau

Die Live-Vorschau öffnet ein Vollbild-Overlay mit dem echten Storefront in einem iframe und einer Seitenleiste zum Bearbeiten von Sektionen. Änderungen in der Seitenleiste erscheinen innerhalb von ~300 ms im Vorschau-iframe — ohne Neuladen der Seite.

Live-Vorschau öffnen

Navigieren Sie zu Seiten und öffnen Sie den Section-Editor für eine beliebige Seite.
Klicken Sie in der Werkzeugleiste auf Live-Vorschau (Vollbild-Symbol).
Das Overlay öffnet sich mit der Seitenleiste links und Ihrem Storefront rechts.

Layout-Überblick

Bereich	Inhalt
Seitenleiste (links, 380 px)	Sektionsliste mit Drag & Drop, Detail-Editor mit Einstellungen, Blöcken und CSS
Storefront-iframe (rechts)	Ihre Shop-Seite in Echtzeit
Werkzeugleiste (oben)	Seiten-Typ-Umschalter, Viewport-Wahl, Aktions-Buttons

Viewport-Größe wählen

Prüfen Sie das Layout auf verschiedenen Bildschirmbreiten:

Symbol	Gerät	iframe-Breite
Monitor	Desktop	100 %
Tablet	Tablet	768 px
Smartphone	Mobil	375 px

Klicken Sie auf das gewünschte Symbol in der rechten Seite der Werkzeugleiste, um die Breite zu wechseln.

Sektion im iframe auswählen (Click-to-Select)

Bewegen Sie den Mauszeiger über eine Sektion im Storefront-iframe — eine blaue gestrichelte Umrandung und ein Typ-Badge erscheinen.
Klicken Sie die Sektion an — die Seitenleiste wechselt sofort in den Detail-Editor dieser Sektion.
Passen Sie Einstellungen, Blöcke oder CSS an — der iframe aktualisiert sich innerhalb von ~300 ms.
Klicken Sie auf den Zurück-Pfeil (←) in der Seitenleiste, um zur Sektionsliste zurückzukehren.

Wenn Sie in der Seitenleiste mit dem Mauszeiger über einen Sektionseintrag fahren, wird die entsprechende Sektion im iframe blau hervorgehoben und automatisch in den sichtbaren Bereich gescrollt.

Hinweis: Links und Buttons im iframe sind abgefangen — ein Klick selektiert die übergeordnete Sektion, anstatt zu navigieren. Klicks auf Kopf- oder Fußzeile zeigen einen „Demnächst verfügbar"-Hinweis.

Sektion über Einfügepunkte hinzufügen

Fahren Sie mit dem Mauszeiger zwischen zwei Sektionen im iframe — eine blaue Linie und ein kreisförmiger +-Button erscheinen.
Klicken Sie auf + — der Sektions-Auswahldialog öffnet sich.
Wählen Sie einen Sektionstyp — die neue Sektion wird an genau dieser Position in Seitenleiste und iframe eingefügt.

Ein +-Bereich erscheint auch vor der ersten und nach der letzten Sektion. Wenn noch keine Sektionen vorhanden sind, ist der Einfügebereich ebenfalls zugänglich.

Seiten-Typ wechseln

Wechseln Sie zwischen Homepage, Produkt, Kollektion und Blog, ohne die Live-Vorschau zu schließen:

Klicken Sie in der Werkzeugleiste auf den Seiten-Typ-Namen (z. B. „Homepage").
Ein Dropdown erscheint — ein Häkchen markiert die aktuelle Auswahl.
Klicken Sie auf einen anderen Seitentyp — Seitenleiste und iframe laden die neue Seite.

Bei ungespeicherten Änderungen erscheint ein Dialog:

Aktion	Ergebnis
Abbrechen	Bleibt auf der aktuellen Seite, Änderungen bleiben erhalten
Verwerfen & Wechseln	Änderungen werden verworfen, neuer Seitentyp wird geladen
Speichern & Wechseln	Entwurf wird gespeichert, dann wird der neue Seitentyp geladen

Änderungen, die Sie auf einem Seitentyp vorgenommen haben, beeinflussen andere Seitentypen nicht.

Entwurf speichern und veröffentlichen

Alle Speicher- und Veröffentlichungs-Aktionen stehen auch in der Live-Vorschau zur Verfügung. Weitere Details finden Sie im Abschnitt Entwurf & Veröffentlichen des Section-Editor-Artikels.

Werkzeugleiste

Button	Tastenkürzel	Funktion
Entwurf speichern	Ctrl+S / Cmd+S	Speichert alle Änderungen als Entwurf (Storefront unverändert)
Veröffentlichen	—	Übernimmt Entwurf in den live-Shop
Rückgängig	Ctrl+Z / Cmd+Z	Widerruft die letzte Konfigurationsänderung (max. 50 Schritte)
Verlauf	—	Öffnet die Versionshistorie
Zurück (←)	Escape	Schließt die Live-Vorschau

Live-Vorschau schließen

Klicken Sie auf Zurück (←) oben links oder drücken Sie Escape.

Gibt es ungespeicherte Änderungen, erscheint ein Dialog: „Trotzdem verlassen?" — bestätigen Sie, um zu schließen, oder brechen Sie ab, um weiterzuarbeiten.

Tastaturkürzel

Kürzel	Aktion
Ctrl+S / Cmd+S	Entwurf speichern
Ctrl+Z / Cmd+Z	Letzte Konfigurationsänderung rückgängig machen
Escape	Live-Vorschau schließen (mit Ungespeichert-Dialog)

Hinweise

Der Rückgängig-Stack hält bis zu 50 Zustände. Ältere Zustände werden automatisch verworfen.
Rückgängig betrifft nur Konfigurationsänderungen im Speicher — Speicher- und Veröffentlichungsaktionen werden nicht rückgängig gemacht.
Die Live-Vorschau erfordert eine aktive Admin-Sitzung.
Seitentyp-spezifische Seiten (z. B. eine einzelne Produkt-Detailseite) sind nicht im Seiten-Typ-Umschalter verfügbar — nur die vier Haupt-Seitentypen (Homepage, Produkt, Kollektion, Blog).

Nächste Schritte

Section-Editor — Sektionen anlegen und bearbeiten
Versionshistorie — Schnappschüsse anlegen und verwalten
Sektionstypen — Alle verfügbaren Sektionstypen