Comarch Webshop – Layout Assistent

Einleitung

Eines der Schlüsselelemente, die zum Erfolg in der E-Commerce-Branche beitragen, ist die visuelle Gestaltung des Webshops. Sie beeinflusst in hohem Maße den Gesamteindruck der Benutzer und ihren Kaufprozess. Mit Hilfe des Comarch Webshops – Layout Assistent können Webshopinhaber von Webshop ihre eigene, einzigartige Vorlage erstellen, die an ihre Vorlieben und die Bedürfnisse der Benutzer angepasst wird.

Der Assistent ist unter dem Link verfügbar: Comarch Webshop Vorlagen-Assistent. Der Link befindet sich im Verwaltungsbereich das Erscheinungsbild des Webshops/ Layout Assistent.

Anwendung

Der Assistent ist ein intuitives Werkzeug zur Erstellung von Vorlagen. Seine Bedienung erfordert keine technischen oder programmiertechnischen Kenntnisse. Alles wird auf der Website erledigt, wo man das Erscheinungsbild Ihres Webshops aus vorgefertigten Elementen per “Ziehen und Ablegen” gestalten kann. Darüber hinaus wird die erstellte Vorlage für die Anzeige auf verschiedenen Geräten angepasst (RWD).

Mit dem Assistenten gestalten Sie alle notwendigen Bereiche Ihres Webshops:

  • Startseite,
  • Artikelliste,
  • Artikeldetails,
  • Einkaufskorb.

Nach der Erstellung das Gerüst des Webshops, ist es an der Zeit, das visuelle Design der Vorlage zu ändern. Man kann die Farben der Elemente auf der Website, die Icons und die Schriftart frei ändern.

Wer kann die Option nutzen?

Um dieses Tool nutzen zu können, muss man über Folgendes verfügen:

  • Comarch Webshop muss die Prozesse B2C unterstützen,
  • eine Bildschirmbreite von mehr als 1280 px, wobei 1920 px empfohlen werden,
  • einen der Webbrowser in der aktuellen Version.

Tipp
Comarch Webshop Layout Assistent nur in der Browserversion verfügbar.

Los geht’s!

Wie gestalte ich ein Vorlagenlayout?

Um mit der Erstellung einer Vorlage zu beginnen, soll man in die Seite von Layout Assistent gehen. Es wird eine Willkommensnachricht angezeigt. Nach dem Klicken auf “Weiter”, kann man eine neue Vorlage erstellen oder eine von mehreren vorgefertigten Vorlagen bearbeiten.

Wurde hingegen bereits ein Projekt erstellt, wird eine Schaltfläche angezeigt, mit der man die Vorlage vervollständigen oder ein neues Projekt starten kann.

Mit der Option Neue Vorlage kann man eine neue Topaz-Vorlage von Grund auf nach Ihren individuellen Vorstellungen erstellen.

Tipp
Vorlage Topaz – Demo ist eine vorgefertigte Vorlage, die man direkt aus dem Bereich Erscheinungsbild des Webshops/Vorgefertige Vorlage von Comarch installieren kann.

Die anderen sechs zur Auswahl stehenden Optionen sind vorgefertigte und bearbeitbare Versionen der Topaz-Vorlage. Das bedeutet, dass man keine neue Vorlage von Grund auf erstellen muss, weil man eine der vorgefertigten Vorlagen auswählen und diese dann leicht an Ihre Bedürfnisse anpassen kann. Doppelklicken Sie auf die ausgewählte Kachel, um weiterzugehen.

In drei kurzen Schritten werden Sie mit den Grundfunktionen des Assistenten vertraut gemacht. Anschließend können Sie weitere Änderungen an der Vorlage vornehmen oder sofort die vorbereitete Version der Topaz-Vorlage erstellen.

 

Womit soll man anfangen?

Wählen Sie die Sprachversion des Assistenten und beginnen Sie mit der Arbeit an Ihrer Vorlage. Zur Auswahl stehen folgende Versionen: Polnisch, Englisch, Deutsch und Französisch. Die Sprache wird durch Anklicken des Pfeils neben der Flagge und der Sprachbezeichnung in der unteren linken Ecke ausgewählt. Bei der Vorschau Ihrer Arbeit im Vollbildmodus wird die ausgewählte Sprache beibehalten und die Vorlage wird in der ausgewählten Sprachversion angezeigt.

 

 

