Was der Builder ist
Der Storefront-Builder ist ein visueller Editor, mit dem du jede Seite deines Shops gestalten kannst, ohne Code zu schreiben. Änderungen werden live in der Bildschirmmitte angezeigt. Nichts ist für Käufer sichtbar, bis du auf Veröffentlichen klickst.
Das Layout des Builders
Der Builder besteht aus drei Bereichen:
- Linke Seitenleiste: Fünf Tabs als Symbole am linken Rand. Von oben nach unten: Märkte (Landesflagge), Seiten, Abschnitte, Einstellungen (Zahnrad) und der KI-Assistent (Amed) ganz unten angeheftet.
- Kontrollfeld: Öffnet sich, wenn du einen Abschnitt oder Block auswählst, und zeigt alle Einstellungen dafür an.
- Vorschaufenster: Eine Live-Ansicht deines Shops, genau wie Käufer ihn sehen werden.
Seiten und Märkte wechseln
Öffne den Tab Seiten, um zwischen den bearbeitbaren Seiten zu wechseln: Startseite, Produkt, Landing, Kollektion, Warenkorb, Kasse, Danke, Suche, Richtlinie, Kontakt und 404. Eine Beschreibung jeder Seite findest du unter Seiten, die du bearbeiten kannst. Öffne den Tab Märkte (das erste Symbol mit der Flagge), um zwischen deinen Märkten zu wechseln. Jeder Markt hat seine eigene Vorlage und eigene Rückgängig-Historie für jede Seite, sodass Änderungen in einem Markt niemals einen anderen beeinflussen.
Vorschau, Ansichtsfenster und Inspektor
Ein Ansichtsfenster-Schalter ermöglicht dir die Vorschau in verschiedenen Breiten mit den Buttons Vollbild, Desktop und Mobil. Der Schalter zeigt nur die Optionen an, die in dein aktuelles Fenster passen, auf einem schmalen Bildschirm verschwinden also manche Buttons. Die obere Leiste enthält außerdem einen Vorschau-Button (Augen-Symbol), der deinen Live-Shop in einem neuen Tab öffnet, sowie einen Builder verlassen-Button.
Inspektor-Modus ist standardmäßig aktiviert (das Cursor-Symbol in der oberen Leiste ist hervorgehoben). Während er aktiv ist, wählst du durch Klicken auf ein Element in der Vorschau sofort den entsprechenden Abschnitt oder Block aus und öffnest ihn im Kontrollfeld – das ist der schnellste Weg, um ohne Scrollen in der Seitenleiste zu einem Element zu springen. Klicke auf den Inspektor-Button, um ihn zu deaktivieren.
Einen Abschnitt hinzufügen
- Öffne den Tab Abschnitte für die aktuelle Seite.
- Klicke auf den Button Abschnitt hinzufügen (Plus-Kreis-Symbol) in der Liste oder öffne das Menü eines Abschnitts und wähle Abschnitt davor hinzufügen oder Abschnitt danach hinzufügen.
- Ein Auswahlfenster öffnet sich und zeigt alle Abschnittstypen, die du auf dieser Seite noch hinzufügen kannst. Klicke auf einen, um ihn hinzuzufügen.
Jeder Abschnittstyp hat ein Seiten-Limit. Sobald das Limit erreicht ist, verschwindet der Typ aus dem Auswahlfenster, und wenn kein Platz mehr ist, wird der Button Abschnitt hinzufügen mit einem Tooltip deaktiviert, dass das Maximum erreicht wurde. Abschnittstypen sind außerdem seitenabhängig (zum Beispiel gibt es Hero oder Newsletter nur auf der Startseite). Den vollständigen Katalog aller Typen und Limits findest du unter Abschnitte und Blöcke.
Einen Block in einem Abschnitt hinzufügen
Wähle einen Abschnitt aus und klicke dann im Kontrollfeld auf Block hinzufügen. Blöcke sind die Bausteine innerhalb eines Abschnitts: Text, Bilder, Buttons, Layout-Gruppen, Trennlinien und mehr. Welche Blocktypen verfügbar sind und wie viele du hinzufügen kannst, hängt vom Abschnitt ab.
Das Abschnittsmenü (kopieren, duplizieren und mehr)
Um alle Aktionen für einen Abschnitt zu sehen, wähle ihn aus und klicke auf das Menü-Symbol oben im Kontrollfeld oder mache einen Rechtsklick auf den Abschnitt in der Seitenleiste. Das Menü enthält:
- Kopieren: Kopiert den gesamten Abschnitt (Inhalt und Stil).
- Nur Stil kopieren: Kopiert nur das visuelle Styling.
- Einfügen: Fügt einen kopierten Abschnitt ein. Der Hinweis zeigt, wo er eingefügt wird (Nach, Innerhalb oder Überschreiben). Ist deaktiviert mit Grund, wenn nichts kopiert wurde, das Limit erreicht ist oder der Typ an dieser Stelle nicht erlaubt ist.
- Nur Stil einfügen: Überträgt kopiertes Styling auf den ausgewählten Abschnitt. Deaktiviert bei Typen-Mismatch oder wenn nichts kopiert wurde.
- Duplizieren: Legt eine Kopie direkt unter das Original, nur auf der aktuellen Seite. Deaktiviert, wenn das Seiten-Limit des Abschnitts erreicht ist.
- Ausblenden / Anzeigen: Schaltet die Sichtbarkeit um. Ausgeblendete Abschnitte bleiben in deiner Vorlage, werden aber Käufern nicht angezeigt.
- Löschen: Entfernt den Abschnitt. Rückgängig bringt ihn zurück.
In der Seitenleiste gibt es außerdem direkt ein Augen-Symbol (Ausblenden/Anzeigen) und ein Papierkorb-Symbol (Löschen). Erforderliche Abschnitte können nicht ausgeblendet oder gelöscht werden, daher gibt es zum Beispiel bei Produktinfos auf der Produktseite und Landing-Infos auf der Landing-Seite kein Papierkorb-Symbol.
Abschnitte und Blöcke neu anordnen
Ziehe in der Abschnitte-Liste einen Abschnitt nach oben oder unten, um seine Position auf der Seite zu ändern. Die Vorschau aktualisiert sich sofort. Blöcke werden genauso im Kontrollfeld per Drag-and-drop neu angeordnet.
Einen Abschnitt auf alle Seiten anwenden
Kopfzeile, Fußzeile, Ankündigungsleiste und benutzerdefinierter Code erscheinen auf jeder Seite. Um eine bearbeitete Version überall zu übernehmen, öffne das Menü dieses Abschnitts und wähle Auf alle Seiten anwenden. Dadurch wird der entsprechende Abschnitt auf jeder Seite des aktuellen Marktes überschrieben, auf der er bereits enthalten ist (Seiten ohne diesen Abschnitt werden übersprungen). Die Änderung wird direkt in deinen Live-Shop geschrieben und ist nicht rückgängig zu machen. Der Builder bittet dich vorher um Bestätigung. Der KI-Assistent kann dies ebenfalls für dich übernehmen, mehr dazu unter KI-Builder-Aktionen.
Rückgängig, Wiederherstellen und Speichern
In der oberen Leiste findest du die Buttons Rückgängig und Wiederherstellen. Die Historie ist pro Markt und pro Seite getrennt, sodass Rückgängig auf der Startseite die Produktseite nicht beeinflusst. Tastenkombinationen: Cmd/Ctrl + Z für Rückgängig, Cmd/Ctrl + Shift + Z oder Cmd/Ctrl + Y für Wiederherstellen und Cmd/Ctrl + S zum Veröffentlichen.
Klicke auf Veröffentlichen (oben rechts), um deine Änderungen live zu schalten. Der Button ist deaktiviert, wenn keine ungespeicherten Änderungen vorhanden sind. Das Veröffentlichen gilt pro Markt und pro Seite, das heißt, das Veröffentlichen der Startseite betrifft nicht die Produktseite.
Was du vor dem Veröffentlichen prüfen solltest
- Wechsle in die Mobile-Ansicht und scrolle die gesamte Seite, da die meisten Käufer mobil unterwegs sind.
- Prüfe den Textkontrast zu den Hintergrundfarben der einzelnen Abschnitte.
- Stelle sicher, dass jeder Bild-Block eine Mediendatei ausgewählt hat, da leere Bild-Platzhalter im Live-Shop als Leerraum erscheinen.
- Kontrolliere, dass Buttons und Menüeinträge zu den richtigen Zielen führen.
Wie der KI-Assistent für dich Abschnitte bauen und bearbeiten kann, erfährst du unter Mit dem KI-Assistenten bauen.