Skip to main content

Shop Builder einrichten

Der Shop Builder 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.

Versionsvoraussetzungen für den Shop Builder

Der Shop Builder 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 Shop Builders

Zum gegenwärtigen Zeitpunkt kann ausschließlich die Startseite Ihres Ceres Webshops über den Shop Builder bearbeitet werden. Der Funktionsumfang des Shop Builders wird nach und nach erweitert und in Zukunft wird es möglich sein, des gesamten Ceres Shop darüber zu bearbeiten.

Anzeigen der mit dem Shop Builder erstellten Startseite

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

1. Ceres-Startseite mit dem Shop Builder bearbeiten

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

Elemente zum Vorschaubereich hinzufügen:

  1. Öffnen Sie das Menü CMS » Shop Builder.
    → Der Shop Builder wird geöffnet.

  2. Klicken Sie auf Startseite.
    → Der Vorschaubereich der Startseite wird geöffnet.

  3. 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.

  4. Speichern Sie die Einstellungen.
    → Die Startseite Ihres Webshops wird mit den gewählten Elementen dargestellt.

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

Tabelle 1. Elemente des Shop Builders
Element Erläuterung

Struktur-Elemente

2 Felder

Stellt ein Strukturelement mit 2 Feldern 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 Felder.

3 Felder

Stellt ein Strukturelement mit 3 Feldern 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 Felder. Bei gestapelten Verhältnissen werden 2 Felder übereinander angezeigt.

4 Felder

Stellt ein Strukturelement mit 4 Feldern zur Verfügung, die mit den unten aufgeführten Widgets befüllt werden können. Das Größenverhältnis der Felder ist nicht anpassbar.

Widgets

Titelleiste

Dieses Widget 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.

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.

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.

1.1. Elemente der Ceres-Startseite mit dem Shop Builder bearbeiten

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

Elemente im Vorschaubereich bearbeiten:

  1. Öffnen Sie das Menü CMS » Shop Builder.
    → Der Shop Builder wird geöffnet.

  2. Zeigen Sie mit der Maus auf das Element, das Sie bearbeiten wollen.
    → Das Kontextmenü wird eingeblendet.

  3. Klicken Sie auf Bearbeiten.
    → Die Einstellungen-Leiste wird eingeblendet.

  4. Nehmen Sie Einstellungen an den Elementen vor. Beachten Sie dazu die Erläuterungen in Tabelle 1.

  5. 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:

  1. Öffnen Sie das Menü CMS » Shop Builder.
    → Der Vorschaubereich wird geöffnet.

  2. Zeigen Sie mit der Maus auf das Element im Vorschaubereich, das Sie entfernen wollen.
    → Das Kontextmenü wird eingeblendet.

  3. 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.

  4. Speichern Sie die Einstellungen.
    → Die Startseite Ihres Webshops ist den Einstellungen entsprechend umgestaltet.

2. Farbeinstellungen im Shop Builder bearbeiten

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

Farben im Shop Builder bearbeiten:

  1. Öffnen Sie das Menü CMS » Shop Builder.
    → Der Shop Builder wird geöffnet.

  2. Klicken Sie auf Startseite.
    → Der Vorschaubereich der Startseite wird geöffnet.

  3. Klicken Sie auf Globale Farbeinstellungen.
    → Das Menü Globale Farbeinstellungen bearbeiten wird geöffnet.

  4. Nehmen Sie die Einstellungen vor. Beachten Sie dazu die Erläuterungen in Tabelle 2.

  5. Speichern Sie die Einstellungen.

Tabelle 2. Globale Farbeinstellungen im Shop Builder
Element Erläuterung

Primary colour

Dieses Attribut verändert die Primärfarbe des Shops. 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.

Secondary colour

Dieses Attribut verändert die Sekundärfarbe des Shops. 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.

Success colour

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.

Information colour

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.

Warning colour

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.

Danger colour

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.

3. Schriftart im Shop Builder bearbeiten

Der Shop Builder bietet ebenfalls die Möglichkeit, eine beliebige Schriftart auszuwählen. Dazu kann entweder eine Schrift-URL eingefügt oder eine Schrift hochgeladen werden.

Schriftart bearbeiten:

  1. Öffnen Sie das Menü CMS » Shop Builder.
    → Der Shop Builder wird geöffnet.

  2. Klicken Sie auf Startseite.
    → Der Vorschaubereich der Startseite wird geöffnet.

  3. Klicken Sie auf Design.
    → Das Fenster Design wird geöffnet.

  4. Nehmen Sie die Einstellungen im Feld Schriften vor. Beachten Sie dazu die Erläuterungen in Tabelle 3.

  5. Speichern Sie die Einstellungen.

