ShopBuilder einrichten

Der ShopBuilder ist plentymarkets Baukastenmodul mit dem Sie Ihren Ceres Webshops schnell und einfach per Drag&Drop erstellen und bearbeiten können. Dafür sind keinerlei Programmierungskenntnisse nötig.

Voraussetzungen für den ShopBuilder

Um den ShopBuilder nutzen zu können, müssen Sie über ein gültiges SSL-Zertifikat verfügen.
Der betreffende Shop darf nicht gesperrt sein.
Der ShopBuilder ist erst ab Version 2.8.1 von Ceres und IO verfügbar. Sollten Sie eine ältere Version benutzen, besuchen Sie den plentyMarketplace, um die jeweils aktuelle Version zu installieren.

Funktionsumfang des ShopBuilders

Zum gegenwärtigen Zeitpunkt können ausschließlich die Startseite und Content-Kategorien Ihres Ceres Webshops über den ShopBuilder bearbeitet werden. Der Funktionsumfang des ShopBuilders wird nach und nach erweitert und in Zukunft wird es möglich sein, den gesamten Ceres Shop darüber zu bearbeiten.

Anzeigen der mit dem ShopBuilder erstellten Startseite

Beachten Sie, dass die im ShopBuilder erstellte Startseite erst aktiviert werden muss. Hierzu wählen Sie unter CMS » ShopBuilder » Übersicht » Einstellungen » Startseite die Option ShopBuilder Startseite anzeigen und deaktivieren die Option Standardstartseite anzeigen.

1. Ceres-Startseite mit dem ShopBuilder bearbeiten

Im Vorschaubereich können Sie der Startseite Elemente hinzufügen, um die Seite Ihren individuellen Bedürfnissen anzupassen.

Elemente zum Vorschaubereich hinzufügen:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Der ShopBuilder wird geöffnet.
Klicken Sie auf Startseite.
Klicken Sie auf Neu oder eine bereits existierende Startseite.
→ Der Vorschaubereich der Startseite wird geöffnet.
Ziehen Sie per Drag&Drop Elemente von der linken Seite in den Vorschaubereich. Beachten Sie dazu die Erläuterungen in Tabelle 1.
→ Neue Elemente werden automatisch am unteren Ende hinzugefügt oder können in ein Strukturelement gezogen werden.
Speichern Sie die Einstellungen.
→ Die Startseite Ihres Webshops wird mit den gewählten Elementen dargestellt.

Der ShopBuilder beinhaltet Strukturelemente, die das Layout der Seite gliedern und sogenannte Widgets, also verschiedenen Seitenelemente, mit denen die Strukturelemente befüllt werden können. Die folgende Tabelle erklärt diese Elemente im Detail:

