Honeygrid und StyleEdit v3

Das Honeygrid ist eine responsive Benutzeroberfläche, passt sich also an die jeweilige Bildschirmauflösung an und ist daher sowohl für Desktop-Computer als auch mobile Endgeräte verwendbar.

Das Honeygrid steht sowohl als Template- als auch als Theme-Veriante zur Verfügung, letztere bietet mehr Einstellungsmöglichkeiten.

Das StyleEdit v3 oder kurz StyleEdit3 genannt, dient ausschließlich der Bearbeitung des Honeygrid-Templates. Modernere Themes, wie z.B. das auf Honeygrid basierende Standard-Theme Malibu, können nicht hierüber bearbeitet werden.

Einrichten des Honeygrids als aktuelles Template

Das Template kann unter Inhalte > Template-Einstellungen festgelegt werden. Verwende hierzu das Dropdown-Menü Templateset (Theme) und wähle den Eintrag Honeygrid (Template) aus. Bestätige die Änderung mit einem Klick auf Speichern.

Hinweis

Templates bieten im Gegensatz zu Themes weniger Einstellungsmöglichkeiten. Die standardmäßige Benutzeroberfläche des Shops, das sogenannte Malibu, basiert auf der Theme-Variante des Honeygrids. Wir empfehlen die Verwendung von Honeygrid-basierten Themes anstelle von Templates.

Wechsele anschließend im Gambio Admin zum Menü Toolbox > Cache und leere alle Caches. Betätige hierzu die einzelnen Schaltflächen von unten nach oben und warte jeweils bis die Bestätigungsmeldung oberhalb der Buttons angezeigt wird.

Template-Einstellungen

Über Inhalte > Template-Einstellungen kann das StyleEdit v3 gestartet werden. Klicke hierzu auf Aktives Template bearbeiten laden.

Übersicht

Das StyleEdit wird in einer Box auf der rechten Seite des Bildschirms angezeigt. Von oben nach unten stehen die folgenden Bereiche zur Verfügung

Vorschau-Ansicht

in der schwarzen Titel-Zeile des StyleEdits kann die Vorschau-Ansicht ausgewählt werden. Klicke hierzu auf das Symbol in der rechten, oberen Ecke und wähle unter den folgenden Ansichten aus:

• Smartphone (375x637)
• Tablet Portrait (768x1024)
• Tablet Landscape (1024x768)
• Desktop (> 1200)

Standardmäßig ist die Ansicht Desktop aktiviert. Wenn eine der Vorschau-Ansichten für mobile Endgeräte gewählt wird, erfolgt die Darstellung in einem zum Endgerät passenden, stilisierten Rahmen. Die Anzeige des Shops entspricht der in den Klammern angegebenen Auflösung.

Meine Styles

Dies ist der Hauptbereich des StyleEdits. Änderungen an den Grafik-Einstellungen können in eigenen Profilen zusammengefasst und gespeichert werden, den sogenannten Styles. Styles lassen sich anlegen, bearbeiten und herunterladen. Sie können ebenfalls dupliziert und gelöscht werden.

Hinweis

Wenn du das StyleEdit v3 das erste Mal aufrufst, sind noch keine Styles vorhanden (vgl. Abb. StyleEdit v3). Um Änderungen an deinem Template vornehmen zu können, sollte daher ein neuer Style angelegt werden. Weiteres hierzu findest du im Abschnitt StyleEdit-Buttons.

Styles werden mit einem frei vergebenen Namen und dem Datum der letzten gespeicherten Änderung aufgelistet. Über einen Klick auf das nach unten weisende Dreieck können für einen Style die folgenden Aktionen aufgerufen werden:

• Aktivieren: aktivert den Style, sodass die hier vorgenommenden Einstellungen im Shop verwendet werden. Ein aktiver Style wird im StyleEdit mit einem blauen Haken und dem Hinweis Aktiv angezeigt.

• Bearbeiten: öffnet den Style zur Bearbeitung, um Änderungen daran vorzunehmen. Weiteres hierzu findest du im Kapitel Bearbeiten.
• Duplizieren: kopiert einen Style und legt ihn unter einem neuen Namen an. Klicke auf Name des Styles angeben um einen Namen festzulegen. Mit einem Klick auf Erstellen wird der Style unter dem neuen Namen angelegt. Mit Klick auf Abbrechen verlässt du den Dialog, ohne den Style zu duplizieren.

