Eine Produktseite muss viele Informationen tragen, ohne zur Textwand zu werden. Tabs lösen das, sofern man nicht das darin vergräbt, was den Kauf entscheidet, und sie für Suchmaschinen lesbar bleiben.
Was PrestaShop nativ bietet
Das Standard-Theme zeigt vordefinierte Tabs: Beschreibung, Produktdetails und gegebenenfalls Anhänge. Installierte Module können weitere hinzufügen, jedes hängt sich an dieselbe Stelle.
Zwei Grenzen. Der Inhalt jedes Tabs entspricht einem festen Produktfeld, ohne Möglichkeit, eigene anzulegen. Und die Reihenfolge ergibt sich aus der Modulposition, nicht aus einer redaktionellen Absicht.
Häufiges Ergebnis: ein Tab «Bewertungen» vor einem Tab «Technische Daten», obwohl der Kunde zuerst die Spezifikationen prüfen will.
Tabs oder Akkordeon
Die Frage entscheidet sich am Bildschirmformat.
Am Desktop funktionieren horizontale Tabs gut: alle Bezeichnungen sind sichtbar, der Besucher sieht, was es gibt, und wählt.
Auf dem Smartphone werden horizontale Tabs zum Problem. Vier oder fünf Bezeichnungen passen nicht in die Breite, und horizontales Scrollen verdeckt die letzten. Ein vertikales Akkordeon, bei dem jeder Abschnitt an Ort und Stelle aufklappt, ist deutlich brauchbarer.
Die Lösung, die funktioniert, ist der Wechsel zwischen beiden Formaten je nach Breite, bei gleichem Inhalt und gleicher HTML-Struktur.
Indexierbarkeit, der kritische Punkt
Das ist der Aspekt, den die meisten Umsetzungen falsch machen.
Eingeklappter Inhalt in einem Tab bleibt indexierbar, sofern er im HTML der Seite vorhanden ist und lediglich per Styling ausgeblendet wird. Das ist das Standardverhalten und völlig unproblematisch.
Inhalt, der erst beim Klick über einen asynchronen Aufruf geladen wird, existiert dagegen zum Zeitpunkt der ersten Analyse nicht. Er kann bei einem späteren Rendering erfasst werden, garantiert ist das aber nicht, und sein Gewicht in der Bewertung der Seite bleibt unsicher.
Die Regel ist also einfach: der gesamte Tab-Inhalt gehört in das ausgelieferte HTML. Verzögertes Laden rechtfertigt sich nur für schwere Elemente wie ein Video oder eine paginierte Bewertungsliste.
Ein oft übersehener Zusatzpunkt: Google gibt an, hinter einer Interaktion verborgene Inhalte in der mobilen Version als weniger wichtig zu behandeln. Das disqualifiziert sie nicht, spricht aber dafür, das Wichtigste ausgeklappt zu lassen.
PrestaShop Produktseiten-Tabs — Drag-&-Drop-ManagerMaßgeschneiderte Produktseiten-Tabs, per Drag & Drop neu geordnet.79,00€
Welche Tabs je Produkttyp
Drei Konfigurationen, je nach Art des Katalogs.
Technisches Produkt. Technische Daten, Kompatibilitäten, Dokumentation, Garantie und Kundendienst. Die Verkaufsbeschreibung bleibt kurz und darüber ausgeklappt.
Textil- oder Modeprodukt. Beschreibung, Zusammensetzung und Pflege, Größenratgeber, Versand und Rücksendungen. Der Größenratgeber gehört nicht in einen Tab, sondern neben die Auswahl, während der Tab die ausführliche Fassung trägt.
Lebensmittel oder Kosmetik. Beschreibung, Zusammensetzung und Allergene, Nährwerte oder Zutatenliste, Lagerung, Herkunft. Achtung: Pflichtangaben müssen vor dem Kauf zugänglich bleiben, was ein Tab erlaubt, sie dürfen aber nicht schwer auffindbar sein.
Die Reihenfolge
Drei Grundsätze.
Der erste Tab ist standardmäßig geöffnet und wird von nahezu allen Besuchern gesehen. Die folgenden von einem abnehmenden Anteil. Setzen Sie also zuerst, was den häufigsten Einwand dieser Kategorie ausräumt.
Die Reihenfolge folgt dem Entscheidungsweg, nicht der Verwaltungsreihenfolge Ihrer Felder. Beschreibung, dann technische Prüfung, dann Absicherung, dann Logistik.
Die Reihenfolge darf je Kategorie variieren. Bei technischen Produkten stehen die Daten vor der Beschreibung. Bei Deko umgekehrt.
Leere Tabs
Ein systematisches Problem, sobald die Konfiguration auf den ganzen Katalog angewendet wird: ein Tab «Dokumentation» auf Produkten, die keine haben.
Erwartet wird das automatische Ausblenden jedes Tabs ohne Inhalt. Naheliegend und doch selten umgesetzt, weil die Konfiguration in einfachen Fällen je Produkt und sonst global erfolgt.
Planen Sie auch den umgekehrten Fall ein: Inhalt erfasst, aber kein Tab dafür konfiguriert, wodurch die Information unsichtbar bleibt.
Wie viele Tabs
Höchstens vier bis fünf. Darüber kommen zwei Effekte zusammen: die Bezeichnungen passen nicht mehr in eine Zeile, und der Besucher liest sie nicht mehr.
Haben Sie mehr Inhalt, lautet die Frage nicht, wie ein Tab hinzukommt, sondern ob dieser Inhalt überhaupt auf die Seite gehört. Eine vollständige Anleitung ist als Download besser aufgehoben als im sechsten Tab.
Der Direktlink auf einen Tab
Nützliches, günstiges Detail: die Möglichkeit, per Link auf einen bestimmten Tab zu zeigen.
Das hilft in drei Fällen: ein Link «Bewertungen ansehen» neben der Note oben auf der Seite, ein Verweis aus einer Kundendienst-E-Mail und ein Link aus einem Blogartikel auf den technischen Abschnitt eines Produkts.
Technisch setzt das voraus, dass jeder Tab eine Kennung hat und das Skript beim Seitenaufruf den richtigen öffnet.
Das Modul Produktseiten-Tabs für PrestaShop übernimmt diese Konfiguration auf PrestaShop 8 und 9: eigene Tabs mit Reihenfolge per Ziehen und Ablegen, Konfiguration je Produktkategorie, Inhalt im HTML für die Indexierbarkeit, automatisches Ausblenden leerer Tabs und Umschalten auf Akkordeon am Smartphone.