Tabelle 1. Elemente des ShopBuilders
Element	Erläuterung
Struktur-Elemente
2 Spalten	Stellt ein Strukturelement mit 2 Spalten zur Verfügung, die mit den unten aufgeführten Widgets befüllt werden können. Klicken Sie auf Bearbeiten, um das Layout des Elements zu ändern. Wählen Sie aus der Dropdown-Liste Layout das gewünschte Größenverhältnis der Spalten.
3 Spalten	Stellt ein Strukturelement mit 3 Spalten zur Verfügung, die mit den unten aufgeführten Widgets befüllt werden können. Klicken Sie auf Bearbeiten, um das Layout des Elements zu ändern. Wählen Sie aus der Dropdown-Liste Layout das gewünschte Größenverhältnis der Spalten. Bei gestapelten Verhältnissen werden 2 Spalten übereinander angezeigt.
4 Spalten	Stellt ein Strukturelement mit 4 Spalten zur Verfügung, die mit den unten aufgeführten Widgets befüllt werden können. Das Größenverhältnis der Spalten ist nicht anpassbar.
Widgets
Titelleiste	Stellt eine Textbox zur Verfügung. Klicken Sie auf Bearbeiten, um Text einzugeben und die Farbe der Titelleiste zu ändern. Es kann nur Reintext verwendet werden.
Bilderkarussell	Stellt das Ceres-Bilderkarussell zur Verfügung. Klicken Sie auf Bearbeiten, um Bilder hinzuzufügen oder zu entfernen. Bilder können über die Kategorieauswahl, die Eingabe der Varianten-ID oder die Dateiauswahl gewählt werden. Wenn das Bild über die Kategorieauswahl bestimmt wird, wird das erste im Tab Dokumente abgelegte Bild der Kategorie verwendet. Bestimmen Sie über die Dropdown-Liste Erscheinungsbild die Farbe des Bilderkarussells. Die optimalen Bildergrößen werden in diesem Kapitel beschrieben.
Bilderbox	Stellt einen Container für Bilder zur Verfügung. Klicken Sie auf Bearbeiten, um Bilder hinzuzufügen oder zu entfernen. Bilder können über die Kategorieauswahl, die Eingabe der Varianten-ID oder die Dateiauswahl gewählt werden. Wenn das Bild über die Kategorieauswahl bestimmt wird, wird das erste im Tab Dokumente abgelegte Bild der Kategorie verwendet. Bestimmen Sie über die Dropdown-Liste Erscheinungsbild die Farbe der Bilderbox. Über die Dropdown-Listen Stil der Box und Größe des Bilds passen Sie das Widget hinsichtlich Text- und Bildgröße an. Die optimalen Bildergrößen werden in diesem Kapitel beschrieben.
Artikelliste	Stellt die Ceres Artikelliste zur Verfügung. Klicken Sie auf Bearbeiten, um Bilder hinzuzufügen oder zu entfernen. Für die Startseite können Artikellisten mit Kategorieartikeln, zuletzt angesehenen Artikeln oder über Tags definierte Artikellisten konfiguriert werden. Bestimmen Sie die Art der Sortierung über die Artikelsortierung Dropdown-Liste und legen Sie die Maximale Anzahl der angezeigten Artikel fest.
Text	Stellt eine Textbox zur Verfügung. Klicken Sie auf Bearbeiten, um Text einzugeben und die Farbe der Textbox zu ändern. Im Texteditor kann Reintext und, nach Klick auf </>, auch HTML eingegeben werden. Es ist nicht möglich, CSS in diesem Widget einzubinden.
Liste	Stellt eine Liste zur Verfügung, die als Platzhalter dient. Klicken Sie auf Bearbeiten, um Listeneinträge oder Icons hinzuzufügen.
Linkliste	Stellt eine Linkliste zur Verfügung, die als Platzhalter dient. Klicken Sie auf Bearbeiten, um einen Listentitel, Listeneinträge oder Icons hinzuzufügen.
GoogleMaps	Stellt eine Karte zur Verfügung, um beispielsweise die Adresse Ihres Ladengeschäfts anzuzeigen. Klicken Sie auf Bearbeiten, um den Google API-Schlüssel, den Sie von Google Cloud erhalten, einzugeben. Hinweis: Die GoogleMaps API ist unter Umständen kostenpflichtig. Geben Sie zusätzlich die Adresse ein, die Sie auf der Karte markieren wollen und geben Sie die Zoomstufe für die Kartenansicht an. Der Standardwert ist 16; größere Werte zoomen heran, kleinere heraus.
Live-Shopping	Stellt einen Container für einen Live-Shopping-Artikel zur Verfügung. Klicken Sie auf Bearbeiten, um die Einstellungen für das Widget vorzunehmen. Unter Live-Shopping-Auswahl wählen Sie eins von 10 Live-Shopping-Profilen, die Sie im Menü System » Mandant » Global » Live-Shopping erstellen. Unter Sortierung wählen Sie die Sortieroption, durch welche die erste angezeigte Variante bestimmt wird. Aktivieren Sie die Option Timer anzeigen, um einen ablaufenden Countdown für das Live-Shopping-Angebot anzuzeigen. Ist diese Option aktiv, können Sie ebenfalls einen zeitabhängigen Fortschrittsbalken anzeigen, welcher unterhalb des Countdowns angezeigt wird. Aktivieren Sie die Option Bestand anzeigen, um den noch verfügbaren Bestand anzuzeigen. Ist diese Option aktiv, können Sie ebenfalls einen bestandsabhängigen Fortschrittsbalken anzeigen. welcher unterhalb des Bestands angezeigt wird. Aktivieren Sie die Option Streichpreis anzeigen um den durchgestrichenen UVP im Widget neben dem Aktionspreis anzuzeigen. Unter Bildauswahl können Sie ein Artikelbild für die Live-Shopping-Aktion hochladen. Wenn Sie kein Bild hochladen, wird das Artikelbild der Variante angezeigt. *Wichtig: Um Live-Shopping nutzen zu können, müssen Sie mindestens ein Live-Shopping-Profil angelegt haben. Weiterhin müssen Sie einen Verkaufspreis des Preistyps Aktionspreis* angelegt haben.
Newsletter	Stellt eine Newsletter-Anmeldung für Kunden zur Verfügung. Erscheinungsbild = Farbgebung des Abonnieren-Buttons wählen. Titel = Überschrift für die Newsletter-Anmeldung eingeben. Beschreibung = Beschreibung für die Newsletter-Anmeldung eingeben. Die Beschreibung wird unterhalb des Titels angezeigt. Eingabefelder für Vor- und Nachnamen anzeigen = Aktivieren, um bei der Newsletter-Anmeldung die Eingabefelder für Vor- und Nachnamen anzuzeigen. Checkbox zur Einwilligung der Datenschutzerklärung anzeigen = Aktivieren, um eine Checkbox anzuzeigen, mit der Kunden der Datenschutzerklärung zustimmen können. E-Mail-Ordner ID = ID des E-Mail-Ordners eingeben, in dem die E-Mail-Adressen der Kunden gespeichert werden. E-Mail-Ordner legen Sie im Menü CMR » Newsletter » plentymarkets » E-Mail-Ordner an.
Trennlinie	Stellt eine Trennlinie zur Verfügung, die als Platzhalter dient.
Top Bar (Header)	Stellt eine Top Bar für den Header zur Verfügung. Klicken Sie auf Bearbeiten, um die Einstellungen vorzunehmen und die Anzeige der Elemente, der Suche oder der Warenkorbinformationen zu bestimmen. Beim Scrollen der Seite fixieren = Aktivieren, um die Top-Bar immer anzuzeigen. Anzeige der Suche = Wählen, ob die Suche immer sichtbar ist, eingeblendet wird oder nicht sichtbar ist. Artikelbilder in Suchvorschlägen anzeigen = Aktivieren, um Artikelbilder in den Suchvorschlägen anzuzeigen. Artikelsuche: zur Artikelansicht weiterleiten = Aktivieren, um Kunden bei Klick auf einen Suchvorschlag direkt zur Artikelansicht weiterzuleiten. Elemente in der Top-Bar anzeigen = Checkboxen aktivieren, um Kunden-Login, Kunden-Registrierung, Sprachauswahl, Lieferlandauswahl, Währungsauswahl, Wunschliste und Warenkorbvorschau in der Top-Bar anzuzeigen. Warenkorbinformationen anzeigen = Wählen, ob der Warenwert, die Anzahl der Artikel, oder eine Kombination aus beidem in der Warenkorbvorschau angezeigt wird.
Kategorie-Navigation (Header)	Stellt eine Kategorie-Navigation zur Verfügung. Klicken Sie auf Bearbeiten, um die Einstellungen vorzunehmen und den Stil der Kategorie-Navigation, die Kategorieebenen sowie die Anzahl der Kategorien festzulegen. Des Weiteren kann ein Firmenlogo hinzugefügt werden. Beim Scrollen der Seite fixieren = Aktivieren, um die Kategorie-Navigation immer anzuzeigen. Stil der Kategorie-Navigation = Wählen, ob die Kategorie-Navigation im normalen Stil oder als Megamenü angezeigt wird. Kategorieebenen des Mega-Menüs = Wählen, ob das Mega-Menü 2, 3 oder 4 Kategorieebenen anzeigt. Diese Einstellung ist nur wirksam, wenn Mega-Menü als Stil der Kategorie-Navigation gewählt wurde. Anzahl der Kategorien = Anzahl der Kategorien eingeben, die in der jeweiligen Ebene des Mega-Menüs angezeigt werden. Diese Einstellung ist nur wirksam, wenn Mega-Menü als Stil der Kategorie-Navigation gewählt wurde. Firmenlogo = Bilddatei auswählen, welche als Firmenlogo links oben im Shop angezeigt werden soll. Die gängigen Bildformate (PNG, JPG, etc.) sind zulässig.
Breadcrumbs (Header)	Stellt eine Breadcrumb-Navigation zur Verfügung. Klicken Sie auf Bearbeiten, um die Einstellungen vorzunehmen. Beim Scrollen der Seite fixieren = Aktivieren, um die Breadcrumb-Navigation beim Scrollen immer anzuzeigen. Auf der Startseite anzeigen = Aktivieren, um die Breadcrumb-Navigation auf der Startseite anzuzeigen. Im Bereich Mein Konto anzeigen = Aktivieren, um die Breadcrumb-Navigation auf der Mein Konto Seite anzuzeigen. In der Kasse anzeigen = Aktivieren, um die Breadcrumb-Navigation bei der Kaufabwicklung anzuzeigen. Auf Content-Kategorien anzeigen = Aktivieren, um die Breadcrumb-Navigation auf Kategorieseiten des Typs Content anzuzeigen.
Rechtliche Informationen (Footer)	Stellt die Anzeige der rechtlichen Informationen zur Verfügung. Klicken Sie auf Bearbeiten, um festzulegen, welche Elemente im Footer sichtbar sein sollen. Des Weiteren kann ein Widerrufsformular hochgeladen werden.