Achtung

Wir empfehlen das Anlegen je eines Duplikats deiner Styles als Sicherung.

• Löschen: Löscht einen bestehenden Style. Es findet eine Sicherheitsabfrage statt. Mit Klick auf Ja wird der Style unwiderruflich gelöscht.

Hinweis

Aktive Styles können nicht gelöscht werden.

• Download: mit Klick auf Download kann der Style heruntergeladen werden.

Hinweis

Styles werden in sogenannten JSON-Dateien gespeichert. JSON steht für JavaScript Object Notation.

StyleEdit-Buttons

Über die Schaltfläche Neuer Style kann ein neuer Style angelegt werden. Es stehen drei grundsätzliche Layouts zur Verfügung:

• Full Width Slider: der Teaser-Slider wird über die gesamte Breite der Seite angezeigt
• Boxed Layout: der gesamte Shop-Bereich wird in einer zentralen Box angezeigt
• Transparent Header: der Head-Bereich wird transparent zum Hintergrund dargestellt

Wähle einen Namen und klicke auf Erstellen, um einen neuen Style anzulegen. Über Abbrechen verlässt du den Dialog, ohne einen neuen Style zu erstellen.

Über die Schaltfläche Style Upload kann ein gespeicherter Style hochgeladen werden. Mit einem Klick auf Datei wählen kann die Datei auf deinem Computer ausgewählt werden. Klicke auf Erstellen, um den Style unter dem eingegebenen Namen hochzuladen. Mit einem Klick auf Abbrechen verlässt du den Dialog, ohne den Style hinzuzufügen.

Über Beenden kannst du das StyleEdit verlassen und kehrst zur Shop-Ansicht zurück.

Bearbeiten

Wähle den jeweiligen Style aus, welchen du bearbeiten möchtest und öffne das Menü über einen Klick auf das nach unten weisende Dreieck. Klicke auf Bearbeiten.

Es öffnen sich die einzelnen Bestandteile des Styles, die über ein Dropdown ausgewählt werden können. Klicke den jeweiligen Bereich an, um die einzelnen Einstellungen einzublenden. Es stehen der Reihe nach die folgenden Bereiche zur Verfügung:

• Allgemein
• Header
• Kategorien
• Sekundärnavigation
• Spaltenaufteilung
• Footer
• Produkte
• Checkout
• Menüboxen
• Menüboxen-Positionen

Während der Style bearbeitet wird, steht neben dem Style-Namen ein Drodpown-Feld zur Verfügung. Hierüber kann der Link Eigenes CSS hinzufügen ausgeklappt werden. Dieser verweist auf ein Texteingabefeld, in das eigener CSS-Code platziet werden kann.

Achtung

Eigene CSS-Codes können im ungünstigen Fall ungewollte Auswirkungen auf die Darstellung haben. Wir empfehlen daher etwaige Änderungen zunächst an einer Kopie deines aktiven Styles vorzunehmen und die Auswirkung auf die einzelnen Seiten des Shops eingängig zu prüfen, indem du diese aus dem Bearbeitungsmodus heraus aufrufst.

Die Anzeige der Einstellungen kann über einen Filter übersichtlicher gemacht werden. Klicke auf Filter um die gewünschten Filter auszuwählen:

• Alle anzeigen
• Farben & Hintergründe
• Schriftart
• Mobil
• Layout

Nach der Auswahl werden nur noch die Bereiche und Einstellungen angezeigt, die im Filter eingestellt sind. Wenn du z.B. den Filter Farben & Hintergründe auswählst, werden nur noch die Bereiche angezeigt, in denen Farb- und Hintergrund-Einstellungen vorgenommen werden können. Zudem werden bei der Auswahl eines Bereichs nur noch die Einstellungen für Farben und Hintergründe angezeigt. Der Name des ausgwählten Filters wird neben dem Filter-Symbol in dunkelgrauer Schrift angezeigt.

Über Alle Anzeigen wird die Filter-Auswahl wieder rückgängig gemacht, der inaktive Filter wird in hellgrauer Schrift dargestellt.

