Design & Darstellung

Nicht Teil dieses Leitfadens: Bildgrößen, Galerie und Zuschnitt (Leitfaden Bilder & Medien), Slider, Produktblöcke und Popups der Startseite (Leitfaden Startseite gestalten), Seiten mit dem Baukasten (Leitfaden xoContentEditor) und die neue Kategorie-Navigation ab XONIC 4.10 (Leitfaden Kategorie-Navigation).

Was nach dem Speichern passiert

Viele Design-Einstellungen fließen in das Stylesheet des Shops ein. Speichern Sie einen Wert in einer dieser Gruppen unter Einstellungen → Design: „Bilder“, „Produktauflistung“, „Allgemein“, „Slider“, „Header (Kopfbereich)“, „Farben“, „Produktdetailansicht“, „Checkout“ oder „Off-Canvas“, dann löscht der Shop sein zwischengespeichertes Stylesheet und baut es beim nächsten Seitenaufruf neu. Ist Cloudflare eingerichtet, leert er dort ebenfalls den Zwischenspeicher. Den Knopf „Template Cache löschen“ brauchen Sie dafür nicht.

Sehen Sie die Änderung nicht sofort, laden Sie die Seite mit Strg+F5 neu (am Mac cmd+Umschalt+R). Prüfen Sie Änderungen immer im Shop selbst und auf einem Smartphone, siehe Mobil & Tablet.

Farbe der Produkt-Badges

Für eigene Badges, etwa „Bio“ oder „Made in Germany“, stellen Sie die Farben unter Produkte → Produktbadges am Badge ein: „Badge-Hintergrundfarbe“ und „Badge-Zeichen/Textfarbe“. Beide dürfen nicht gleich sein. Das Feld „zusätzliches CSS“ nimmt weitere Angaben auf, etwa einen Rahmen.

Die Kennzeichen, die der Shop selbst vergibt, haben im Standard-Template feste Farben mit ausreichendem Kontrast: der Rabatt bei Sonderangeboten, „Neu“, „Top“, „Bundle“, „B-Ware“, „FSK 18“, „Kostenloser Versand“ und „Exklusives Angebot“. Sie folgen nicht den Shopfarben. Andere Farben dafür setzen Sie per eigenem CSS, siehe Eigenes CSS.

Unter Einstellungen → Design → Header (Kopfbereich) stellen Sie Logobreite, Höhen, Symbole, den mobilen Kopfbereich und das Kategorienmenü ein. Zum Vergrößern anklicken.

Welche Kategorien im Menü stehen

Im Menü stehen die Kategorien, bei denen unter Produkte → Kategorien / Produkte der Schalter „Kategorie als Headertab“ an ist. Unterkategorien erscheinen im Aufklappmenü, wenn „Anzeige der Unterkategorien bei Headertabs“ an ist; wie viele je Spalte, legt „Headerkategorie-Subnavigation maximale Anzahl 2. Kategorieebene“ fest.

Wie ein Aufklappmenü aufgebaut ist, wählen Sie je Hauptkategorie im Feld „Navigations-Template“ oder für alle unter „Standard Navigations-Template“:

• simple: nur Text, für wenige Unterkategorien.
• imagecard: links die Unterkategorien, rechts Bild und Beschreibung der Kategorie.
• megamenu: volle Breite mit vielen Spalten, für große Sortimente.
• auto (ab Werk): Der Shop wählt nach Bild, Beschreibung und Zahl der Unterkategorien.

Auf Smartphones und Tablets, die der Shop als Mobilgerät erkennt, zeigt er immer die einfache Form.

Lange Kategorienamen

Passen nicht alle Einträge in die Menüleiste, rutschen Einträge in eine zweite Zeile. Der Kopfbereich wächst dabei nicht mit: Die erste Zeile wird oben angeschnitten, die zweite ragt in die Seite. Halten Sie das Menü deshalb so schlank, dass es in eine Zeile passt:

1. Kurzer Name, lange Überschrift: Im Menü steht der „Kategoriename“. Tragen Sie dort eine kurze Form ein, etwa „Garten“, und die vollständige Bezeichnung in „Abweichende Kategorieüberschrift“. Die Überschrift zeigt der Shop oben auf der Kategorieseite.
2. Weniger Einträge: Schalten Sie „Kategorie als Headertab“ bei Kategorien aus, die nicht oben stehen müssen. Damit sie am Computer über das Menü erreichbar bleiben, schalten Sie „Menu Icon im Desktop Modus anzeigen“ ein: Der Knopf öffnet links das Menü mit allen Kategorien.
3. Mehr Platz: Stellen Sie „Kopfnavigation: Position“ auf below. Dann hat das Menü die volle Breite.