Sobald Sie eine Sprachversion für Ihren Assistenten ausgewählt haben, sollten Sie Ihrer zukünftigen Vorlage einen Namen geben. Klicken Sie dazu auf Ändern und geben Sie den Namen in der oberen linken Ecke ein, wobei Sie den Namen durch “Topaz (2022.5)” ersetzen. Dieser Name ist sichtbar, wenn die Vorlage in das Administrationspanel importiert wird und wenn die Vorlage in eine XML-Datei exportiert wird, zusammen mit dem Datum und der Uhrzeit ihrer Erstellung.

Schritt 1 – Startseite

In diesem Abschnitt soll man das Erscheinungsbild der Startseite unseres Comarch Webshops gestalten. Die Startseite kann aus den folgenden Elementen bestehen:

  • Kopfzeile,
  • Banner,
  • Empfohlen,
  • Newsletter,
  • Blog,
  • Hersteller – Slider,
  • Marken – Slider,
  • Textelement,
  • Infobanner,
  • Fußzeile.

 

Nach der Erweiterung der einzelnen Abschnitte sieht man die verfügbaren Elemente:

Mit der Methode “Ziehen und Ablegen” kann man die ausgewählten Elemente in den rechten Bereich verschieben:

Gehen Sie mit den übrigen Elementen analog vor.

Kopfzeile

Der Abschnitt “Kopfzeile” enthält vier Ansichten. Der dritte Bereich enthält ein vertikales Menü, das standardmäßig drei Ebenen von Produktkategorien anzeigt. Die erste Ebene ist in Bezug auf die Anzahl der angezeigten Kategorien weiter konfigurierbar. Zu diesem Zweck wurde im Menü Ansicht des Webshops/ Einstellungen/ Vorlageneinstellungen ein neuer Parameter hinzugefügt: Ansicht der ersten Ebene des Hauptmenüs (für die dritte Kopfzeilenart) mit den folgenden Optionen:

  • bequem (standardmäßig eingestellt, so dass maximal 10 Kategorien in der ersten Menüebene angezeigt werden können)
  • und kompakt (zeigt bis zu 16 Kategorien in der ersten Menüebene an). Diese Kopfzeilenart wird mit einem Banner (mit empfohlenen Abmessungen von 1118px x 534px) kombiniert, das nur auf der Startseite sichtbar ist.

Alle im Layout Assistent verfügbaren Kopfzeilenarten verfügen über Funktion, so genannt geklebte Kopfzeile. Wenn Sie auf der Webshop-Seite nach unten scrollen, ist am oberen Rand des Bildschirms immer eine Leiste mit einigen Elementen der Kopfzeile (z. B. Kategoriemenü und Suchmaschine) sichtbar. Auf diese Weise kann die Person, die das Angebot des Webshop durchsucht, überall auf der Seite auf eine verkürzte Version der Kopfzeile zugreifen.

Im Bereich “Banner” können Sie eine von sechs Optionen für die Darstellung von Bannern auswählen.

 

Empfohlen

Der Abschnitt “Empfohlen” enthält zusätzliche Optionen zur Einstellung. In der Menüliste unter der Schaltfläche “Typ ändern” können Sie auswählen, welche Art von Produkten Sie in diesem Bereich anzeigen möchten (einschließlich Neu, Meist angezeigt, Ausverkauf, Empfohlen). Nach der Änderung des Abschnittstyps wird er entsprechend benannt, wenn die Vorlage in Ihren Webshop hochgeladen wird:

Wenn Sie den Mauszeiger über diesen Bereich bewegen und Optionen wählen, können Sie außerdem die Anzahl der angezeigten Waren festlegen (maximal 50).

 

Bei der Erstellung der Topaz-Vorlage im Comarch Layout Assistent kann nach dem Hinzufügen des Bereichs  empfohlene Artikel der Typ der angezeigten Produkte festgelegt werden. Der Name des Abschnitts hängt vom angegebenen Typ ab und bezieht sich auf diesen. Der angegebene Name kann in den Vorlagenübersetzungen geändert werden. Darüber hinaus ist jeder ausgewählte Typ mit allen Produkten des angegebenen Typs verknüpft.

Newsletter

Im Abschnitt “Newsletter” können Sie eine ausgewählte Option für die Abonnenten hinzufügen.

Eine davon hat die Form eines Einblendfensters (Pop-up), das ausschließlich auf der Startseite des Webshops (Newsletter-3) angezeigt wird. Zusätzlich ist in der Browserversion der Vorlage ein 275px x 475px großes Banner (in der mobilen Version nicht verfügbar) im Newsletter in Popup-Form sichtbar. Alle im neuen Newsletter verfügbaren Texte sind in den Einstellungen der Vorlage im Menü Ansicht des Webshops/ Einstellungen/ Banner/ Newsletter-Banner editierbar. Dieser Typ von Newsletter kann gleichzeitig mit den anderen in der Topaz-Vorlage verfügbaren Newsletter-Versionen verwendet werden.