Änderungen können über vier Arten von Einstellungen vorgenommen werden:

Schalter/Schieber

Die jeweilige Einstellung wird an- oder ausgeschaltet. Wird ein Schieber blau angezeigt, ist die Einstellung aktiv. Wird er stattdessen hellgrau angezeigt, ist die Einstellung inaktiv

Textfelder

Textfelder sind im StyleEdit mit einem Unterstrich versehen. Über einen Klick in das Textfeld kann der Inhalt geändert werden. Bei einem aktiven Textfeld wird der Unterstrich blau angezeigt.

Farbauswahl

Farbauswahlen werden über ein Textfeld, das den Farb-Wert im Hex-Code enthält (zu erkennen an der vorangestellten Raute) und die Vorschau-Box dargestellt, in der die eingestellte Farbe angezeigt wird. Über einen Klick in das Textfeld kann der Farbwert manuell eingetragen werden. Wenn du auf die Vorschau-Box klickst, kann die Farbe über einen Dialog eingestellt werden.

Der Dialog besteht aus einer zentralen Auswahl-Box, in der der Farbverlauf angezeigt wird und verschiedenen Einstellungen. Klicke in die Box in der Mitte, um eine Farbe im Verlauf auszuwählen. Über den Regler rechts neben dem Verlauf kann ein anderer Bereich des Farbspektrums eingestellt werden. Unterhalb der Auswahl-Box kann die Transparenz der gewählten Farbe über einen Regler festgelegt werden. Unterhalb dieses Reglers wird die ausgewählte Farbe in einem Vorschau-Fenster angezeigt. Die linke Hälfte der Vorschau zeigt die bisher eingestellte Farbe an. Die rechte Hälfte zeigt die neue Auswahl an. Rechts neben der Vorschau wird der Farbwert in einem Eingabefeld angezeigt und kann dort nachträglich geändert werden.

Links von der Vorschau-Box befindet sich eine Historie der bisher eingestellten Farben. Über einen Klick in das jeweilige Quadrat wird die angezeigte Farbe eingestellt. Über einen Klick auf OK wird die neue Farbe als Auswahl übernommen. Mit Abbrechen verlässt du den Dialog, ohne die Farbe zu ändern.

Dateiauswahl

Die Dateiauswahl ist ähnlich wie das Textfeld aufgebaut, es wird der Dateiname der eingestellten Datei angezeigt. Bewege die Maus über das Feld, um die einzelnen Auswahlen anzuzeigen. Die drei Symbole stellen von links nach rechts die Aktionen Upload, Vorschau und Löschen dar.

Über einen Klick auf Upload öffnet sich der Dialog zum Hochladen einer Datei, typischerweise eines Bildes. Klicke auf Datei auswählen um die Datei auf deinem Rechner auszuwählen. Über die Schaltfläche Upload wird die Datei hochgeladen und eingebunden. Mit Abbrechen verlässt du den Dialog, ohne die eingerichtete Datei zu ändern.

Mit Vorschau wird eine Vorschau-Ansicht des eingerichteten Bilds geöffnet. Über Löschen kann ein eingerichtetes Bild wieder entfernt werden. Das Löschen muss mit einer Sicherheitsabfrage bestätigt werden, klicke auf Ja um das Bild zu entfernen. Mit Nein wird das Löschen abgebrochen.

Am unteren Ende des StyleEdits werden drei Schaltflächen angezeigt. Über Speichern werden die im Style vorgenommenen Änderungen übernommen. Mit Vorschau kann die Änderung im Vorschau-Bereich angezeigt werden, ohne sie dauerhaft zu speichern.

Mit einem Klick auf Zurück gelangst du wieder zur Auswahl der Styles. Wenn seit dem letzten Speichern Änderungen vorgenommen wurden, wird eine Sicherheitsabfrage angezeigt. Wenn du die Bearbeitung des Styles abbrechen möchtest, bestätige dies mit einem Klick auf Ja, alle Änderungen die seit dem letzten Speichern vorgenommen worden sind, gehen hierbei verloren. Mit einem Klick auf Nein wird die Aktion abgebrochen und du kehrst zur Bearbeitung des Styles zurück.

Beschreibung der verschiedenen Bereiche

