Der Shop-Editor

Klicke auf (add) Add Page, um eine neue Seite anzulegen. Das Add Page-Fenster wird geöffnet:

Im neuen Fenster gibst du einen einzigartigen Namen für die Seite ein. Wähle den Seitentyp (Page Type), also ob die neue Seite eine Content-Seite oder eine Artikelkategorie-Seite sein soll. Content-Seiten sind alle Seiten die statischen Inhalt (bspw. Rechtstexte, Blog-Inhalte oder "Über uns"-Seiten) enthalten. Artikelkategorie-Seiten dienen dazu, Artikel im Shop darzustellen.
In der Dropdown-Liste Oberkategorie (Parent Page) kannst du einstellen, ob die neue Seite als Unterseite in einer bereits angelegte Kategorie erstellt wird, oder ob sie als neue, eigenenständige Seite angelegt wird. Dies ist insbesondere nützlich, wenn du eine neue Artikelkategorie-Seite als weitere Unterkategorie einrichten willst, um deine Produkte übersichtlicher im Shop anzuzeigen. Wenn du im Editor eine neue Seite erstellst, wird dafür eine neue Kategorie im Backend angelegt.

Im unteren Pages-Bereich kannst du die zwei Bereiche Content Pages und Product Categories ausklappen. Im Bereicht Content Pages werden alle Content-Seiten deines Shops aufgelistet. Im Bereich Product Categories werden alle Artikelkategorien aufgelistet.

Wenn du mit der Maus auf eine der gelisteten Kategorien zeigst, wird darauf ein Zahnrad-Icon settings angezeigt. Klicke auf das Zahnrad-Icon, um die Kategorieeinstellungen dieser Kategorie zu öffnen.

Nachdem du auf das Icon geklickt hast, wird dir die Übersicht über die Kategorieeinstellungen angezeigt. Die Kategorieeinstellungen enthalten allgemeine Einstellungen (General Settings) und Einstellungen zur Suchmaschinenoptimierung (SEO Settings).

Speichere deine Einstellungen nachdem du Änderungen vorgenommen hast, indem du auf Save Settings klickst.

In den Schriftarten-Einstellungen legst du eine Schriftart fest, die global für alle Shop-Seiten verwendet wird. Der Shop unterstützt Google Fonts. Die Google Schriftarten werden im Bau-Prozess des Shops heruntergeladen, sodass der Shop im Live-Betrieb nicht mit Google verbunden ist.

Klicke auf das Auswahlfeld, um die Dropdown-Liste für Schriftarten auszuklappen. Das Auswahlfeld dient gleichzeitig als Suchfeld für Schriftarten.

In den Einstellungen für Farben legst du die Primärfarbe und Sekundärfarbe deines Shops fest. Diese beiden Farben bilden die Basis der Farbgebung deines Shops. Aus beiden Farben werden zehn Schattierungen generiert, die an unterschiedlichen Stellen im Shop verwendet werden, um deinem Shop dynamisch einzufärben.

Du hast zwei Möglichkeiten die Farbe auswählen: Gib einen Hexadezimal-Code ins jeweilige Eingabefeld ein oder klicke auf die Farbvorschau im Eingabefeld, um die Farbauswahl inklusive Colour Picker zu öffnen.

Wenn du die Farbgebung änderst, siehst du die Anpassungen direkt im Editor.

In den Header-Einstellungen kannst du die Farbgebung des Headers bestimmen. Damit kannst du deinen Header separat von den anderen Seiten deines Shops designen. Du stellst die Farben für den Header global ein. Das bedeutet, der Header sieht auf jeder Seite deines Shops gleich aus.

Die Einstellung Background color bestimmt die Grundfarbe des Headers. Die Einstellung Icon color bestimmt die Farbe der klickbaren Schaltflächen, die im Header enthalten sind.

Du hast zwei Möglichkeiten die Farbe auswählen: Gib einen Hexadezimal-Code ins jeweilige Eingabefeld ein oder klicke auf die Farbvorschau im Eingabefeld, um die Farbauswahl inklusive Colour Picker zu öffnen.

In den Einstellungen für Block-Abstände kannst du bestimmen, wie weit die unterschiedlichen Bestandteile der Seite entfernt angeordnet sein sollen. Du kannst zwischen den vier Abständen wählen:

Eine Slide ist klickbares Element, das aus einem großen Bild und diversen Textelementen besteht. Wenn in einem Image Banner Block mehrere Slides angelegt sind, können Kund:innen durch Klick auf Pfeile zwischen den Slides wechseln. Du kannst Text- und Bildeinstellungen für jede Slide separat vornehmen. In den Blockeinstellungen wählst du die Slide, für die du die Einstellungen vornehmen willst, indem du auf Slide 1, Slide 2, etc. klickst:

Durch Klick auf die Plus-Schaltfläche (add) kannst du weitere Slides hinzufügen.

Klicke auf (more_horiz), um das Kontextmenü für Slides zu öffnen. In diesem Menü kannst du Slides neu anordnen, hinzufügen oder löschen:

Klicke auf (drag_indicator), um eine Slide an eine andere Position zu ziehen, sodass sie früher oder später in der Slide-Reihenfolge angezeigt wird.
Wenn du eine Slide löschen willst, klicke in der betreffenden Zeile der Slide auf (delete).
Um eine Slide hinzuzufügen, klicke auf (add). Diese Slide wird dann als leere Slide an letzter Stelle im Image Banner angelegt.

Du kannst Bildeinstellungen für jede Slide separat vornehmen.

In den Texteinstellungen gibst du die Text-Snippets ein, die an unterschiedlichen Stellen der Slide zu sehen sind. Dir stehen 4 unterschiedliche Textstellen (Pre-title, Title, Subtitle und Description) zur Verfügung. Die Einstellungen für die Schaltfläche (Button) werden weiter unten beschrieben.

Im Bereich Button passt du das Aussehen und die Funktion der Schaltfläche auf der Slide an. Im Eingabefeld Label legst du die Beschriftung der Schaltfläche fest. Wenn dieses Feld leer ist, wird keine Schaltfläche auf der Slide angezeigt.

Im Eingabefeld Link Target bestimmst du, wohin Besucher:innen geleitet werden, wenn sie auf den Link klicken. Du kannst entweder eine URL eingeben, oder einen Kategoriepfad deines Shops (bspw. /kategorie31/beispiel-artikel_133).

Unter Variant legst du fest, in welchem Design die Schaltfläche angezeigt wird: Bei der Option Primary wird die Schaltfläche voll mit der Primärfarbe des Shops ausgefüllt und das Label darauf in weißer Schrift angezeigt. Bei der Option Secondary wird die Schaltfläche invertiert; dabei wird nur das Label und der Rahmen der Schaltfläche in der Primärfarbe angezeigt. Der Rest der Schaltfläche ist durchsichtig und wird nur beim Mouseover farblich hervorgehoben.

Im Bereich Controls bestimmst du das Design der Bedienelemente auf den Slides. Für das Image Banner betrifft das nur die Farbe der Pfeile, mit denen die Slides gewechselt werden. Gib einen Hexadezimal-Code in das Slider Controls Color Eingabefeld ein, um den Text der Bedienpfeile einzufärben.