Shop-Seiten und Layout

Bearbeiten Sie die Seiten des Onlineshops, Shop-Blöcke, Kampagnenabschnitte, Vorschauen und gemeinsame Designvariablen.

Übersicht

Shop-Einstellungen → Seiten (/de/store/pages) bearbeitet Über, Kontakt, FAQ, Rückgaben, Bedingungen und andere Seiten des Onlineshops. Der Shop-Tab steuert die Inhaltsblöcke, die mit dem Produktgitter angezeigt werden.

Gespeicherte Inhalte erscheinen unter shop.orderinchat.com/store/{slug} oder Ihrer verifizierten benutzerdefinierten Domain. Sie verwalten den Onlineshop über das Hauptpanel von OrderInChat.

Seite bearbeiten: Entwürfe, Veröffentlichen, Verlauf

Der Seiteneditor hat drei Bereiche: links Seiten und Abschnitte, in der Mitte die Live-Vorschau (Desktop oder Mobil, hell oder dunkel) und rechts das Abschnittsformular. Alle Abschnittstypen sind verfügbar (Hero, Feature-Raster, Spotlight, Kennzahlen, Banner, Bewertungen, Rich Text, FAQ, Kontaktkarten, rechtliche Angaben, Medienraster mit Videos, Produktgalerie, Kampagnen-Karussell und -Wand).

Wählen Sie links eine Seite und dann einen Abschnitt in der Liste oder in der Vorschau.
Bearbeiten Sie ihn rechts. Ziehen Sie Abschnitte zum Sortieren, blenden Sie einen mit dem Auge aus und fügen Sie mit Abschnitt hinzufügen einen neuen ein. Die Leiste über der Vorschau verschiebt, dupliziert, blendet aus oder löscht den gewählten Abschnitt; Rückgängig holt die letzte Änderung zurück. Abschnitt hinzufügen bietet auf jeder Seite alle Abschnittstypen an: die für diese Seite passenden zuerst unter Empfohlen für diese Seite, der Rest unter Alle Abschnitte.
Ihre Änderungen werden automatisch als Entwurf gespeichert (oben steht „Entwurf gespeichert“). In Ihrem Shop ändert sich noch nichts.
Klicken Sie auf Veröffentlichen. Das Fenster zeigt, was sich auf jeder Seite geändert hat, bietet an, geänderte Texte zuerst zu übersetzen (standardmäßig an, mit Credit-Schätzung und Guthaben), und stellt dann alle Entwürfe gemeinsam live. Der Shop wird direkt danach aktualisiert. Abschnitte, die die Entwürfe hinzufügen oder ändern, werden außerdem mit Ihrem Shop abgeglichen: Text, der nicht in der Sprache Ihres Shops ist, oder ein Abschnitt, der etwas anbietet, das Ihr Shop nicht hat (Punkte, Termine, Blog, Gutscheine, WhatsApp, Rechner), wird aufgelistet; veröffentlicht wird erst, wenn Sie die Prüfung abhaken. Abschnitte, die vor mehr als einem Tag (oder mit einer älteren KI-Version) mit KI geschrieben wurden, ein seit einem Tag nicht bearbeiteter Entwurf aus einem KI-Tool oder Import und ein Entwurf, der begann, bevor ein Website-Import die Live-Seite ersetzt hat, werden dort ebenfalls aufgeführt.