Mit XONIC 4.10 kommt dazu die Aufteilung in Highlights und „Weitere Kategorien“: Was nicht mehr in die Leiste passt, verschiebt der Shop in das Panel „Weitere Kategorien“, siehe Leitfaden Kategorie-Navigation.ab 4.10

Das Menü links auf dem Smartphone

Der Menüknopf öffnet links ein Menü mit allen Kategorien. Unter Einstellungen → Design → Off-Canvas legen Sie fest, wie tief es reicht („Off-Canvas links: Maximale Kategorietiefe“, ab Werk 2) und ob es Kategoriebilder zeigt („Off-Canvas links: Kategoriebilder anzeigen“). Weniger Ebenen und keine Bilder machen das Menü auf kleinen Bildschirmen übersichtlicher.

Mit XONIC 4.10 ist das Menü links neu gebaut: Jede Ebene öffnet ein eigenes Feld mit Zurück-Knopf, dazu kommt eine Leiste mit Kategorie-Chips unter dem mobilen Kopfbereich, siehe Leitfaden Kategorie-Navigation.ab 4.10

In „Produktansicht im Produktlisting“ ist jede Zeile eine Ansicht der Kategorieseite mit eigener Anzahl je Seite und eigenen Angaben in Kachel oder Zeile. Zum Vergrößern anklicken.

Spalten und Kacheln

• Kategoriekacheln: „Kategorie-Kacheln: Spaltenanzahl“ legt fest, wie viele Kacheln von Unterkategorien und Hauptkategorien nebeneinander stehen, getrennt für Smartphone, Tablet und Computer. Zur Wahl stehen „Standard (1 / 2 / 3)“, „Kompakt (1 / 2 / 4)“, „Viele Kategorien (2 / 3 / 6)“ oder eigene Werte. Weniger Spalten ergeben größere Kategoriebilder.
• Produkte am Smartphone: „Anzahl Produkte nebeneinander (Mobil)“ zeigt auf schmalen Bildschirmen ein Produkt je Reihe in voller Breite (1) oder zwei nebeneinander (2, ab Werk).
• Hintergrundfarbe der Produktblöcke: Im „Konfigurator für Produktpräsentation und Vermarktung“ hat jede Zeile die Spalte „Hintergrund“. Die Farbe gilt genau für diesen Block auf dieser Seite.ab 4.9.135

Artikelnamen: Zeilen und Großschreibung

Eine eigene Schriftgröße für Artikelnamen gibt es nicht als Einstellung. Die setzen Sie per eigenem CSS.

Hover-Effekte

Fährt die Maus über eine Kategoriekachel, wirft sie einen leichten Schatten, das Bild wird etwas größer und der Name färbt sich in der Primärfarbe. Dafür gibt es keinen Schalter; abschalten lässt sich der Effekt per eigenem CSS. Bei Produktkacheln steuern Sie das Ausklappen der Knöpfe über die Spalte „Buttons“ (oben). Den Bildwechsel beim Überfahren beschreibt der Leitfaden Bilder & Medien.

Bestseller und andere Produktblöcke

Die Reihen „Bestseller“, „Neuheiten & Kauftipps“ oder „Sonderangebote“ über und unter der Liste stammen aus dem „Konfigurator für Produktpräsentation und Vermarktung“ in derselben Gruppe. Jede Zeile ist ein Block mit Typ und Zielseite. Für die Kategorieseiten zählen die Zeilen mit „/ Kategorien“: Den Bestseller-Block entfernen Sie dort, indem Sie die Zeile „Bestseller / Kategorien“ über den Papierkorb löschen und speichern. Die Spalten erklärt der Leitfaden Startseite gestalten.

Unter Einstellungen → Design → Produktdetailansicht legen Sie fest, wo die Beschreibung steht und welche Bedienelemente die Produktseite zeigt. Zum Vergrößern anklicken.

Die Beschreibung auf dem Smartphone

Auf Mobilgeräten steht die Beschreibung ab Werk nicht unter den Bildern, sondern als zugeklappter Reiter im Bereich mit Preis und Warenkorb-Knopf. Zwei Wege, sie gleich sichtbar zu machen:

• „Produktdetailansicht: Beschreibungs-Tab vorausgeklappt“ auf true: Der Reiter ist beim Aufruf schon offen.
• „Produktdetailansicht: Beschreibungs-Position auf Mobilgeräten“ auf inherit: Die Beschreibung steht dort, wo „Produktdetailansicht: Beschreibungs-Position“ sie am Computer hinsetzt, ab Werk unter den Bildern.ab 4.9.6

„Beschreibungsspalte vorausgeklappt (schmale Bildschirme)“ gilt nur für die Beschreibung unter den Bildern in einem schmalen Browserfenster am Computer, nicht auf dem Smartphone.

Weitere Schalter

Zoom-Lupe

Ab Werk zeigt die Produktseite die Bildanzeige gallery: Ein Klick auf ein Bild öffnet eine Großansicht. Eine Lupe beim Überfahren gibt es nur in der klassischen Anzeige legacy (Einstellungen → Design → Produktdetailansicht → Bildanzeige in der Produktansicht). Dort schalten Sie sie mit Einstellungen → Design → Bilder → Produktbild Zoom-Typ = none ab.

Pfeile auf der Produktseite

Pfeile gibt es an zwei Stellen. Für die Pfeile der Bildergalerie siehe „Navigationspfeile mobil“ oben und den Leitfaden Bilder & Medien. Die Reihen „Kunden kauften auch“ und „Wir empfehlen auch“ laufen als Slider: Mit Einstellungen → Design → Produktauflistung → Produkt-Slider: Navigations-Stil = modern (ab Werk) erscheinen die Blätter-Knöpfe am Computer erst beim Überfahren. Ganz ohne Pfeile stellen Sie im „Konfigurator für Produktpräsentation und Vermarktung“ in der Zeile „Kunden kauften auch / Produkte“ bzw. „Wir empfehlen auch / Produkte“ die Spalte „Slider“ auf Nein; dann stehen die Produkte in Reihen untereinander.

Welcher Baustein steht wo? Der Änderungsmodus

Unter Einstellungen → Design → Allgemein öffnet der Reiter „Kundenansicht Änderungsmodus“ Ihren Shop in einer besonderen Ansicht. Vor jedem Baustein aus dem CMS-Manager steht dann ein roter Knopf mit seinem Namen, etwa „[CMS-Seite : $cms_footer]“. Ein Klick öffnet den Baustein im Backend in einem neuen Fenster. Unten links steht der Kasten „Änderungsmodus“; über das Kreuz darin beenden Sie die Ansicht. Am Seitenende verdeckt der Kasten die linken Knöpfe im Footer. Diese Bausteine öffnen Sie dann direkt unter CMS → CMS-Manager.

Im Änderungsmodus steht vor jedem Baustein aus dem CMS-Manager ein roter Knopf mit seinem Namen, der Kasten „Änderungsmodus“ sitzt unten links im Fenster (im Footer-Ausschnitt ausgeblendet). Zum Vergrößern anklicken.

Hat ein Text keinen roten Knopf, kommt er aus der Artikelmaske oder aus xoLanguage. Mitarbeiter brauchen für den Änderungsmodus zusätzlich das Leserecht für redirect.php, im Rechte-Editor unter „Weitere Bereiche (ohne Menüpunkt)“, siehe Leitfaden Mitarbeiter, Rechte & 2FA.ab 4.9.24

Ändert sich Ihre Telefonnummer, passen Sie sie auch in den „Kopfzeilen-Argumenten“ und unter Einstellungen → Allgemein → Grundeinstellungen an. Die Footer-Kontaktdaten übernehmen sie nicht von dort.

Ihr eigenes Popup, die Hinweisbox, sowie die Popups für Newsletter, Kundengruppe, Lieferland und Währung beschreibt der Leitfaden Startseite gestalten. Das Cookie-Fenster richten Sie nach dem Leitfaden Rechtstexte, Cookie-Banner & Produktsicherheit ein.

Unter Einstellungen → Design → Allgemein wählen Sie Template und Schriftart, die Reiter darüber leeren den Template-Cache, importieren eine Schrift oder öffnen den Änderungsmodus. Zum Vergrößern anklicken.

Gestaltung einzelner Seiten ohne CSS-Datei