Allgemein

Der Bereich Allgemein beinhaltet übergreifende Einstellungen für das gesamte Template. Es können Details zu Layout und Hintergrund, der allgemeinen Farben und der verwendeten Schriften eingestellt werden. Außerdem können Details zur Anzeige des Teaser-Sliders festgelegt werden.

Header

Der Header bezeichnet den oberen Bereich des Shops, in dem das Logo, die Suchleiste und verschiedene Schaltflächen untergebracht sind. Neben der Farbgebung können die Größen und Aufteilungen der verschiedenen Bereiche innerhalb des Headers, sowei die Anzeige des Warenkorbs und der Suche festgelgt werden.

Kategorien

Für die Kategorien können Abmessungen und Abstände festgelegt werden. Außerdem kann die Farbgebung und die generelle Erscheinung angepasst werden.

Sekundärnavigation

Die Sekundärnavigation ist in der Leiste im oberen Teil des Headers untergebracht. Es können die einzelnen Schrift- und Hintergrundfarben und verschiedene Abstände eingestellt werden.

Spaltenaufteilung

Das Shop-Template ist in 12 gleichgroße Spalten gegliedert, die sich über die gesamte Breite des Fensters erstrecken. Die Aufteilung dieser Spalten kann in diesem Bereich festgelgt werden.

Achtung