1.1. Elemente der Ceres-Startseite mit dem ShopBuilder bearbeiten

Im Vorschaubereich können Sie Elemente bearbeiten, um die Seite Ihren individuellen Bedürfnissen anzupassen.

Elemente im Vorschaubereich bearbeiten:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Der ShopBuilder wird geöffnet.
Zeigen Sie mit der Maus auf das Element, das Sie bearbeiten wollen.
→ Das Kontextmenü wird eingeblendet.
Klicken Sie auf Bearbeiten.
→ Die Einstellungen-Leiste wird eingeblendet.
Nehmen Sie Einstellungen an den Elementen vor. Beachten Sie dazu die Erläuterungen in Tabelle 1.
Speichern Sie die Einstellungen.
→ Die Startseite Ihres Webshops ist den Einstellungen entsprechend umgestaltet.

Ebenso können Sie Elemente auch wieder entfernen.

Elemente aus dem Vorschaubereich entfernen:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Der Vorschaubereich wird geöffnet.
Zeigen Sie mit der Maus auf das Element im Vorschaubereich, das Sie entfernen wollen.
→ Das Kontextmenü wird eingeblendet.
Klicken Sie auf Löschen, um das Element zu entfernen.
→ Das Element wird entfernt.
→ Die umliegenden Elemente gruppieren sich neu und ersetzen das gelöschte Element.
Speichern Sie die Einstellungen.
→ Die Startseite Ihres Webshops ist den Einstellungen entsprechend umgestaltet.