• Im xoContentEditor hat jedes Element unter „Layout & Darstellung“ das Feld „Individuelle Klassen“. Dort tragen Sie Klassen ein, die es im Template schon gibt, sowie Hintergrundfarbe, Abstände und Sichtbarkeit je Gerät, siehe Leitfaden xoContentEditor.
• Im normalen Texteditor bietet der Dialog zum Einfügen eines Links im Feld „Klasse“ fertige Knopf-Stile, etwa „Button Primary“.
• Regeln, die für mehrere Seiten gelten sollen, gehören in die CSS-Datei des Templates, nicht in einzelne Inhalte.

Was bei einem Update passiert

• Der Ordner Ihres eigenen Templates bleibt beim Update unverändert.
• Neue Funktionen in Vorlagen, die Ihr Template selbst mitbringt, erscheinen dort erst, wenn diese Vorlagen angepasst werden. Je weniger Vorlagen Ihr Template kopiert, desto mehr kommt mit dem Update von selbst an.
• Ein Beispiel ist die neue Navigation in XONIC 4.10: In einem Template mit eigenem Kopfbereich läuft das bisherige Menü weiter, bis die Vorlagen übernommen sind, siehe Leitfaden Kategorie-Navigation.

Template wechseln, ohne Anpassungen zu verlieren

Anpassungen in Ihrem Template-Ordner, also eigene Vorlagen und eigenes CSS, gelten nur, solange dieses Template ausgewählt ist. Wählen Sie ein anderes, sind sie im Shop nicht mehr zu sehen; gelöscht werden sie nicht. Programmierungen außerhalb des Templates, etwa zusätzliche Funktionen im Backend, hängen nicht am Template. Manche Sonderprogrammierung hat aber auch einen Teil im Template.

Unter „Templatewechsel in Kategorien“ (gleiche Gruppe) lässt sich einer Hauptkategorie samt Unterkategorien ein anderes Template zuweisen, etwa für eine Aktionswelt. In der Kategorie wählen Sie es dann aus.

Eigene Anwendungen im Shop

Ein eigener Konfigurator oder eine andere Anwendung mit Skripten lässt sich nicht über ein Textfeld einbauen: Der xoContentEditor entfernt Skripte beim Speichern. Bietet der Anbieter eine Einbettung per iframe an, nutzen Sie den Baustein „Code / eigenes HTML“, siehe Leitfaden xoContentEditor. Lädt die Einbettung Inhalte eines fremden Anbieters, beachten Sie die Einwilligung, siehe Leitfaden Rechtstexte, Cookie-Banner & Produktsicherheit. Alles darüber hinaus binden wir als Individualprogrammierung ein.

Dieselbe Kategorieseite am Computer (1.440 Pixel) und am Smartphone (390 Pixel): Unter 1.200 Pixel Breite ersetzen Menüknopf und Suchfeld die Menüleiste. Zum Vergrößern anklicken.

Warum auf dem Tablet etwas fehlt

Fehlt im Querformat die Menüleiste, ist das Tablet schmaler als 1.200 Pixel: Die Kategorien stehen dann hinter dem Menüknopf. Ein Tablet kann außerdem breit genug für die Menüleiste sein und trotzdem als Mobilgerät gelten; dann sieht es aus wie ein Computer, zeigt aber zum Beispiel die Beschreibung als Reiter. Welche Tablets als Mobilgerät gelten, hängt von der Kennung ab, die ihr Browser sendet.

So prüfen Sie die mobile Ansicht

• Am zuverlässigsten mit einem echten Smartphone.
• Am Computer mit der Geräte-Ansicht der Entwicklerwerkzeuge Ihres Browsers (F12), die auch die Kennung eines Smartphones sendet. Laden Sie die Seite danach neu.
• Ein nur schmal gezogenes Browserfenster zeigt zwar den mobilen Kopfbereich, aber nicht die Inhalte für Mobilgeräte.

Einstellungen für die mobile Ansicht

Im xoContentEditor stellen Sie Breite, Reihenfolge und Sichtbarkeit je Element getrennt für Desktop und Mobil ein, siehe Leitfaden xoContentEditor.

• Prüfen Sie bei eigenen Farben, ob Schrift darauf gut lesbar bleibt. Das gilt besonders für helle Primärfarben und Text auf farbigen Hintergründen in Produktblöcken.
• Schalten Sie Kennzeichen und Beschriftungen nicht so ab, dass Informationen nur noch über Farbe erkennbar sind.
• Was der Shop mitbringt und was Ihre Aufgabe bleibt, steht im Leitfaden Rechtstexte, Cookie-Banner & Produktsicherheit.