Verlauf zeigt jede Version der Seite (Editor, KI-Assistent, KI-Tools, Import, Wiederherstellung) mit ihren Änderungen. Als Entwurf wiederherstellen macht eine alte Version zum Entwurf; live ändert sich erst beim Veröffentlichen. Die letzten 50 Veröffentlichungen und 90 Tage werden aufbewahrt.
Wird dieselbe Seite in einem anderen Tab gespeichert, fragt der Editor, ob Sie diese Version laden oder Ihre behalten möchten. Hat jemand die Seite nach Beginn Ihres Entwurfs veröffentlicht, nutzen Sie Meinen Entwurf auf vN bringen: Ihre Änderungen bleiben, die anderen werden eingefügt.
Dasselbe Banner zeigt, wie alt der Entwurf ist und woher er stammt, zum Beispiel Entwurf gestern gespeichert · Quelle: Import. Ist der Entwurf älter als einen Tag, ist sein Alter unbekannt oder wurde er nicht im Editor geschrieben (KI, Import, Übersetzung, Wiederherstellung …), bietet das Banner zusätzlich Entwurf verwerfen an. Nach Ihrer Bestätigung wird der Entwurf gelöscht und der Editor zeigt wieder die Live-Version; die Live-Seite ändert sich nicht. Das kann nicht rückgängig gemacht werden.
KI-Ausfüllen & Import (obere Leiste) schreibt Ihre Seiten aus Ihren Website-URLs oder Dokumenten oder importiert eine ganze Website Schritt für Schritt. Alles, was es schreibt, ist ein Entwurf: prüfen, dann veröffentlichen.
Das Abschnittsformular hat drei Tabs: Inhalt, Stil (Zeilenbreite, volle Breite, Animation) und Sichtbarkeit (im Shop anzeigen, auf allen Geräten / nur Desktop / nur Mobil — Mobil heißt schmaler als 768 px — und der Übersetzungsstatus des Abschnitts je Sprache).
Kopf des Abschnittsformulars: Abschnittstyp, Name (direkt bearbeitbar) und Schaltflächen zum Ausblenden, Verschieben, Duplizieren oder Löschen; die Felder stehen in einklappbaren Gruppen. Neue Abschnitte: Logoleiste (Reihe oder laufend), Zeitleiste / Schritte, Team, Vergleichstabelle (ja, nein oder Text pro Zelle), Karte (Adresse auf Google Maps mit Routen-Button) und Video (YouTube, Vimeo oder Videodatei; der Player lädt erst, wenn Kunden auf Abspielen drücken). Abschnittsfarben (Hintergrund, Text, Button-Farben, Deckkraft) stehen im Tab Stil unter Farben; Farben einzelner Elemente, etwa einer Karte, bleiben beim Element unter Inhalt.
Elemente des Seitenlayouts: Die festen Teile der Seiten Über uns, Kontakt und FAQ stehen ebenfalls als Abschnitte in der Liste — Kopfbereich der Kontaktseite (Titel, Text, Status „jetzt geöffnet“ oder Antwortzeit), Öffnungszeiten (Tage und Zeiten aus der Shop-Einrichtung), FAQ-Box, Kopfbereich der Über-uns-Seite (Titel, Text, Logo, Titelbild, Schaltflächen), Kopfbereich der FAQ-Seite und Hilfe-Box. Mit dem Auge ausblenden, Texte ändern (leer = Standardtext in der Sprache des Besuchers; eigene Texte lassen sich im Übersetzungsmodus übersetzen) und Farben unter Stil wählen. Sie behalten ihren Platz und können nicht dupliziert oder gelöscht werden. Solange Sie nichts ändern, sieht die Seite genau wie bisher aus.
Sprachmenü (obere Leiste): Wählen Sie eine Sprache, um ihre Übersetzungen zu bearbeiten. Jeder Text zeigt Quelle, Übersetzung und Status (aktuell, aktualisieren, fehlt); die Vorschau zeigt diese Sprache. Hier geschriebene Texte werden unverändert veröffentlicht — „zuerst übersetzen“ überschreibt sie nie. Auch Ihre eigenen Abschnitte auf Über uns, Kontakt, FAQ, Rückgaben, Shop und Ihren eigenen Seiten werden hier übersetzt. „Zuerst übersetzen“ beim Veröffentlichen zeigt pro Seite, wie viele Texte in welche Sprachen übersetzt werden, und übersetzt nur neue Texte oder solche, deren Quelle sich seit der Übersetzung geändert hat.
Werkzeuge (Seiteneinstellungen, sichtbar wenn kein Abschnitt ausgewählt ist): KI-Ausfüllen nur für diese Seite, Variablen ({{store_name}} und die anderen Shop-Platzhalter mit Kopierknopf, die Rückgabefrist und Ihre eigenen Variablen) sowie Abschnitte exportieren / importieren (JSON) für Inhaber und Admins. Ein Import ersetzt die Abschnitte der Seite als Entwurf (feste Seitenteile bleiben, höchstens 512 KB, Seitenlimits werden geprüft); Rückgängig holt die alten Abschnitte zurück.
Gestaltete Abschnitte und freies HTML: Abschnitte aus Mit KI gestalten sowie Rich-Text, dessen Layout der visuelle Texteditor nicht erhalten kann, öffnen sich stattdessen als HTML, damit ihr Layout nie verloren geht. HTML bearbeiten öffnet einen Code-Editor mit Zeilennummern; Prüfen entfernt unsicheren Code (Skripte, Event-Handler, externe Ressourcen), stellt Farben auf das Theme um und zeigt, was entfernt wurde, mit Desktop- / Mobil-Vorschau; Übernehmen setzt es in den Entwurf. Bei einem gestalteten Abschnitt schreibt Mit KI ändern nur diesen Abschnitt nach Ihrer Anweisung neu: Zuerst wird die Credit-Schätzung gezeigt, die KI läuft erst beim Klick auf Erstellen, dieselbe Anfrage ist danach kostenlos, und vor Übernehmen sehen Sie eine Vorschau. Rückgängig und Verlauf funktionieren wie gewohnt.
Verlauf → Vorschau zeigt eine ältere Version in der Vorschau, ohne etwas zu ändern; über denselben Hinweis lässt sie sich als Entwurf wiederherstellen.
Footer-Einstellungen: WhatsApp-Button, Menüsymbole, Social-Links (Plattform, Symbolstil, URL, eine Symbolgröße) und die rechtlichen Firmenangaben, die auch in den AGB erscheinen. Shop-Einstellungen: der Kopf über den Produktfiltern (Dachzeile, Titel, Untertitel, Ausrichtung je Zeile).