Hersteller-Slider

Der Abschnitt “Hersteller-Slider” ermöglicht es Ihnen, zwei Ansichten des Hersteller Sliders in die Vorlage einzufügen. Unter der Schaltfläche Optionen kann man eine von drei Anzeigearten wählen: kein Verblassen (das hinzugefügte Logo behält die ursprünglichen Farben bei), Verblassen (das hinzugefügte Logo ist grau, die Farbe erscheint, wenn der Mauszeiger über das Logo bewegt wird), Leuchten (wenn der Mauszeiger über das Logo bewegt wird, erscheint eine Lichtanimation). Die Logos der Hersteller, die aus dem ERP-System importiert wurden, werden auf den Slidern angezeigt. Nach dem Klicken auf das ausgewählte Logo wird eine Liste aller Waren angezeigt, für die ein bestimmter Hersteller eingetragen ist. Abschnitte können in der Vorlage überall auf der Startseite, den Warenlisten- und Warendetailseiten hinzugefügt werden.

Marken-Slider

Der Abschnitt “Marken-Slider” ermöglicht es Ihnen, zwei Ansichten des Hersteller Sliders in die Vorlage einzufügen. Unter der Schaltfläche Optionen kann man eine von drei Anzeigearten wählen: kein Verblassen (das hinzugefügte Logo behält die ursprünglichen Farben bei), Verblassen (das hinzugefügte Logo ist grau, die Farbe erscheint, wenn der Mauszeiger über das Logo bewegt wird), Leuchten (wenn der Mauszeiger über das Logo bewegt wird, erscheint eine Lichtanimation).Die Logos der Hersteller, die aus dem ERP-System importiert wurden, werden auf den Schiebereglern angezeigt. Nach dem Klicken auf das ausgewählte Logo wird eine Liste aller Waren angezeigt, für die eine bestimmte Marke eingetragen ist. Abschnitte können in der Vorlage überall auf der Startseite, den Warenlisten und Warendetail hinzugefügt werden.

Textelement

Mit dem Textelement können Sie eine längere Beschreibung einfügen, die auf der Startseite des Comarch Webshops angezeigt wird. Im Comarch Layout Assistent stehen zwei Optionen zur Auswahl:

  • Textelement nur mit Text,
  • Textelement mit der Möglichkeit, ein Foto hinzuzufügen

Der Text wird durch Bearbeiten des Textobjekts in den Vorlageneinstellungen eingegeben: Ansicht des Webshops/ Einstellungen/ Erweiterte Einstellungen bearbeiten/ Objekte:

  • text-el-no-photo-mp-1 – Element ohne Bild,
  • text-el-photo-mp-2 – Element mit einem Bild.

Nach der Auswahl aller erforderlichen Abschnitte sollte die Startseite fertig sein. Man kann das Ergebnis der Arbeit ansehen, indem man oben rechts auf Vorschau klickt. Eine mobile und eine Desktop-Vorschau sind verfügbar. Eine mobile und eine Desktop-Vorschau sind verfügbar.

Die Startseite benötigt zwei grundlegende Elemente: eine Kopfzeile und eine Fußzeile. Die anderen Elemente sind nicht obligatorisch.

Infobanner

Mit dem Infobanner können Sie die Vorteile eines Einkaufs in Ihrem Webshop übersichtlich darstellen. Diese beziehen sich auf die Bereiche Lieferung, Qualität und Kundenkontakt. Sie können das Banner nur auf der Startseite oder auf allen Seiten einfügen.

Der Bereich Entdecke Comarch Webshop unterscheidet sich in der Präsentation und den Elementen zwischen den Bannern und enthält:

  • info-banner-1 – Element mit Icons und Unterschrift
    • Schnelle Lieferung,
    • Qualitätssicherung,
    • Selbstabholung,
    • Reklamationen,
    • Warenrücksendungen.

  • info-banner-1 – Element mit Icons und kurzer Information
    • Ekspresslieferung
    • kostenlose Lieferung
    • Kundendienst


  • info-banner-2 – Element mit Icons und kurzer Beschreibung
    • Ekspresslieferung
    • kostenlose Lieferung
    • Contact Zone

Fußzeile

Der Abschnitt “Fußzeile” enthält drei Ansichten zum Auswahl.