2. Designeinstellungen im ShopBuilder vornehmen

Durch einen Klick auf den Design-Button im Button öffnen Sie die Design-Menü. Hier können Sie globale Farbeinstellungen vornehmen und Schriftarten für Ihren Webshop auswählen oder hochladen.

2.1. Farbeinstellungen im ShopBuilder bearbeiten

Im ShopBuilder können Sie die Hauptfarben für alle Seiten Ihres Shops global verwalten.

Farben im ShopBuilder bearbeiten:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Der ShopBuilder wird geöffnet.
Klicken Sie auf Startseite.
→ Der Vorschaubereich der Startseite wird geöffnet.
Klicken Sie in der oberen Leiste auf Design.
→ Das Menü Design wird geöffnet.
Nehmen Sie die Einstellungen im Bereich Farben vor. Beachten Sie dazu die Erläuterungen in Tabelle 2.
Speichern Sie die Einstellungen.

Tabelle 2. Globale Farbeinstellungen im ShopBuilder
Element	Erläuterung
Primärfarbe	Wählen Sie die Primärfarbe Ihres Webshops. Diese bestimmt die Farbgebung der Buttons in Ihrem Webshop. Wählen Sie eine Farbe über den Colour Picker oder geben Sie einen Hexadezimalwert ein. *Hinweis:* Dieser Wert kann von Theme-Plugins für andere Farbgebungen verwendet werden.
Sekundärfarbe	Dieses Attribut verändert die Sekundärfarbe des Shops. Diese können Sie für die Farbgebung Ihrer Widgets verwenden. Wählen Sie eine Farbe über den Colour Picker oder geben Sie einen Hexadezimalwert ein. *Hinweis:* Dieser Wert kann von Theme-Plugins für andere Farbgebungen verwendet werden.
Farbe der Erfolgsbenachrichtigungen	Dieses Attribut verändert die Farbe der Erfolgsmeldungen im Shop. Wählen Sie eine Farbe über den Colour Picker oder geben Sie einen Hexadezimalwert ein. *Hinweis:* Dieser Wert kann von Theme-Plugins für andere Farbgebungen verwendet werden.
Farbe der Informationsbenachrichtigungen	Dieses Attribut verändert die Farbe der Hinweise im Shop. Wählen Sie eine Farbe über den Colour Picker oder geben Sie einen Hexadezimalwert ein. *Hinweis:* Dieser Wert kann von Theme-Plugins für andere Farbgebungen verwendet werden.
Farbe der Warnungsbenachrichtigungen	Dieses Attribut verändert die Farbe der Warnmeldungen im Shop. Wählen Sie eine Farbe über den Colour Picker oder geben Sie einen Hexadezimalwert ein. *Hinweis:* Dieser Wert kann von Theme-Plugins für andere Farbgebungen verwendet werden.
Farbe der Gefahrenbenachrichtigung	Dieses Attribut verändert die Farbe der Fehlermeldungen im Shop. Wählen Sie eine Farbe über den Colour Picker oder geben Sie einen Hexadezimalwert ein. *Hinweis:* Dieser Wert kann von Theme-Plugins für andere Farbgebungen verwendet werden.

2.2. Schriftart im ShopBuilder bearbeiten

Der ShopBuilder bietet ebenfalls die Möglichkeit, eine beliebige Schriftart einzubinden. Dazu kann entweder eine Schrift-URL eingefügt oder eine Schrift hochgeladen werden.

Schriftart bearbeiten:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Der ShopBuilder wird geöffnet.
Klicken Sie auf Startseite.
→ Der Vorschaubereich der Startseite wird geöffnet.
Klicken Sie auf Design.
→ Das Fenster Design wird geöffnet.
Nehmen Sie die Einstellungen im Bereich Schriften vor. Beachten Sie dazu die Erläuterungen in Tabelle 3.
Speichern Sie die Einstellungen.

Tabelle 3. Schriftart im ShopBuilder bearbeiten
Option	Erläuterung
Schrift-URL einfügen	Wählen Sie eine URL und fügen Sie die URL in die entsprechende Zeile (regulär, bold, italic oder *bold-italic*) ein.
Schrift hochladen	Hierzu müssen Sie eine Schriftart auf Ihrem Rechner gespeichert haben. Wählen Sie in der entsprechenden Zeile (regulär, bold, italic oder *bold-italic*) die gewünschte Datei aus.

3. Weitere Einstellungen vornehmen

Der ShopBuilder bietet ebenfalls die Möglichkeit, alle in der Ceres-Konfiguration möglichen Einstellungen vorzunehmen. Gehen Sie dazu wie folgt vor.

