Layout Assistent

Einleitung

Eines der Schlüsselelemente, die zum Erfolg in der E-Commerce-Branche beitragen, ist das Layout und das Design des Onlineshops. Es ist für deine Kunden der erste Eindruck und beeinflusst in hohem Maße ihre gesamte Benutzererfahrung und den Kaufprozess. Mithilfe des Comarch Layout Assistenten (auch Webshop-Assistenten) haben Betreiber eines Webshops die Möglichkeit, ihre eigene individuelle Vorlage für ihr Website-Layout zu erstellen. So kannst du effektiv auf die Vorlieben und Bedürfnisse deiner Benutzer eingehen.

Die wesentlichen Vorteile des Comarch Layout Assistenten sind:

  • kostenlos für Comarch Webshop-Kunden,
  • die erstellte Vorlage kann auf verschiedenen Geräten (RWD) dargestellt werden,
  • intuitive Bedienung ohne technische Kenntnisse – es ist lediglich ein Browser notwendig.
Tipp
Der Layout Assistent ist unter folgendem Link verfügbar: Comarch Webshop-Assistenten.

Seit Version 2019.6 kann der Layout Assistent auch direkt über den Administrationsbereich aufgerufen werden. Du gelangst über den Menüpunkt Webshop Layout zum Untermenü Layout Assistent. Durch einen Klick darauf öffnet sich dieser in einem neuen Tab und du kannst sofort loslegen.

Anwendung

Der Assistent ist ein intuitives Tool zum Erstellen von Vorlagen. Für die Nutzung sind keine technischen Kenntnisse oder Programmierkenntnisse notwendig. Die Anwendung erfolgt im Webbrowser. Hier kannst du das Design deines Webshop aus bestehenden Elementen per „Drag and Drop“ gestalten. Innerhalb des Assistenten konfigurierts du alle notwendigen Bereiche des Webshops. Das umfasst

  • die Hauptseite,
  • die Artikelliste,
  • die Artikeldetails und
  • den Warenkorb.

Nach dem du das funktionale Grundgerüst des Webshops erstellt hast, kannst du im Anschluss die Farben der einzelnen Elemente und Symbole sowie die Schriftarten anpassen. Damit baust du dir deinen einzigartigen, attraktiven Webshop, der an die neuesten E-Commerce-Trends angepasst ist.

Voraussetzung

Um den Assistenten verwenden zu können musst du folgende Voraussetzungen erfüllen:

  • du nutzt den Comarch Webshop zur Unterstützung von B2C-Prozessen
  • du hast eine Bildschirmbreite von mehr als 1280 px (die empfohlene Breite beträgt 1920 px)
  • du nutzt einen der folgenden Browser:

:

Browser
  • Mozilla Firefox: die aktuelle Version des Browsers, nicht älter als drei Monate
  • Google Chrome: die aktuelle Version des Browsers, nicht älter als drei Monate
  • Microsoft Edge: wird vom Layout Assistenten nicht unterstützt
  • Internet Explorer: wird vom Layout Assistenten nicht unterstützt

Vorsicht
Der Comarch Layout Assistent ist nur für Webbrowser verfügbar. Er funktioniert nicht auf mobilen Geräten.

Anleitung

Nachdem du dir die grundlegenden Anweisungen zum Erstellen von Vorlagen durchgelesen hast, kannst du mit der Erstellung deiner ersten Vorlage beginnen.

Rufe dafür den Layout Assistenten (Webshop-Assistenten) auf und wähle die Schaltlfäche Neue Vorlage erstellen.

Tipp
Zu Beginn empfiehlt es sich die zukünftige Vorlage zu benennen. Dafür einfach in das Feld in der oberen linken Ecke des Entwurf klicken, um den bestehenden Namen Topaz (2021.2) zu entfernen und deinen Wunschnamen einzugegeben. Dieser Name wird nach dem Import der Vorlage in das Administrationspanel und nach dem Export der Vorlage in eine XML-Datei mit Datum und Uhrzeit der Erstellung sichtbar.