Jede Ansicht zeigt statische Seiten, die im Bereich Shop Erscheinungsbild/ Einstellungen/ Kopf- und Fußzeile verwaltet werden können. Für jeden Abschnitt wird der Name angezeigt, der im Panel erstellt wurde. Die Fußzeile enthält auch Informationen über die Art der im Webshop präsentierten Preise (Brutto oder Netto) und die Nachricht @Comarch SA 2022. All rights reserved Powered by Comarch Webshop. Außerdem ist es möglich, Links zu sozialen Medien und deren Icons in der Fußzeile zu platzieren. In der dritten Fußzeile kann man Icons der Lieferanten und der im Webshop verwendeten Zahlungsformen hinzufügen.

Schritt 2 – Artikelliste

Der nächste Schritt ist die Erstellung einer Liste der Waren. Um das zu tun, sollte man die Liste entrollen, und dann Artikelliste auswählen, wie auf dem Bild unten angezeigt:

Wie bei der Startseite kann man das Aussehen der Artikelliste konfigurieren. Außerdem kann man die Anzahl der Waren angeben, die in der Liste angezeigt werden sollen (maximal 50):

Im Layout Assistent gibt es 4 Ansichten der Artikelliste:

Wenn man den Mauszeiger über ein Produkt in der Artikelliste bewegt, kann man jetzt das Foto in ein zweites Foto ändern. Dies geschieht nur, wenn dem Produkt im ERP-System mindestens zwei Fotos zugeordnet sind.

Tipp
Wir empfehlen, Produktbilder mit weißem Hintergrund hinzuzufügen.

In einigen Ansichten der Artikelliste ist die Schaltfläche zum Hinzufügen zum Vergleich und zur Bewertung sichtbar, ohne dass man sich im Webshop anmelden muss.

In der Artikelliste wird außerdem ein Tooltip neben dem Produktnamen eingefügt, der, wenn der Mauszeiger über den Produktnamen bewegt wird, den vollständigen Inhalt anzeigt (im Falle langer Namen).

Schritt 3 – Artikeldetails

Nach der Erstellung der Warenliste geht es an die Erstellung der Warendetails.

 

Tipp
Auf jeder Seite des Webshops kann man unterschiedliche Bereiche für empfohlene Artikel mit unterschiedlichen Typen einstellen (z. B. die empfohlenen Artikel können in den Artikeldetails anders angezeigt werden als in der Artikelliste).

Schritt 4 – Warenkorb

Nach der Erstellung der Artikeldetails kann man zur Auswahl der Warenkorbversion übergehen, die im Webshop verfügbar ist.

Im Layout Assistent gibt es zwei Versionen des Warenkorbs:

  • Warenkorb 4 Schritt,
  • Warenkorb 3 Schritt.

Anschließend kann man das Aussehen der Vorlage ändern. In diesem Zweck sollte man auf die Registerkarte Stile gehen.

Stile

Wie kann ich Farben, Schriftarten und Symbole ändern?

Nach dem Hinzufügen von Seitenelementen kann man zusätzlich eine Vorschau anzeigen, wie zukünftige Vorlage aussehen wird. Gehen Sie dazu auf die Registerkarte Stile.

 

Außerdem kann man auf der Registerkarte Stile das Aussehen der Vorlage ändern. Folgendes kann geändert werden:

  • Farbthema,
  • Schriftart,
  • Icons.

Farbendesign

Um die Farbe der Vorlage zu ändern, gehen Sie bitte zum Abschnitt Farbendesign, wo 6 vorgefertigte Design für Sie zum Auswahl stehen.

Tipp
In der aktuellen Version des Layout Assistenten wurde ein neues, dunkles Farbdesign hinzugefügt.

Jedes Thema kann nach den eigenen Wünschen bearbeitet werden. Die Farbe kann einzelner Elemente geändert werden (z. B. den Seitenhintergrund, den Kopfzeilenhintergrund, den Produktnamen oder sogar die Sekundärtextfarbe im Newsletter). Ihre Änderungen werden gespeichert, nach dem Klicken auf Speichern. Wenn Sie mit den vorgenommenen Änderungen nicht zufrieden sind, können Sie die Standardeinstellungen für das Farbdesign wiederherstellen, indem Sie auf die Schaltfläche Wiederherstellen klicken.

Es besteht auch die Möglichkeit, eine hexadezimale Farbnotation einzugeben. Die hexadezimale Farbnotation für die einzelnen Abschnitte der Vorlage ist bei der Bearbeitung des ausgewählten Farbendesign verfügbar.

Schriftart