Gehen Sie zu CMS » ShopBuilder.
→ Der ShopBuilder wird geöffnet.
Klicken Sie auf Einstellungen.
→ Das Menü Plugin-Konfiguration wird geöffnet.
Nehmen Sie die Einstellungen vor. Beachten Sie dazu die Erläuterungen in Ceres einrichten.
Speichern Sie die Einstellungen.

Auswahl des Plugin-Sets im ShopBuilder

In der Dropdown-Liste kann ein Plugin-Set ausgewählt werden. Die Seitenvorschau zeigt dann die für das Plugin-Set vorgenommenen Einstellungen an (z.B. welche Artikel sichtbar sind).

4. Weitere Seiten im ShopBuilder erstellen

In der Übersicht des ShopBuilders gibt es die Möglichkeit, zusätzliche Seiten für die Startseite zu erstellen und zu benennen.

Seite erstellen:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Die Übersicht des ShopBuilders wird geöffnet.
Klicken Sie auf Neu.
→ Das Fenster Neue Seite erstellen wird geöffnet.
Geben Sie einen Namen ein.
Speichern Sie die Einstellungen.
→ Die neu erstellte Seite wird in der Übersicht angezeigt.

4.1. Inhalte im ShopBuilder umbenennen

Inhalte im ShopBuilder können jederzeit umbenannt werden.

Inhalt umbenennen:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Die Übersicht des ShopBuilders wird geöffnet.
Zeigen Sie mit der Maus auf den Inhalt, den Sie umbenennen möchten.
Klicken Sie auf den Button Weitere Optionen.
Klicken Sie auf Umbenennen.
→ Das Fenster Umbenennen wird geöffnet.
Wählen Sie einen beliebigen Namen für den Inhalt.
Speichern Sie die Einstellungen.

4.2. Seite im ShopBuilder löschen

Im ShopBuilder erstellte Seiten lassen sich auch wieder entfernen.

Seite löschen:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Die Übersicht des ShopBuilders wird geöffnet.
Zeigen Sie mit der Maus auf die Seite, die Sie löschen möchten.
Klicken Sie auf den Button Weitere Optionen.
Klicken Sie auf Löschen.
→ Das Fenster Löschen wird geöffnet.
Klicken Sie auf Löschen, um die Seite zu löschen.
→ Die Seite wird gelöscht.

4.3. Verknüpfung von im ShopBuilder erstellten Seiten zur Startseite lösen

Jede im ShopBuilder erstellte Seite ist automatisch mit der Startseite verknüpft. Diese Verknüpfung kann jedoch auch gelöst werden.

Verknüpfung lösen:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Die Übersicht des ShopBuilders wird geöffnet.
Zeigen Sie mit der Maus auf die Seite, deren Verknüpfung zur Startseite gelöst werden soll.
Klicken Sie auf Deaktivieren.
→ Die Verknüpfung zur Startseite wird gelöst.

4.4. Im ShopBuilder erstellte Seiten mit der Startseite verknüpfen

Eine gelöste Verknüpfung zwischen einer im ShopBuilder erstellten Seite und der Startseite kann wiederhergestellt werden.

Verknüpfung erstellen:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Die Übersicht des ShopBuilders wird geöffnet.
Zeigen Sie mit der Maus auf die Seite, die mit der Startseite verknüpft werden soll.
Klicken Sie auf Aktivieren.
→ Die ausgewählte Seite wird mit der Startseite verknüpft.

Die blaue Markierung zeigt an, dass eine Verknüpfung vorhanden ist.

4.5. Inhalte duplizieren

In der Übersicht des ShopBuilders können Inhalte dupliziert werden.

Inhalt duplizieren:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Die Übersicht des ShopBuilders wird geöffnet.
Zeigen Sie mit der Maus auf die Seite, deren Inhalt Sie duplizieren möchten.
Klicken Sie auf den Button Weitere Optionen.
Klicken Sie auf Inhalt duplizieren.
→ Das Fenster Inhalt duplizieren wird geöffnet.
Nehmen Sie die Einstellungen vor. Beachten Sie dazu die Erläuterungen in Tabelle 4.
Klicken Sie auf Inhalt duplizieren.
→ Der Inhalt wird dupliziert.

Tabelle 4. Inhalte duplizieren
Einstellung	Erläuterung
Neuer Name	Hier ist automatisch der ursprüngliche Name mit der Kennzeichnung (Kopie) eingefügt. Sie können den duplizierten Inhalt jedoch auch neu benennen.
Plugin-Set wählen	Wählen Sie ein Plugin-Set für den duplizierten Inhalt.
Sprache wählen	Wählen Sie eine Sprache für den duplizierten Inhalt.
Kategorie	Wählen Sie die Kategorie, in der der duplizierte Inhalt platziert werden soll.

5. Sprache wählen

Startseiten können mit verschiedenen Sprachen unabhängig voneinander angelegt werden.

Sprache wählen:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Die Übersicht des ShopBuilders wird geöffnet.
Wählen Sie in der Dropdown-Liste eine Sprache aus.
Klicken Sie auf Seite hinzufügen.
Geben Sie einen Namen für die Seite ein.
Speichern Sie die Einstellungen.
→ Die Spracheinstellung wird für die Seite automatisch gespeichert.