Kopfzeilenmenü und eigene Seiten

Öffnen Sie Kopfzeilenmenü links (unter Auf jeder Seite). Es zeigt in Reihenfolge, was Kunden in der Kopfzeile des Shops sehen.

Reihenfolge: Eintrag ziehen oder die Pfeile nutzen. → setzt einen Eintrag in das Untermenü des Eintrags darüber (eine Ebene), ← nimmt ihn heraus. Am Computer öffnet sich das Untermenü beim Darüberfahren oder über den Pfeil neben dem Eintrag (Tastatur: Enter, Pfeil nach unten, Escape); auf dem Handy klappt es im Menü auf.
Aus- / einblenden mit dem Auge. Eine ausgeschaltete Seite (FAQ, Über uns, Kontakt, Rückgabe) bleibt verborgen, egal was im Menü steht.
Hinzufügen: eine Shopseite (Startseite, Shop, Über uns, Kontakt, FAQ, Rückgabe, AGB, Insights, Aktionen), eine eigene Seite, ein Link (https://…, mailto:, tel: oder ein Shop-Pfad wie /shop, auf Wunsch in neuem Tab) oder eine Untermenü-Überschrift, die nur ihr Untermenü öffnet.
Bezeichnung: leer zeigt den eigenen Namen der Seite in jeder Sprache. Im Übersetzungsmodus (Sprachmenü oben) geben Sie die Bezeichnung für diese Sprache ein.
Menüänderungen sind Entwürfe wie Seitenänderungen: Die Vorschau zeigt sie sofort, Veröffentlichen schaltet sie live. Zurück zum Standardmenü stellt das Standardmenü (Shop, FAQ, Über uns, Kontakt, Insights) wieder her. Der Footer hat ein eigenes Menü (siehe unten).

Eigene Seiten: Neue Seite (unter der Seitenliste) fragt nach einem Titel, legt die Seite mit einem Textabschnitt an und kann sie ins Kopfzeilenmenü aufnehmen. Jeder Abschnittstyp ist möglich, wie auf der Startseite. Die Seite erscheint unter /p/<adresse> (die Adresse entsteht aus dem Titel und ändert sich danach nicht). Den Titel und die Texte der Abschnitte übersetzen Sie im Übersetzungsmodus. Seite löschen entfernt sie samt Menüeinträgen beim Veröffentlichen. Bis zu 30 eigene Seiten.

Neue Kopfzeile (unter der Menüliste): eine Kopfzeile mit Aufklapp-Bereichen — Kategorien mit Produktanzahl, kurze Beschreibungen und eine hervorgehobene Karte. Schalten Sie Neue Kopfzeile verwenden ein und wählen Sie dann ein Layout (Geteilt, Kacheln, Spalten, Zentriert), Höhe, Hintergrund, Oberfläche, Menüposition und Symbolstil, was die Bereiche zeigen (Produktanzahl, Kategoriebilder, Beschreibungen) und welche Werkzeuge in der Kopfzeile stehen (Konto, Währung, Sprache, hell / dunkel, Aktionen). Hervorgehobene Karte: automatisch (eine aktive Aktion, sonst das neueste Produkt), eine von Ihnen gewählte Aktion, ein Produkt oder eine Kategorie, oder keine. Unter Menüeinträge erhält jeder Eintrag der obersten Ebene seinen Bereich (automatisch, Kategorien, Untermenü-Links oder keiner), eine Kategorie, ein Symbol und eine einzeilige Beschreibung (höchstens 90 Zeichen, keine Preise oder Telefonnummern; im Übersetzungsmodus je Sprache). Werte, die die KI für Ihr Design gewählt hat, tragen das Abzeichen KI-Auswahl; was Sie ändern, bleibt Ihres, wenn die KI erneut vorschlägt. Änderungen sind Entwürfe wie das Menü. Die neue Kopfzeile wird schrittweise eingeführt: Bis sie für Ihren Shop freigeschaltet ist, zeigt Ihr Shop die bisherige Kopfzeile.

Öffnen Sie Footer-Menü im linken Bereich (unter Auf jeder Seite oder über Footer-Menü bearbeiten in den Footer-Einstellungen). Es funktioniert wie das Kopfzeilenmenü, angeordnet als Spalten des Footers.

Spalten: bis zu 4, jede mit einer Überschrift und bis zu 15 Links. Eine Standardüberschrift (Schnellzugriff, Rechtliches, Mein Konto) wird für jeden Kunden übersetzt; eine eigene Überschrift ersetzt sie. Eine Spalte ohne sichtbare Links ist als Leer · nicht sichtbar markiert und erscheint nicht im Shop.
Links: eine Shop-Seite (Startseite, Shop, Über uns, Kontakt, FAQ, Rückgaben, Bedingungen, Insights, Aktionen, Mein Konto, Warenkorb, Cookie-Einstellungen), eine eigene Seite, eine Kategorie, ein Produkt oder ein beliebiger Link. Zur Spalte hinzufügen bestimmt, wohin neue Links kommen; Spalte an einem Link verschiebt ihn in eine andere Spalte. Ziehen zum Sortieren, das Auge blendet aus, im Übersetzungsmodus setzen Sie Bezeichnungen je Sprache.
Bis zur ersten Änderung ist der Footer der Standard-Footer; diese Änderung speichert ihn als Ihr eigenes Menü (Entwurf — Veröffentlichen stellt ihn live). Zurück zum Standard-Footer stellt den Standard wieder her.
Immer im Footer, außerhalb des Menüs: Ihr Logo oder Shopname mit Beschreibung, die Auswahl für Währung / Design / Sprache, der WhatsApp-Button und Social-Icons. Bietet keine Spalte Cookie-Einstellungen an, zeigt die untere Leiste den Link, damit Kunden ihre Einwilligung jederzeit ändern können.
In der Fußzeile anzeigen auf einer eigenen Seite fügt sie dem Footer-Menü hinzu (erste Spalte) oder entfernt sie.
Ohne Logo zeigen Kopfzeile und Footer Ihren Shopnamen; ohne Namen einen Namen aus Ihrer Shop-Adresse.

Erstellen der Shop-Seite

Der Shop-Editor unterstützt gemeinsame Designvariablen und wiederverwendbare Blöcke über dem Produktgitter. Verfügbare Blöcke umfassen Kampagnenkarussells und Kampagnenwandabschnitte, die von aktiven Shop-Kampagnen gespeist werden.

Fügen Sie Blöcke aus der Blockbibliothek hinzu.
Die Zeilenbreite ist ein Prozentwert (100, 75, 66, 50, 33, 25 oder ein beliebiger Wert von 10 bis 100). Abschnitte unter 100 % stehen nebeneinander, bis die Zeile voll ist — z. B. 66 % + 34 % oder dreimal 33 %; auf dem Handy untereinander. Auf der Über-uns-Seite bestimmt eine Breite am Geschichte-Abschnitt, wie er sich die Zeile mit der Kontaktkarte teilt. Ohne gewählte Breite nimmt die „Über uns“-Geschichte 66 % und die Kontaktkarte 34 % ein, und die Steuerung zeigt genau das. Abschnitte, die das Layout von Über uns, Kontakt, FAQ, Rückgabe und AGB selbst platziert, zeigen einen Hinweis statt einer Breite. Die Auswahl eines Abschnitts auf jeder Seite scrollt die Shop-Vorschau dorthin und umrahmt ihn.
Konfigurieren Sie jede Kampagnenwand unabhängig, einschließlich Spalten und Animation.
Verwenden Sie KI-Ausfüllen & Import in der oberen Leiste, um die Kopfzeile, den Titel und den Untertitel des Shops zu entwerfen.
Vorschau von Taxonomie-Filter und Kampagneninhalten vor dem Speichern.

Designstudio: ein Look für die ganze Website

Design erstellen / ändern in der oberen Leiste des Seiteneditors (Inhaber und Admins) speichert Ihre offenen Änderungen und öffnet die Seite Designstudio. Der Tab Farben & Schriften legt ein Design für den ganzen Onlineshop fest — Farben für den hellen und dunklen Modus, eine Überschriften- und eine Fließtextschrift, Eckenradius, Button-Form und Kartenschatten — auf einem Bildschirm: links der Editor, rechts Ihre echte Startseite (auf dem Handy steht die Vorschau unter dem Editor).

Der Editor startet mit dem Design Ihres Theme-Entwurfs, falls es einen gibt, sonst mit dem verwendeten Design. Änderungen an Farben (hell und dunkel getrennt — Hell / Dunkel über der Vorschau wählt, welche), Schriften, Eckenradius, Buttons und Kartenschatten sind kostenlos und erscheinen sofort in der Vorschau. Layout der Startseite ändert nur die Vorschau; Ihre Startseiten-Abschnitte bleiben, wie sie sind. Zurücksetzen kehrt zum Ausgangsdesign des Editors zurück.
3 Designs vorschlagen unter Drei Vorschläge der KI führt die KI einmal aus; die geschätzten Kosten in Credits stehen unter dem Button, bevor etwas läuft. Das Öffnen des Tabs und die Schätzung kosten nichts. Wünsche (optional) öffnet ein Feld für den gewünschten Look. Dieselben Wünsche noch einmal kosten nichts (Kostenlos — diese Vorschläge wurden bereits erstellt).
Die drei Designs erscheinen als Karten im selben Tab. Dieses verwenden übernimmt eines in den Editor und die Vorschau — noch wird nichts gespeichert, und Sie können es weiter anpassen. Danach heißt der Button Andere Vorschläge: ein neuer Satz, erneut berechnet, mit seiner Schätzung darunter.
Als Entwurf speichern legt das Design in Ihren Theme-Entwurf — am Live-Shop ändert sich noch nichts. Veröffentlichen im Seiteneditor stellt es zusammen mit Ihren Seitenentwürfen live. Die Vorschau zeigt danach diesen Entwurf.

Seiten und Abschnitte aus Mit KI gestalten verwenden die Theme-Farben und -Schriften und folgen dem Design daher automatisch.
Solange ein Design aktiv ist, weist Theme darauf hin. Wählen Sie dort Farben, wird das Design beim Veröffentlichen ausgeschaltet; es bleibt unter Frühere Designs.
Ohne KI-Credits werden keine Vorschläge erstellt und das Studio sagt es; Farben und Schriften selbst bearbeiten funktioniert weiterhin.
Der Assistent Website umziehen endet mit demselben Schritt, Design: Meine Website gestalten öffnet dieselben Werkzeuge in einem Fenster; dort stellt Auf meinen Shop anwenden das Design sofort live, und Wieder verwenden bei einem früheren Design holt es nach Ihrer Bestätigung zurück; Vorerst überspringen überspringt ihn. Sie können das Design jederzeit unter Seiten ändern.

Seitendesigns (Vorschau)

In Shops, die an der Vorschau der Seitendesigns teilnehmen, öffnet das Studio mit Seitendesigns: Die KI gestaltet aus Ihren Shopdaten Ihre ganze Startseite sowie je eine Vorlage für die Rechtsseiten, Blogartikel und die Über-uns-Seite. Preise, Produkte und Texte bleiben live.

Die Liste links zeigt jede Seite mit ihrem Status (In der Warteschlange, Wird gestaltet, Fertig, Fehlgeschlagen), den abgebuchten Credits und ihren Designs; das Design im Seitenentwurf ist mit Im Entwurf markiert.
Rechts sehen Sie Ihren echten Shop mit Ihren Entwürfen — Desktop oder Mobil, Hell oder Dunkel.
Alle Seiten gestalten oben zeigt zuerst die geschätzten Kosten; Credits werden erst beim Klick abgebucht. Die Seiten werden nacheinander auf unseren Servern gestaltet, Sie können die Seite also schließen und später zurückkommen. Browser-Benachrichtigungen erhalten sagt Ihnen, wann sie fertig sind.
Wenn es für deinen Shop eingeschaltet ist, wählt KI-Modell neben diesem Button, wer gestaltet: Claude Opus 5.5 (beste Qualität, Standard), Claude Sonnet 5.5 (günstiger), ChatGPT (OpenAI) oder Google Gemini. Jedes Modell zeigt seine geschätzten Kosten für alle Seiten. Spätere Seiten starten mit dem Modell deiner Startseite, damit die ganze Website zusammenpasst; du kannst es ändern. Jedes Modell durchläuft dieselbe Qualitätsprüfung, und du zahlst nur für Designs, die gespeichert werden.
Dieses verwenden übernimmt das gewählte Design in den Entwurf dieser Seite — ohne KI, ohne Credits. Wählen Sie bei Rechtsseiten zuerst AGB, Versand oder Rückgabe. Auf der Startseite übernimmt es auch die Farben und Schriften des Designs in Ihren Theme-Entwurf (auch mit Alle anwenden); Veröffentlichen schaltet die Seite und diese Farben gemeinsam live, danach lässt Rückgängig die Farben unverändert.
Wenn es für Ihren Shop eingeschaltet ist, übernimmt Alle anwenden jedes fertige Design, das das Studio zeigt (auch aus früheren Durchläufen), auf einmal in den Entwurf seiner Seite (das Rechtsdesign auf alle drei Rechtsseiten) — ohne KI, ohne Credits. Es fragt zuerst nach und listet die Seiten auf; noch nicht fertige Designs werden übersprungen. Danach zeigt eine Liste jede Seite: in den Entwurf übernommen, schon dort oder warum es nicht angewendet werden konnte. Wenn die Farben und Schriften des Startseiten-Designs auch in Ihr Shop-Theme übernommen wurden, sagt die Liste das.
Rückgängig (neben Dieses verwenden und in dieser Liste) stellt den Stand eines Seitenentwurfs vor Ihrem letzten Dieses verwenden oder Alle anwenden wieder her — ein Schritt pro Seite, kostenlos. Auf der Startseite kommen auch Ihre vorherigen Farben und Schriften zurück, sofern Sie sie inzwischen nicht geändert haben. Wurde die Seite danach geändert, wird Rückgängig nicht angeboten; wählen Sie stattdessen ein früheres Design.
In neuem Tab öffnen zeigt den Shop mit Ihren Entwürfen in einem neuen Tab. Anderes Design erstellt nur für diese Seite ein neues Design (die Schätzung steht daneben); eine fehlgeschlagene Seite hat Erneut versuchen. Pro Seite sind höchstens 10 Designs möglich; danach ist Anderes Design aus und Sie wählen eines der früheren Designs. Bei unveränderter Eingabe wird das frühere Design kostenlos erneut gezeigt (das Studio weist darauf hin). Wird das Startseiten-Design eines Durchlaufs nicht fertig, werden die anderen Seiten dieses Durchlaufs nicht begonnen und nicht berechnet.
Auf dem Handy werden die Seiten oben zu Chips, Dieses verwenden sitzt unten und die übrigen Aktionen liegen unter ⋯.
Nichts geht live, bevor Sie die Seite im Seiteneditor veröffentlichen.
Im Seiteneditor listet eine Seite mit einem dieser Designs links die eigenen Abschnitte des Designs: Ein Klick springt in der Vorschau dorthin (kurz hervorgehoben); das Auge blendet den Abschnitt nur auf dieser Seite aus oder ein — kostenlos, ohne KI; veröffentlichen Sie die Seite, damit es live geht. Die klassischen Abschnitte der Seite liegen eingeklappt unter Klassische Abschnitte – in diesem Design nicht verwendet.
Auf so einer Seite klickst du in der Vorschau auf einen Text, ein Bild oder einen Link, um ihn direkt zu ändern: reiner Text für die Sprache, die du bearbeitest, ein Bild aus deiner Mediathek, ein Link zu einer Seite, einem Produkt, einer Webadresse, E-Mail, Telefonnummer oder dem WhatsApp deines Shops. Zurücksetzen holt den ursprünglichen Inhalt des Designs für die bearbeitete Sprache zurück (Alle Sprachen zurücksetzen für alle). Diese Änderungen gelten nur für diese Seite, werden als Entwurf gespeichert (veröffentliche die Seite, damit sie live gehen) und nutzen weder KI noch Credits. Passt eine Änderung nach einem Designwechsel nicht mehr, zeigt die Abschnittsliste das an und Aufräumen entfernt sie.
Wenn es für deinen Shop aktiviert ist, kannst du die Abschnitte einer solchen Seite auch neu anordnen: Zieh einen Abschnitt am Griff oder nutze Nach oben / Nach unten in seinem ⋯-Menü. Das ⋯-Menü bietet außerdem Duplizieren, Auf eine andere Seite kopieren, Auf eine andere Seite verschieben, Unter „Meine Abschnitte“ speichern und Löschen; Meine Abschnitte unter der Liste fügt einen gespeicherten Abschnitt an der gewählten Position zu jeder Seite mit Studio-Design hinzu (dort kannst du gespeicherte Abschnitte auch suchen, umbenennen und löschen). Deine Text- und Bildänderungen wandern mit dem Abschnitt. Jede Änderung gilt sofort für den Entwurf dieser Seite, nutzt keine KI und keine Credits, und Rückgängig unter der Liste nimmt sie zurück. Abschnitte mit deinem Rechtstext lassen sich nur nach oben oder unten verschieben.

Eine Seite mit KI gestalten

Mit KI gestalten steht in der oberen Leiste neben dem Seitentitel – auf Startseite, Über, Kontakt, FAQ, Rückgaben, Bedingungen und Ihren eigenen Seiten (Inhaber und Admins).

Wählen Sie Aus einem Briefing (beschreiben Sie die Seite mit mindestens 10 Zeichen) oder Von einer Website (geben Sie unter URL der Quellseite eine Seite an, deren Look Sie möchten; Hinweise sind optional). Sie können bis zu drei Markenfarben (optional) und eine Tonalität (optional) angeben.
Das Fenster zeigt die geschätzten Kosten in Credits; Credits werden erst beim Klick auf Erstellen berechnet. Dieselbe Eingabe erneut ist kostenlos.
Erstellen gestaltet die Seite als formatierte Abschnitte rund um Ihre Live-Blöcke (Produkte, FAQ, Kontaktkarten, Karte) und fügt sie der Seite als Entwurf hinzu, mit einer kurzen Qualitätsprüfung. Neu erzeugen (neue Variante) erstellt eine weitere Version und wird wie Erstellen berechnet. Vorher wird die Seite zusätzlich in Handy- und Desktopbreite, hell und dunkel, gerendert und auf Inhalte breiter als der Bildschirm, abgeschnittenen Text, defekte Bilder, die Zahl der Hauptüberschriften und den Textkontrast geprüft. Layout-, Überschriften- und Farbprobleme werden wenn möglich automatisch korrigiert (höchstens eine zusätzliche KI-Korrektur, in der Schätzung enthalten); defekte Bilder werden nur gemeldet. Schwer lesbarer Text (geringer Kontrast) erscheint als Hinweis, nicht behebbare Probleme werden mit ihrer Anzahl angezeigt.
Prüfen Sie die Vorschau, nutzen Sie Rückgängig, wenn sie Ihnen nicht gefällt, und klicken Sie auf Veröffentlichen, wenn alles passt. Übersetzungen in Ihre anderen Sprachen entstehen beim Veröffentlichen, nur für geänderte Abschnitte.

Auf einer gestalteten Über-, Kontakt-, FAQ-, Rückgabe- oder Bedingungen-Seite zeigt Klassisches Layout verwenden unter Werkzeuge die Seite wieder im klassischen Layout; Ihre Abschnitte bleiben erhalten.
Um später einen einzelnen gestalteten Abschnitt zu ändern, wählen Sie ihn aus und nutzen HTML bearbeiten oder Mit KI ändern (siehe Seite bearbeiten oben).

Design: Farben und Seitenhintergrund

Öffnen Sie Theme im linken Bereich (unter Design). Theme-Änderungen sind wie jede Seitenänderung Entwürfe und gehen mit Veröffentlichen live; die Vorschau zeigt sie sofort.

Farbsystem: Colorswitch-Vorlagen (eigene Primär-, Sekundär- und Akzentfarbe möglich) oder die Akzentpalette (Vorlagen plus eigene Akzentfarben).
Farbmodus: dem Gerät des Kunden folgen, immer hell oder immer dunkel.
Hintergrundfarbe: eine einfarbige Seitenfarbe für den hellen und eine für den dunklen Modus. Das Panel zeigt jeweils den Textkontrast und warnt unter 4.5:1; ohne dunkle Farbe nutzt der dunkle Modus die helle. Verläufe und Muster stehen unter Verlauf & Muster.
Seitenhintergrund: Vollfarbe oder Verlauf (mit Winkel), Deckkraft und optionales Muster mit eigener Farbe, getrennt für hellen und dunklen Modus; ein Klick kopiert ihn in den anderen Modus.

Shop-Schriften wählen

Wähle unter Theme eine Schrift für Überschriften und eine Schrift für Fließtext aus 14 ausgewählten Google-Schriften (serifenlos, Serifen und Display) oder die Systemschrift. Jede Option wird in ihrer eigenen Schrift angezeigt, die Live-Vorschau aktualisiert sich sofort.

Nach dem Speichern gelten die Schriften im ganzen Shop, in „Mein Konto“ und im Checkout.
Ohne Auswahl nutzt der Shop Inter; die Überschriftenschrift folgt der Fließtextschrift, solange du sie nicht festlegst.
Es werden nur die gewählten Schriften geladen, und der Text bleibt währenddessen sichtbar. Alle Schriften decken lateinische, türkische und kyrillische Zeichen ab; Shops in arabischer Schrift erhalten eine arabische Ersatzschrift, andere Schriftsysteme nutzen die Schriften des Geräts.
Bricolage Grotesque und Hanken Grotesk (das Paar des neuen Shop-Designs) haben keine kyrillischen Buchstaben, die Liste weist darauf hin; russischer Text nutzt dann die Geräteschrift.

Backup-Abdeckung

Seiten- und Shop-Blockkonfiguration sind in Shop-Einstellungen → Backup & Wiederherstellung enthalten. Eine vollständige Wiederherstellung umfasst die Seitenblockkonfiguration und die Startseitenblöcke. Überprüfen Sie die Zusammenfassung der Wiederherstellung, bevor Sie sie anwenden.

KI-Seitenimport

Verwenden Sie KI-Import auf Seiten, wenn Sie bereits eine öffentliche Website haben und einen Vorsprung möchten:

Präferenzen — Bilder, Designstil, Notizen.
URL-Entdeckung — zuerst Sitemap, dann nur Inhaltsseiten (Startseite, Über, Kontakt, FAQ, Richtlinien, benutzerdefinierte Landingpages). Produktseiten (/shop/…), Warenkorb/Konto, Markenarchive und Dokumente/Artikel sind ausgeschlossen (Produkte und Wissensschritte behandeln diese).
Test-Crawl (bei vielen Seiten) — testen Sie zuerst einige URLs, überprüfen Sie die Quellen der Wissensdatenbank, fügen Sie optional Anweisungen hinzu und führen Sie den Crawl erneut aus, dann fahren Sie mit den verbleibenden fort. Die Kopier-URL-Symbole helfen Ihnen, die Quellen zu überprüfen.
Crawl → Wissensdatenbank — ausgewählte Seiten werden im Hintergrund in kleinen Chargen gespeichert. Der Import-Dock zeigt live Fortschritt (Status, %, gecrawlte Seiten, Spinner), während der Crawl läuft. Sie können den Dock mit dem Symbol oben rechts minimieren — der Crawl läuft weiter. Kommen Sie nur zurück, um Shop-Seiten zu entwerfen. Nur Import löschen bricht ihn ab.
Entwurf schlanker Shop-Seiten — Startseite / Shop / FAQ / rechtliche. Überprüfen Sie jeden Schritt. Lange Dokumente bleiben in der KB, nicht als Menü-Klone.

Bilder: Die Bildanzahl (max 50) ist für Design-Assets des Onlineshops (Hero, Spotlight usw.), nicht ein Bild pro gecrawlter URL. Wir bevorzugen Hauptfotos (das Hauptbild der Seite für das Teilen oder große Fotos) und überspringen kleine Thumbnails/Icons.

HTML-Nachahmung (Standarddesign): Generieren Sie Home-Bauten viele reichhaltige HTML-Abschnitte (Hero, Produkte, wie es funktioniert, Geschäftsanwendungsfälle, FAQ, Kontakt/CTA, …) mit den Farben der Markenquellen und unterschiedlichen Fotos — nicht ein dünner 3-Block-Stumpf. Bevorzugen Sie HTML-Nachahmung in den Importpräferenzen; stärkere Modelle (wie Claude Opus) funktionieren am besten für Seiten.

Videos: Werden während des Imports nicht heruntergeladen (zu groß für einen zuverlässigen Import). Behalten Sie YouTube/Vimeo als Einbettungen/Links oder laden Sie Dateien später über die Medienbibliothek / Freies HTML auf der gewünschten Seite hoch.

Fehlende Seiten nach dem Import? Fügen Sie deren URLs jederzeit unter Assistent → Wissensdatenbank hinzu (siehe Wissensdatenbank).

Hinweise

Die Fußzeilenbeschreibung und der Markentext werden hauptsächlich in Shop-Setup → Branding verwaltet.
Rechtliche Unternehmensdetails für Rechnungen und Bedingungen sollten die rechtlichen Felder im Shop-Setup verwenden.
Kampagnenangebote werden in Marketing → Kampagnen verwaltet; Seiten steuern, wie Kampagnenabschnitte angeordnet sind.