Tabelle 3. Schriftart im Shop Builder bearbeiten
Option Erläuterung

Schrift-URL einfügen

Wählen Sie eine URL und fügen Sie diese 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.

4. Weitere Einstellungen vornehmen

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

  1. Gehen Sie zu CMS » Shop Builder.
    → Der Shop Builder wird geöffnet.

  2. Klicken Sie auf Einstellungen.
    → Das Menü Plugin-Konfiguration wird geöffnet.

  3. Nehmen Sie die Einstellungen vor. Beachten Sie dazu die Erläuterungen in Ceres einrichten.

  4. Speichern Sie die Einstellungen.

Auswahl des Plugin Sets im Shop Builder
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).

5. Weitere Seiten im Shop Builder erstellen

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

Seite erstellen:

  1. Öffnen Sie das Menü CMS » Shop Builder.
    → Die Übersicht des Shop Builders wird geöffnet.

  2. Klicken Sie auf Seite hinzufügen.
    → Das Fenster Seitenname öffnet sich.

  3. Geben Sie einen Namen ein.

  4. Speichern Sie die Einstellungen.
    → Die neu erstellte Seite wird in der Übersicht angezeigt.

5.1. Seite im Shop Builder bearbeiten

Zurzeit lässt sich in der Übersicht des Shop Builders lediglich der Name einer Seite bearbeiten. Zukünftig werden jedoch noch weitere Einstellungen hinzukommen.

Seitenname bearbeiten:

  1. Öffnen Sie das Menü CMS » Shop Builder.
    → Die Übersicht des Shop Builders wird geöffnet.

  2. Klicken Sie auf Bearbeiten, um den Seitennamen zu bearbeiten.

  3. Wählen Sie einen beliebigen Namen für die Seite.

  4. Speichern Sie die Einstellungen.

5.2. Seite im Shop Builder löschen

Im Shop Builder erstellte Seiten lassen sich auch wieder entfernen.

Seite löschen:

  1. Öffnen Sie das Menü CMS » Shop Builder.
    → Die Übersicht des Shop Builders wird geöffnet.

  2. Klicken Sie auf Löschen, um eine Seite zu löschen.
    → Die Seite wird gelöscht.

5.3. Verknüpfung von im Shop Builder erstellten Seiten zur Startseite lösen

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

Verknüpfung lösen:

  1. Öffnen Sie das Menü CMS » Shop Builder.
    → Die Übersicht des Shop Builders wird geöffnet.

  2. Wählen Sie die Seite, deren Verknüpfung zur Startseite gelöst werden soll.

  3. Klicken Sie auf Verknüpfung erstellen/lösen.
    → Die Verknüpfung zur Startseite wird gelöst.

5.4. Im Shop Builder erstellte Seiten mit der Startseite verknüpfen

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

Verknüpfung erstellen:

  1. Öffnen Sie das Menü CMS » Shop Builder.
    → Die Übersicht des Shop Builders wird geöffnet.

  2. Wählen Sie die Seite, die mit der Startseite verknüpft werden soll.

  3. Klicken Sie auf Verknüpfung erstellen/lösen.
    → Die ausgewählte Seite wird mit der Startseite verknüpft.

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

6. Sprache wählen

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

Sprache wählen:

  1. Öffnen Sie das Menü CMS » Shop Builder.
    → Die Übersicht des Shop Builders wird geöffnet.

  2. Wählen Sie in der Dropdown-Liste eine Sprache aus.

  3. Klicken Sie auf Seite hinzufügen.

  4. Geben Sie einen Namen für die Seite ein.

  5. Speichern Sie die Einstellungen.
    → Die Spracheinstellung wird für die Seite automatisch gespeichert.

7. Mandantenvorschau anzeigen

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

Mandantenvorscheu anzeigen:

  1. Öffnen Sie das Menü CMS » Shop Builder.
    → Die Übersicht des Shop Builders wird geöffnet.

  2. Wählen Sie eine Seite.
    → Die gewählte Seite wird geöffnet.

  3. Wählen Sie in der Dropdown-Liste Mandant für Vorschau den gewünschten Mandanten.
    → Die erstellte Seite wird für den gewählten Mandanten angezeigt.

Zum Seitenanfang