6. Mandantenvorschau anzeigen

Auf der Bearbeitungsseite ist es möglich, die erstellte Seite für die verschiedenen Mandanten anzusehen (Vorschau).

Mandantenvorschau anzeigen:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Die Übersicht des ShopBuilders wird geöffnet.
Wählen Sie in der Dropdown-Liste Mandant wählen einen Mandanten.
Wählen Sie eine Seite.
→ Die Seite wird für den gewählten Mandanten angezeigt.

7. Kategorien im ShopBuilder erstellen und bearbeiten

In der Übersicht des ShopBuilders werden links die Kategorien des Shops angezeigt. Dort können neue Kategorien als Ober- oder Unterkategorien angelegt werden und im Fenster Kategorie bearbeiten können diverse Einstellungen vorgenommen werden.

Kategorien im ShopBuilder erstellen und bearbeiten:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Die Übersicht des ShopBuilders wird geöffnet.
Klicken Sie unten im Kategoriebaum auf das Plus Neue Kategorie erstellen.
→ Das Fenster Neue Kategorie erstellen wird geöffnet.
Geben Sie einen Namen ein und wählen Sie Hauptseite für eine Hauptkategorie oder Unterseite für eine Unterkategorie.
Wenn Sie eine Unterseite erstellen möchten, klicken Sie im Bearbeitungsfenster auf die Kategorie, in der die Unterkategorie angelegt werden soll.
Klicken Sie auf Erstellen.
→ Die neue Kategorie wurde dem Kategoriebaum hinzugefügt und das Fenster Kategorie bearbeiten wird geöffnet.
Nehmen Sie die Einstellungen vor. Beachten Sie dazu die Erläuterungen in Tabelle 5.
Speichern Sie die Einstellungen.

Tabelle 5. Kategorie bearbeiten
Einstellung	Erläuterung
Allgemeine Einstellungen
Mandant wählen	Einen Mandanten aus der Dropdown-Liste wählen.
Sitemap anzeigen	Wählen, ob die Kategorie in die Sitemap aufgenommen werden soll.
In Linkliste anzeigen	Wählen, ob die Kategorie in der Linkliste angezeigt werden soll.
Mandant (Shop) spezifische Einstellungen
Mandant (Shop)	Einen Mandanten aus der Dropdown-Liste wählen.
Name	Der Name der Kategorie.
URL	Die URL der Kategorie.
Canonical	Ggf. die URL einer Kategorie eingeben, die den gleichen Inhalt enthält, um Duplicate Content zu verhindern.
Position	Zahl eingeben, um die Reihenfolge der Kategorien und Unterkategorien einer Kategorie der gleichen Ebene festzulegen.
Meta-Titel	Meta-Titel eintragen. SEO-Tipp: Auf die Länge des Titels achten.
Meta-Beschreibung	Eine Meta-Beschreibung mit maximal 350 Zeichen eingeben. Die Meta-Beschreibung wird von Suchmaschinen ausgewertet und ist daher besonders für die Startseite wichtig. SEO-Tipp: Die Meta-Beschreibung soll den wesentlichen Inhalt in einem Satz enthalten.
Meta-Keywords	Stichwörter eingeben, die potentielle Kunden in Suchmaschinen eingeben und die den Inhalt der Kategorie widerspiegeln.
Meta-Robots	Zwischen all, index, nofollow, noindex und nofollow, noindex wählen. Werte des Meta-Elements Robots werden von Suchmaschinen-Crawlern ausgewertet. Dem Crawler wird mit diesen Werten mitgeteilt, wie er mit der Seite und den Links auf dieser Seite verfahren soll. all = Webseite der Kategorie in den Suchmaschinenindex aufnehmen und Links auf der Seite folgen. index = In Suchmaschinenindex aufnehmen. nofollow = Links auf der Seite nicht folgen. noindex = Nicht in den Suchmaschinenindex aufnehmen. nofollow, noindex = Den Links nicht folgen und die Webseite der Kategorie nicht in den Suchmaschinenindex aufnehmen.

8. Kategorie-Einstellungen für einen Mandanten vornehmen

Im Bearbeitungsfenster einer Kategorie kann neben grundlegenden Einstellungen gewählt werden, welche Kategorien für den jeweiligen Mandanten aktiv oder inaktiv sein sollen. Die Einstellungen werden entsprechend im Kategoriebaum dargestellt.

Kategorie-Einstellungen für einen Mandanten vornehmen:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Die Übersicht des ShopBuilders wird geöffnet.
Wählen Sie in der Dropdown-Liste Mandant wählen einen Mandanten.
Klicken Sie im Kategoriebaum auf Kategorie bearbeiten.
→ Das Fenster Kategorie bearbeiten wird geöffnet.
Wählen Sie im Bereich Allgemeine Einstellungen den Mandanten, für den die Kategorie aktiv sein soll.
Speichern Sie die Einstellungen.
→ Die Kategorie ist für den gewählten Mandanten aktiv und im Kategoriebaum gelb gekennzeichnet. Ist eine Kategorie für den gewählten Mandanten inaktiv, wird diese im Kategoriebaum grau dargestellt. Ist für eine Kategorie kein Name oder keine Sprache hinterlegt, wird die Kategorie kursiv angezeigt.