Je nach Bedarf besteht es die Möglichkeit vom Auswahl der Schriftart. Wir haben 13 verschiedene Typen für unsere Kunden zur Verfügung gestellt. Unter dem Namen jedes Typs finden Sie ein Beispiel für sein Aussehen in verschiedenen Formaten.

 

Icons

Das letzte Element, das man auf der Registerkarte Stile ändern kann, ist das Aussehen der Symbole. Es stehen 3 verschiedene Symbole zur Auswahl. Außerdem kann man wählen, in welcher Form das Korbsymbol angezeigt wird (Tasche, Einkaufswagen oder Warenkorb) und der Lader.

Tipp
Von nun an kann man den Typ des Laders ändern, indem Sie einen der 5 oben gezeigten Vorschläge auswählen.

Vorlage erstellen und herunterladen

Nach dem Entwerfen des Aussehens von Vorlage kann man sie über die Schaltfläche Erstellen in der oberen rechten Ecke generieren und auf die Festplatte herunterladen:

 

Neben der Schaltfläche Erstellen ist auch die Option Vorlage importieren verfügbar, mit der eine zuvor gespeicherte Vorlage von der Festplatte hochgeladen und erneut bearbeitet werden kann.

Wenn die Vorlage korrekt erstellt wurde, wird eine Meldung angezeigt, die darüber informiert, und die Datei wird heruntergeladen.

Die heruntergeladene Vorlage sollte in Comarch Webshop unter Erscheinungsbild des Webshops/ Vorlage aus Layout Assistent importieren importiert werden.

Die Topaz-Vorlage enthält Information über den Zeitpunkt, zu dem die Vorlage im Assistenten erstellt wurde. Diese Information ist im Verwaltungsbereich im Menü zu finden: Erscheinungsbild des Webshops/ Einstellungen/ Mehr (drei Punkte), wo Sie Erweiterte Einstellungen bearbeiten und dann wieder Mehr/ HTML bearbeiten wählen sollten. Wählen Sie dann _layout.html. aus der Liste der Dateien. Änderungsinformationen, einschließlich des Zeitpunkts der letzten Änderung, finden Sie oberhalb des Fensters “Datei bearbeiten”. Wenn die Datei nicht geändert wurde, entspricht die Zeit dem Zeitpunkt, zu dem die Vorlage im Assistenten erstellt wurde.

Wenn die obligatorischen Elemente der Vorlage fehlen, kann die Vorlage nicht generiert werden. Die Schaltfläche Erstellen ist dann ausgegraut und in der rechten unteren Ecke erscheint die Meldung “Vervollständigen Sie erforderliche Elemente in der Vorlage “. Abschnitte, in denen ein Element nicht ausgewählt wurde, werden mit einem entsprechenden Symbol angezeigt.

 

Im Layout Assistent gibt es auch die Möglichkeit, bei der Vorlagenerstellung rückwärts zu gehen, wobei wir bis zu 30 Schritte rückwärts unterstützen. Darüber hinaus kann man auch einen Schritt nach vorne machen. Alle Änderungen an Elementen, Informationen über Stile, Schriftarten und Symbole sowie der Name der Vorlage werden gespeichert.

Aktualisierung der Vorlage

Im Layout Assistent gibt es eine Option zur Aktualisierung früherer Versionen der Vorlage. Um die gesamte Vorlage zu aktualisieren, sollte man die vorherige Vorlagendatei in den Layout Assistenten hochladen wie in der unten Anweisung:

  • Wenn die Assistentenseite startet, wählen Sie die Option: Neuen Entwurf erstellen,
  • Wählen Sie Neue Vorlage,
  • Wählen Sie in der rechten oberen Ecke die Option Vorlage importieren,

  • Importieren Sie dann die zu aktualisierende Vorlagendatei. Nach dem korrekten Importieren die Vorlage erhalten Sie eine Rückmeldung:

  • Nach dem Hochladen die Vorlage zur Aktualiesierung verwenden Sie die Option Erstellen.

So lassen sich ältere Topaz-Vorlagen leicht auf die aktuelle Version aktualisieren.

Wiederherstellung des Warenkorbs für nicht eingeloggte Kunden

Die Topaz-Vorlage stellt den Warenkorb für nicht eingeloggte Kunden wieder her. Nach dem Verlassen der Seite oder dem Ausschalten des Browsers sieht ein nicht eingeloggter Kunde, der in den Webshop zurückkehrt, die zuvor in den Warenkorb gelegten Waren. Dieser Prozess funktioniert durch die Speicherung von Informationen in Cookies.

Mehr Informationen

Weitere Informationen finden Sie im Artikel Anpassungen des Layouts.

War dieser Artikel hilfreich?