Was der Builder ist
Der Storefront-Builder ist ein visueller Editor, mit dem Sie jede Seite Ihres Shops gestalten können, ohne Code schreiben zu müssen. Änderungen werden live auf der rechten Seite des Bildschirms als Vorschau angezeigt. Für Käufer ist nichts sichtbar, bis Sie auf Veröffentlichen klicken.
Das Builder-Layout
Der Builder ist in drei Bereiche unterteilt:
- Linke Seitenleiste: Registerkarten zum Wechseln zwischen Märkten, Seiten, Abschnitten und globalen Einstellungen. Der KI-Assistent befindet sich am unteren Rand der Seitenleiste.
- Steuerungsbereich: Erscheint, wenn Sie einen Abschnitt oder Block auswählen, und zeigt alle zugehörigen Einstellungen an.
- Vorschaufenster: Eine Live-Ansicht Ihres Shops genau so, wie Käufer ihn sehen werden.
Zwischen Seiten und Märkten wechseln
Verwenden Sie die Registerkarte Seiten (Seiten-Symbol) in der linken Seitenleiste, um zwischen den bearbeitbaren Seiten zu wechseln (Startseite, Produkt, Warenkorb usw.). Verwenden Sie die erste Registerkarte (Länderflaggen-Symbol), um zwischen Ihren aktiven Märkten zu wechseln. Jede Kombination aus Markt und Seite hat eine eigene Vorlage und einen eigenen Verlauf zum Rückgängig machen.
Vorschau auf verschiedenen Geräten
Die obere Leiste enthält Viewport-Umschaltschaltflächen: Mobil, Desktop, Vollbild und ein Erweiterungs-Symbol, das ein separates Vorschaufenster öffnet. Damit können Sie überprüfen, wie Ihr Shop auf verschiedenen Bildschirmgrößen aussieht, bevor Sie veröffentlichen.
Einen Abschnitt hinzufügen
- Suchen Sie in der linken Seitenleiste die Abschnitte-Liste für die aktuelle Seite.
- Klicken Sie auf die Schaltfläche + Abschnitt hinzufügen, die zwischen den Abschnitten erscheint, oder öffnen Sie das Drei-Punkte-Menü eines vorhandenen Abschnitts und wählen Sie Vor hinzufügen oder Nach hinzufügen.
- Es öffnet sich eine Auswahl mit allen verfügbaren Abschnittstypen für die aktuelle Seite. Klicken Sie auf einen Abschnittstyp, um ihn hinzuzufügen.
Tipp: Jeder Abschnittstyp hat eine maximale Anzahl von Instanzen pro Seite. Wenn Sie das Limit erreichen, zeigt die Schaltfläche die Anzahl und einen Tooltip an, der erklärt, dass das Maximum erreicht wurde.
Einen Block innerhalb eines Abschnitts hinzufügen
Wählen Sie einen Abschnitt aus, klicken Sie dann in dessen Steuerungsbereich auf + Block hinzufügen. Blöcke sind die Bausteine innerhalb eines Abschnitts: Text, Bilder, Schaltflächen, Layout-Gruppen, Trennlinien und mehr. Die verfügbaren Blocktypen und die zulässige Anzahl variieren je nach Abschnitt.
Abschnitte und Blöcke neu anordnen
Ziehen Sie in der Abschnittsliste eine beliebige Zeile nach oben oder unten, um die Position auf der Seite zu ändern. Die Vorschau wird sofort aktualisiert. Blöcke innerhalb eines Abschnitts können auf dieselbe Weise im Steuerungsbereich neu angeordnet werden.
Abschnitte ausblenden und löschen
Jede Abschnittszeile in der Seitenleiste hat ein Augen-Symbol zum Umschalten der Sichtbarkeit und ein Papierkorb-Symbol zum endgültigen Löschen. Das Drei-Punkte-Menü (⋯) bietet ebenfalls Ausblenden/Anzeigen und Löschen. Ausgeblendete Abschnitte verbleiben in Ihrer Vorlage, werden Käufern jedoch nicht angezeigt.
Einen Abschnitt duplizieren
Öffnen Sie das Drei-Punkte-Menü in der Zeile des Abschnitts in der linken Seitenleiste und klicken Sie auf Duplizieren. Eine Kopie erscheint sofort unterhalb des Originals auf der aktuellen Seite.
Inhalt oder Stil eines Abschnitts in einen anderen kopieren
Öffnen Sie das Drei-Punkte-Menü des Quellabschnitts und klicken Sie auf Kopieren. Öffnen Sie dann das Drei-Punkte-Menü des Zielabschnitts und klicken Sie auf Einfügen, um alle Inhalte und das Styling zu ersetzen, oder auf Nur Stil einfügen, um lediglich das visuelle Styling zu kopieren, ohne den Inhalt zu ändern.
Einen übergeordneten Abschnitt auf alle Seiten anwenden
Der Header, der Footer und die Ankündigungsleiste erscheinen auf jeder Seite. Wenn Sie den Header auf der Startseite bearbeiten und möchten, dass jede andere Seite dieselbe Version verwendet, öffnen Sie das Drei-Punkte-Menü des Header-Abschnitts und wählen Sie Auf alle Seiten anwenden. Dadurch wird dieser Abschnitt auf jeder anderen Seite überschrieben, sodass die Aktion nicht rückgängig gemacht werden kann. Stellen Sie sicher, dass Sie mit dem Ergebnis zufrieden sind, bevor Sie fortfahren.
Inspektor-Modus
Klicken Sie in der oberen Leiste auf die Schaltfläche Inspektor (Cursor-Symbol), um den Inspektor-Modus zu aktivieren. Wenn aktiv, markiert ein Klick auf ein beliebiges Element in der Live-Vorschau sofort diesen Abschnitt oder Block und öffnet ihn im Steuerungsbereich. Dies ist die schnellste Möglichkeit, zu einem bestimmten Abschnitt zu springen, ohne durch die Seitenleiste zu scrollen. Klicken Sie erneut auf die Inspektor-Schaltfläche, um ihn zu deaktivieren.
Rückgängig machen und Wiederholen
Die obere Leiste enthält die Schaltflächen Rückgängig (Pfeil-zurück-Symbol) und Wiederholen. Der Verlauf ist je nach Markt und Seite begrenzt, sodass das Rückgängig machen auf der Startseite keine Auswirkungen auf Änderungen an der Produktseite hat.
Speichern und Veröffentlichen
Klicken Sie auf die Schaltfläche Veröffentlichen (oben rechts in der Leiste), um Ihre aktuellen Änderungen live zu schalten. Die Schaltfläche ist deaktiviert, wenn keine nicht gespeicherten Änderungen vorhanden sind. Die Veröffentlichung erfolgt pro Markt und Seite, d. h. die Veröffentlichung der Startseite veröffentlicht nicht automatisch Änderungen an der Produktseite.
Was vor dem Veröffentlichen überprüft werden sollte
- Wechseln Sie zur Mobil-Ansicht und scrollen Sie die gesamte Seite durch, da die meisten Käufer auf Mobilgeräten sind.
- Überprüfen Sie den Textkontrast gegenüber der Hintergrundfarbe jedes Abschnitts.
- Stellen Sie sicher, dass jeder Bildblock eine Mediendatei ausgewählt hat, da leere Bild-Platzhalter im Live-Shop als leere Flächen erscheinen.
- Bestätigen Sie, dass Links in Schaltflächen und Menüs auf die richtigen Ziele verweisen.