9. Kategorien im ShopBuilder löschen

Kategorien können auch wieder gelöscht werden.

Kategorie löschen:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Der ShopBuilder wird geöffnet.
Klicken Sie im Kategoriebaum auf den Bearbeitungsstift der Kategorie, die Sie löschen möchten.
→ Das Fenster Kategorie bearbeiten wird geöffnet.
Klicken Sie oben auf den Löschen-Button.
→ Das Fenster Kategorie löschen wird geöffnet.
Klicken Sie auf Kategorie löschen.
→ Die Kategorie wird gelöscht.

10. Einen Header oder Footer im ShopBuilder erstellen

Im ShopBuilder können ein Header und ein Footer erstellt werden. Header und Footer sind global für den gesamten Webshop wirksam.

Einen Header oder Footer im ShopBuilder erstellen:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Die Übersicht des ShopBuilders wird geöffnet.
Klicken Sie im Abschnitt Header Elemente oder Footer Elemente auf Neu.
→ Das Fenster Neue Seite erstellen wird geöffnet.
Wählen Sie Header anlegen oder Footer anlegen.
Geben Sie einen Namen ein.
Wählen Sie entweder den Standard-Footer bzw. Standard-Header oder treffen Sie keine Auswahl.
Speichern Sie die Einstellungen.
→ Der Header oder der Footer wurde angelegt.
Klicken Sie auf Aktivieren, um den Header oder den Footer zu verknüpfen.

11. Den Header global bearbeiten

Die im Header vorgenommenen Einstellungen sind global wirksam. Für den Header stehen die Widgets Top Bar, Kategorie-Navigation und Breadcrumbs zur Auswahl.

Den Header global bearbeiten:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Die Übersicht des ShopBuilders wird geöffnet.
Klicken Sie auf den Header.
→ Die für den Header angelegte Seite wird geöffnet.
Ziehen Sie das gewünschte Widget per Drag&Drop in die Mitte.
Klicken Sie auf Bearbeiten.
→ Das entsprechende Bearbeitungsfenster wird geöffnet.
Nehmen Sie die Einstellungen vor. Beachten Sie dazu die Erläuterungen in Tabelle 1.
→ Die Einstellungen werden automatisch gespeichert.

12. Den Footer global bearbeiten

Die im Footer vorgenommenen Einstellungen sind global wirksam. Für den Footer steht zusätzlich das Widget Rechtliche Informationen zur Auswahl.

Den Footer global bearbeiten:

Öffnen sie das Menü CMS » ShopBuilder.
→ Die Übersicht des ShopBuilders wird geöffnet.
Klicken Sie auf den Footer.
→ Die für den Footer angelegte Seite wird geöffnet.
Ziehen Sie das gewünschte Widget per Drag&Drop in die Mitte.
Klicken Sie auf Bearbeiten.
→ Das entsprechende Bearbeitungsfenster wird geöffnet.
Nehmen Sie die Einstellungen vor. Beachten Sie dazu die Erläuterungen in Tabelle 1.
→ Die Einstellungen werden automatisch gespeichert.

13. Die Vorlage Standard-Header verwenden

Für den Header kann die Vorlage Standard-Header verwendet werden. Dort sind bereits einige Widgets voreingestellt, die bearbeitet werden können. Außerdem können weitere Widgets hinzugefügt werden. Bereits getätigte Einstellungen in der Ceres-Konfiguration bzw. in der Mehrsprachigkeit werden dabei beachtet.

Standard-Header als Vorlage verwenden:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Die Übersicht des ShopBuilders wird geöffnet.
Klicken Sie im Abschnitt Header-Elemente auf Neu.
→ Das Fenster Neue Seite erstellen wird geöffnet.
Geben Sie einen Namen ein und wählen Sie im Feld Vorlage den Standard-Header.
Speichern Sie die Einstellungen.
→ Die Seite wurde im Abschnitt Header-Elemente angelegt.
Klicken Sie auf die Seite.
→ Die Vorschau mit den Voreinstellungen für den Standard-Header wird geöffnet.
Um die Voreinstellungen zu ändern, klicken Sie im jeweiligen Widget auf Bearbeiten.
Nehmen Sie die Einstellungen vor. Beachten Sie dazu die Erläuterungen in Tabelle 1.

14. Die Vorlage Standard-Startseite verwenden

Für die Startseite kann die Vorlage Standard-Startseite verwendet werden. Dort sind bereits einige Widgets voreingestellt, die bearbeitet werden können. Außerdem können weitere Widgets hinzugefügt werden. Bereits getätigte Einstellungen in der Ceres-Konfiguration bzw. in der Mehrsprachigkeit werden dabei beachtet.