Nun solltest du die Sprache auswählen, mit der du arbeiten und deine Vorlage erstellen möchtest. Der Assistent hält folgenden Sprachen zur Auswahl bereit: Polnisch, Englisch, Deutsch und Französisch. Die Sprache wählst du in der oberen linken Ecke des Menüs aus. Durch einen Klick auf die Flagge des entsprechenden Landes entscheidest du dich für eine Sprache. Bei der Vorschau deiner Vorlage im Vollbildmodus wird die ausgewählte Sprache gespeichert und die Vorlage in der ausgewählten Sprache angezeigt.

Schritt 1 – Startseite 

In ersten Schritt solltest du das Aussehen der Hauptseite (Startseite) deines Webshops gestalten. Die Hauptseite kann aus folgenden Abschnitten bestehen:

  • Kopfzeile
  • Banner
  • Empfohlen (Angebote, Neue Produkte…)
  • Newsletter
  • Blog
  • Hersteller-Slider
  • Marken-Slider
  • Fußzeile
  • Textelement

Jeder Abschnitt kann individuell angepasst werden. Dafür stehen verschiedene Elemente zur Verfügung. Diese werden durch einen Klick auf den nach unten weisenden Pfeil angezeigt (ausgeklappt). Am Beispiel der Kopfzeile sieht das wie folgt aus:

Wähle nun eines der dargestellten Elemente (Designs) aus und ziehe es per „Drag and Drop” in den entsprechenden Abschnitt des Entwurfsbereichs:

Im Abschnitt Empfohlen kannst du zunächst aus einer Vielzahl an Typen (Neu, Sonderangebot, Ausverkauf…) wählen. Für jeden Typ stehen dir zwei verschiedene Elemente der Darstellung zur Verfügung.

Wähle wieder eines der Elemente (Designs) aus und ziehe es per „Drag and Drop” in den entsprechenden Abschnitt des Entwurfsbereichs:

Tipp
Du kannst die Anzahl der Artikel, die in diesem Bereich angezeigt werden sollen anpassen. Sobald du den Mauszeiger auf den Bereich ziehst erscheint rechts oben der Button Optionen. In einem neuen Fenster kannst du anschließend die Anzahl (maximal 50) festlegen. 

Genauso gehst du mit allen weiteren Abschnitten vor. 

Nachdem du alle erforderlichen Abschnitte ausgewählt hast, steht das Grundgerüst für deine Hauptseite. Du kannst dir deinen Entwurf nun in der Vorschau (rechts oben) anschauen.

Schritt 2 – Artikelliste

Im nächsten Schritt legst du das Design für die Artikelliste fest. Dafür wählst Artikelliste aus der Dropdown-Liste aus.

Danach gehst du ähnlich wie bei der Hauptseite vor und konfigurierst das Design mithilfe der einzelnen Elemente. Die Elemente für die Kopf- und Fußzeile werden von der Hauptseite übernommen. Du kannst zwischen zwei Darstellungsformen für die Artikelliste wählen. Außerdem ist es wieder möglich, die Anzahl der Artikel festzulegen, die angezeigt werden sollen (maximal 50).

Schritt 3 – Artikeldetails

Nachdem du die Artikelliste definiert hast, gehst du zum Design der Artikeldetails über. Auch hier werden die Elemente der Kopf- und Fußzeile von der Hauptseite übernommen.

Für die Ansicht der Artikeldetails kannst du aus zwei Designs wählen.

Jedes Design kann über den Aufruf der Optionen weiter modifiziert werden. Du kannst folgende Einstellungen vornehmen:

 

Tipp
Der Abschnitt Empfohlen kann auf jeder (Unter)Seite des Webshops separat definiert werden. So können in diesem Bereich auf der Hauptseite Produkte des Typs Neu dargestellt werden, während auf der Unterseite Artikelliste in diesem Bereich Produkte des Typs Meist gekauft erscheinen.

Schritt 4 – Warenkorb

Abschließend kannst du noch das Design des Warenkorbs anpassen. Die Elemente für die Kopf- und Fußzeile werden wieder von der Hauptseite übernommen.

Für die Ansicht des Warenkorbs stehen zwei Designs zur Auswahl.

Stile

Nachdem du das Grundgerüst deines Webshops erstellst hast, kannst du das Design weiter individualisieren. Über die Registerkarte Stile kannst du die einzelnen Abschnitte hinsichtlich

  • Farbendesign
  • Schriftart und
  • Symbole anpassen.