Die Summe der eingetragenen Spaltenanzahlen für jeden Bereich (z.B: Groß (Desktops) oder Medium (Tablet Landscape) muss nach einer Änderung wieder 12 betragen.

Footer

Für den Footer können Mindesthöhe, sowie Hintergrund- und Schriftfarbe festgelgt werden. Zudem können die einzelen Spalten in ihrer Aufteilung angepasst und bei Bedarf komplett ausgeblendet werden.

Produkte

Für die Anzeige der Produkte kann neben der Farbgebung und Aufteilung der einzelnen Bereiche auch Änderungen an den Abmessungen der Artikelbilder (Info-Bilder und Thumbnails) vorgenommen werden.

Checkout

Der Checkout kann farblich angepasst werden. Vom Warenkorb bis zur letzten Seite des Bestellvorgangs sind verschiedene Einstellungen möglich.

Menüboxen

Die Menüboxen können farblich angepasst werden. Zudem kann für die Startseite, die Produkt-Info- und Listen-Seiten, den Warenkorb sowie den Checkout festgelegt werden ob diese über die gesamte Breite angezeigt wird und damit die Menüboxen deaktiviert werden.

Menübox-Positionen

In diesem Abschnitt kann die Anzeige der einzelnen Menüboxen an- und abgeschaltet werden. Zudem kann die Reihenfolge der Boxen in der linken Spalte geändert werden, indem die einzelnen Einträge über Klicken und Halten an ihre neue Position innerhalb des StyleEdit v3 gezogen werden.

Icons

Über den Bereich Icons können Größe und Farbe von verschiedenen Icons angepasst werden.

Hinweis

Der Bereich Icons wird nur angezeigt, wenn unter Inhalte > Template-Einstellungen für Templateset (Theme) der Eintrag Honeygrid (Theme) eingestellt worden ist.

Template Konfiguration

Unter Inhalte > Template-Einstellungen befindet sich die Themeauswahl. Hier kann über die Einstellung Templateset (Theme) das gewünschte Theme oder Template zur Anzeige im Shop ausgewählt werden. Es können ebenfalls generelle Einstellungen vorgenommen werden, die nicht an Styles gebunden sind.

Hinweis

Ab Version 4.3 befinden sich diese Einstellungen im Gambio Admin unter Einstellungen / Layout & Design.

Die Einstellungen sind nach den folgenden Bereichen gegliedert:

• Startseite
• Artikeldetailseite
• Artikelübersicht
• Kategoriemenü
• Top-Menü
• Warenkorb

Einstellungen für die Startseite

Feldname	Beschreibung
In Kürze verfügbare Produkte in Swiper anzeigen	Artikelankündigungen werden im Swiper auf der Startseite angezeigt.
Empfehlungen in Swiper anzeigen	Empfehlungen werden im Swiper auf der Startseite angezeigt.
Angebote in Swiper anzeigen	Sonderangebote werden im Swiper auf der Startseite angezeigt.
Neue Produkte in Swiper anzeigen	Neue Artikel werden im Swiper auf der Startseite angezeigt.

Einstellungen für die Artikeldetailseite

Feldname	Beschreibung
Darstellung bei Eigenschaftskombinationsauswahl	sollen nur Eigenschaftskombinationsbilder oder Eigenschaftskombinationsbilder + Stammartikelbilder angezeigt werden?
Hersteller-Bilder anzeigen	Anzeige des Hersteller-Bilds auf der Artikeldetailseite
Zusatzfelder auf Detailseite aktivieren	Die Inhalte der Zusatzfelder werden auf der Detailseite angezeit
Bilderzoom aktivieren	Aktivieren der Lupenfunktion für das Artikelbild
Merkzettel aktivieren	Aktivieren des Merkzettels auf der Artikeldetaiseite
"Frage zum Produkt"- Modul auf Detailseite aktivieren	Der Link Frage zu Produkt wird auf der Artikel-Detailseite unterhalb des Warenkorb-Buttons angezeigt
Facebook "Gefällt mir"-Button auf Detailseite aktivieren	Aktivieren des Gefällt Mir-Buttons auf der Artikeldetailseite
WhatsApp Teilen Button auf Detailseite aktivieren	Aktivieren des WhatsApp teilen-Buttons auf der Artikeldetailseite
Tweet-Button (Twitter) auf Detailseite aktivieren	Aktivieren des Tweet-Buttons auf der Artikeldetailseite
Google +1 Button auf Detailseite aktivieren	Aktivieren des Google +1 Buttons auf der Artikeldetailseite
Pinterest Button auf Detailseite aktivieren	Aktivieren des Pinterest-Buttons auf der Artikeldetailseite
Bildergalerie als Lightbox einbinden	Die Bildergalerie wird als Lightbox angezeigt
Artikelnummer anzeigen	Anzeige der Artikelnummer auf der Artikeldetailseite aktivieren

Einstellungen für die Artikelübersicht

Feldname	Beschreibung
Lagerbestand anzeigen (z. B. Suchergebnisse, Hersteller-Artikel)	Lagerbestand in der Artikelübersicht anzeigen
Artikelattribute anzeigen (z. B. Suchergebnisse, Hersteller-Artikel)	Attribute in der Artikelübersicht anzeigen
Staffelpreise anzeigen (z. B. Suchergebnisse, Hersteller-Artikel)	Staffelpreise in der Artikelübersicht anzeigen
Mengeneingabefeld anzeigen (z. B. Suchergebnisse, Hersteller-Artikel)	Mengeneingabefeld in der Artikelübersicht anzeigen
Gekachelte Artikelauflistung (z. B. Suchergebnisse, Hersteller-Artikel)	Wenn aktiviert, werden Artikel in der Artikelübersicht gekachelt angezeigt, sonst in Listenform
Hersteller-Bilder anzeigen	Hersteller-Bilder in der Artikelübersicht anzeigen
Artikel-Ribbons aktivieren	Artikel-Ribbons in der Artikelübersicht anzeigen
Anzahl der Angebote auf der Startseite	Anzahl der Sonderangebote, die auf der Startseite angezeigt werden
Anzahl der neuen Artikel auf der Startseite	Anzahl der neuen Artikel, die auf der Startseite angezeigt werden
Anzahl der empfohlenen Artikel auf der Startseite	Anzahl der Empfehlungen, die auf der Startseite angezeigt werden
Artikelnummer anzeigen	Anzeige der Artikelnummer in der Artikelübersicht aktivieren

Einstellungen für das Kategoriemenü

Feldname	Beschreibung
Horizontale Kategorie-Navigation im Header anzeigen	Kategorie-Anzeige im Top-Menü wird verwendet
Horizontale Kategorie-Navigation Kategorien bis zu folgender Tiefe darstellen	Unterkategorien bis zu dieser Ebene werden im horizontalen Kategoriemenü angezeigt
Vertikale Kategorie-Navigation in der Sidebar anzeigen	Kategorie-Anzeige in der linken Spalte wird verwendet
In vertikaler Navigation nur Unterkategorien der aktuellen Kategorie anzeigen	Im linken Kategoriemenü nur die Unterkategorien der geöffneten Kategorie anzeigen
Klick auf Kategorie in vertikaler Navigation klappt Unterkategorien auf statt hineinzugehen	Im linken Kategoriemenü können die Unterkategorien aufgeklappt werden
Kategorietiefe bis zu der die vertikale Navigation immer aufgeklappt angezeigt wird	Wie viele Ebenen des linken Kategoriemenüs sollen standardmäßig aufgeklappt sein?
Maximale Kategorietiefe bis zu der die vertikale Navigation aufgeklappt werden kann	Bis zu dieser Tiefe lassen sich Kategorien aufklappen

Einstellungen für das Top-Menü

Feldname	Beschreibung
Währungsauswahl im Top-Menü aktivieren	Währungsauwahl im Top-Menü wird verwendet
Wohnort im Top-Menü aktivieren	Wohnortauswahl im Top-Menü wird verwendet
Schnellsuche im TopMenü aktivieren	Schnellsuche im Top-Menü wird verwendet

Einstellungen für den Warenkorb

Feldname	Beschreibung
Artikelnummer im Warenkorb/Merkzettel anzeigen	Anzeige der Artikelnummer in Warenkorb/Merkzettel aktivieren
"Weiter einkaufen"-Button immer anzeigen	An- und Abschalten des Buttons Weiter einkaufen im Warenkorb
Artikelanzahl statt Artikelstückzahl im kleinen Warenkorb anzeigen	Anzahl der verschiedenen Artikel im Warenkorb anstatt der Gesamtzahl an Artikeln anzeigen

Einstellungen für die Artikelbewertungen

Feldname	Beschreibung
Produktbewertungen aktivieren	Kundenrezensionen aktivieren
Produktbewertungen in der Produktliste und in der gekachelten Artikelauflistung anzeigen?	Bewertungssterne in Artikelübersichten anzeigen
Produktbewertungen im Tab anzeigen	Kundenrezensionen werden in einem Artikeltab und nicht mehr unterhalb der Artikelbeschreibung angezeigt

Einstellungen für die Artikelbilder

Feldname	Beschreibung
Kleine Artikelbilder in Übersichten und Swipern verwenden	Verwendung der kleineren Thumbnails anstelle der Info-Bilder

Allgemeine Template-Einstellungen

Feldname	Beschreibung
Automatische Silbentrennung aktivieren	Artikelnamen orthografisch trennen
Suchvorschläge aktivieren	Die Suche im Header schlägt Suchbegriffe anhand der Eingabe vor

Grid-Spalten

Viele Einstellungen über das StyleEdit v3 definieren die Anzahl sogenannter Grid-Spalten. Die gesamte Breite des Shopbereichs ist auf 12 gleichgroße Streifen, die Grid-Spalten, verteilt. Indem für einen Bereich, z.B. die linke Spalte (Zusatzboxen, vertikales Kategoriemenü) eine bestimmte Anzahl an Grid-Spalten verwendet wird, kann die Breite im Verhältnis zum gesamten Shop festgelegt werden.

In der obenstehenden Abbildung werden 3 von 12 Grid-Spalten für die linke Spalte verwendet, in der z.B. die Zusatzboxen untergebracht sind. Die 9 verbleibenden Grid-Spalten (in der Abbildung nicht eingezeichnet) werden für die anderen Shop-Inhalte verwendet.

Wichtig bei der Einstellung ist, dass die Gesamtzahl der Grid-Spalten für alle Einstellungen in der Summe immer 12 ergeben müssen - dies entspricht 100% der Breite.

Weiterführende Links

Ergänzend zu den bisherigen Unterkapiteln findest du im Gambio Blog Tutorien zu verschiedenen Themen, rund um das StyleEdit v3. Nachfolgend findest du die entsprechenden Links (letzter Aufruf 08.08.2018):

https://www.gambio.de/blog/styleedit-3-tutorials-teil-1/

https://www.gambio.de/blog/styleedit-3-tutorials-variablen-scss-mixins/

https://www.gambio.de/blog/styleedit-3-tutorials-teil-3-header/

https://www.gambio.de/blog/styleedit-3-tutorials-teil-3-footer/