Standard-Startseite als Vorlage verwenden:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Die Übersicht des ShopBuilders wird geöffnet.
Klicken Sie im Abschnitt Inhalte für Startseite auf Neu.
→ Das Fenster Neue Seite erstellen wird geöffnet.
Geben Sie einen Namen ein und wählen Sie im Feld Vorlage die Standard-Startseite.
Speichern Sie die Einstellungen.
→ Die Seite wurde im Abschnitt Inhalte für Startseite angelegt.
Klicken Sie auf die Seite.
→ Die Vorschau mit den Voreinstellungen für die Standard-Startseite wird geöffnet.
Um die Voreinstellungen zu ändern, klicken Sie im jeweiligen Widget auf Bearbeiten.
Nehmen Sie die Einstellungen vor. Beachten Sie dazu die Erläuterungen in Tabelle 1.

15. Die Vorlage Standard-Footer verwenden

Für den Footer kann die Vorlage Standard-Footer verwendet werden. Dort sind bereits einige Widgets voreingestellt, die bearbeitet werden können. Außerdem können weitere Widgets hinzugefügt werden. Bereits getätigte Einstellungen in der Ceres-Konfiguration bzw. in der Mehrsprachigkeit werden dabei beachtet.

Standard-Footer als Vorlage verwenden:

Öffnen Sie das Menü CMS » ShopBuilder.
→ Die Übersicht des ShopBuilders wird geöffnet.
Klicken Sie im Abschnitt Footer-Elemente auf Neu.
→ Das Fenster Neue Seite erstellen wird geöffnet.
Geben Sie einen Namen ein und wählen Sie im Feld Vorlage den Standard-Footer.
Speichern Sie die Einstellungen.
→ Die Seite wurde im Abschnitt Footer-Elemente angelegt.
Klicken Sie auf die Seite.
→ Die Vorschau mit den Voreinstellungen für den Standard-Footer wird geöffnet.
Um die Voreinstellungen zu ändern, klicken Sie im jeweiligen Widget auf Bearbeiten.
Nehmen Sie die Einstellungen vor. Beachten Sie dazu die Erläuterungen in Tabelle 1.

16. Optimale Bildergößen für den ShopBuilder

In den Widgets Bilderbox und Bilderkarussell werden 4 verschiedene Seitenverhältnisse für Bilder verwendet. Diese sind davon abhängig, ob das Widget in voller Größe oder in einem Raster mit 2, 3 oder 4 Spalten eingebunden ist und welche Layout-Einstellung für diese Raster gewählt wurde.

Für Bilder-Widgets, die ohne Raster oder in einem Raster mit 2 Spalten mit der Layout-Option 50%:50% genutzt werden, ist das optimale Seitenverhältnis von Breite zu Höhe 3:1. Bei Änderungen in den Layout-Einstellungen ändert sich das Seitenverhältnis auf 2:1 (für 66,6%) und 1:1 (bei 33,3%).

Bei der Einbindung in ein Raster mit 3 Spalten mit der Layout Option 30%:30%:30% beträgt das optimale Seitenverhältnis von Breite zu Höhe 1,5:1. Je nach Layout-Einstellung ändert sich das Seitenverhältnis wie in der unten aufgeführten Tabelle beschrieben.

Wenn Bilder in einem Raster mit 4 Spalten eingebunden werden sollen, ändert sich das optimale Seitenverhältnis von Breite zu Höhe auf 1:1. Das Layout für dieses Raster kann nicht angepasst werden.

Tabelle 6. Optimale Bildergrößen für ShopBuilder Widgets
Anzahl der Rasterspalten	Layout-Einstellung (%)	Seitenverhältnis	Beispielgröße
Kein Raster	-	3:1	1200x400px
2	50%	3:1	1200x400px
2	66,6%	2:1	1200x600px
2	33,3%	1:1	1200x1200px
3	33,3%	1,5:1	1200x800px
3	50%	2:1	1200x600px
3	25%	1:1	1200x1200px
3	66,6% (gestapelt)	1,5:1	1200x800px
3	33,3% (gestapelt)	1,5:1	1200x800px
4	-	1:1	1200x1200px

17. Skripte im Text-Widget

Um JavaScript-Skripte im Webshop nutzen zu können, können Sie diese mit einem <script2>-Tag im Text-Widget des ShopBuilders verbauen. Dieses Tag wird wie ein herkömmliches <script>-Tag verwendet. Die Dokumentation des für den ShopBuilder verwendeten Frameworks ist hier zu finden.

<script2 src="https://momentjs.com/downloads/moment.js"></script2>

Erklärung: Hier wird ein <script2>-Tag mit dem src Attribut verwendet, um ein externes Skript zu laden.

<script2>
    var today = moment().format('dddd');
    alert("today is " + today);
</script2>

Erklärung: Innerhalb des script2-Tags wird JavaScript-Code geschrieben. Es wird hier auf moment.js zugegriffen, welches im vorherigen Skript geladen wurde.

Tipp: Externe Skripte können im Webspace hochgeladen und über den ShopBuilder eingebunden werden. Im Webspace kann die URL des Skripts abgerufen werden.