Farbendesign 

Um das Farbdesign deiner Vorlage zu ändern, wählst du die Option Farbdesign aus. Hier stehen dir 5 grundlegende Designs zur Verfügung.

Jedes Design kannst du nach deinen Wünschen individuell bearbeiten. Das heißt für jedes Design kannst du die Farben für die Bereiche

  • Allgemein (z. B. Dropdown Pfeile)
  • Kopfzeile (z. B. Huntergrundfarbe)
  • Banner (Kopfzeile)
  • Newletter (z. B. Textfeld)
  • Fußzeile (z. B. Hintergrundfarbe)
  • Schaltlfächen (z. B. Primäre Schaltflächen)
  • Artikel (z. B. Artikelname)

anpassen.

Deine Änderungen solltest du stets über den Button Speichern sichern. Wenn du mit deinen Änderungen nicht zufrieden bist, kannst du diese jederzeit über die Schaltfläche Alles rückgängig machen zurücksetzen. 

Deine Änderungen kannst dir in der Vorschau (rechts oben) anschauen.

Schriftart

Je nach Bedarf kannst du auch die Schriftart (Font) für deine Vorlage verändern. Es gibt 6 verschiedene Fonts. Unter jeder Schriftart siehst du ein Beispiel.

Symbole

Abschließend kann du das Aussehen der Symbole verändern. Du hast die Wahl zwischen 3 verschiedenen Varianten:

  • Standard (Füllung)
  • Dünn (Umriss)
  • Sehr dünn (Dünner Umriss)

Außerdem kannst du das Symbol für den Warenkorb anpassen (Tasche, Einkaufswagen oder Warenkorb).

Tipp
Die Änderungen der Symbolart beziehen sich auf die Symbole in der Kopf- und Fußzeile (z. b. Suche und Kontaktmöglichkeiten.) 

Vorlagen erstellen bzw. herunterladen

Nachdem du die Vorlage fertig gestellt hast, kannst du sie über die Registerkarte Vorlage herunterladen. Dafür klickst du auf den Button Erstellen unten links.

Auf der Registerkarte Stile musst du zunächst über die Pfeilschaltfläche fahren, ehe der Button erscheint.

Im Anschluss startet der Download der Vorlage und ein Hinweisfenster erscheint im Browser.

Die heruntergeladene Vorlage (XML-Datei) musst du nun im Administrationsbereich des Comarch Webshops importieren. Über den Menüpunkt Webshop Layout gelangst du zum Untermenü Einstellungen. Von hier aus öffnest du rechts oben die Schaltfläche Optionen (drei Punkte) und wählst Erweiterte Einstellungen

Nun öffnest du die Registerkarte Import der Vorlage, wählst über die Schalfläche XML-Datei auswählen die entsprechende Vorlage von deiner Festplatte aus und importierst diese über den Button VORLAGE IMPORTIEREN.

Seit Version 2020 enthält die Topaz-Vorlage Informationen zu ihrem Erstelldatum im Layout Assistenten. Diese Informationen findest du unter Webshop Layout / Einstellungen / Erweiterte Einstellungen bearbeiten (rechts oben) / HTML bearbeiten (rechts oben).

Hier wählst du aus der Dateiliste links _layout.html und findest dann das Änderungsdatum oberhalb des Editierfeldes.

Vorsicht
Wenn die Vorlage nicht alle erforderlichen Elementen enthält, erscheint nach Drücken des Buttons Erstellen ein Hinweis in der unteren rechten Ecke der Seite. Außerdem werden Abschnitte, in denen Elemente fehlen, mit einem entsprechenden Symbol gekennzeichnet.

Vorlagen hochladen

Neben dem Button Erstellen gibt es eine weitere Schaltfläche: Vorlage importieren. Mithilfe dieser Option kannst du eine bereits gespeicherte Vorlage im XML-Format in den Layout Assistenten hochladen, um sie erneut zu bearbeiten.

Dafür klickst du nur auf Vorlage importieren, wählst eine Datei von deiner Festplatte aus und lädst diese anschließend hoch. Nun kannst du sie wie gewohnt bearbeiten.

Mehr Informationen

Weitere Informationen findest du im Artikel Anpassungen des Layouts.

War dieser Artikel hilfreich?