Produkt-Tabs: Spezifikationen, Anleitungen und individuelle Inhalte auf Produktseiten

Zuletzt aktualisiert Juni 2026 — der hier beschriebene Hook displayProductExtraContent für Tabs und das Verhalten der Eigenschaften gelten für PrestaShop 1.7, 8 und 9.

Eine Produktseite muss zwei Menschen bedienen, die selten dasselbe wollen: den Käufer, der seine Entscheidung bereits getroffen hat und nur noch die Schaltfläche zum Warenkorb sucht, und den Rechercheur, der erst kauft, wenn Maße, Kompatibilität, Größentabelle und Garantiebedingungen geprüft sind. Packen Sie alles, was der Rechercheur braucht, in die sichtbare Beschreibung, begraben Sie den Käufer in einer Textwand. Kürzen Sie die Seite, damit sie aufgeräumt wirkt, sucht der Rechercheur seine Antwort anderswo. Tabs lösen diesen Zielkonflikt in PrestaShop — sie geben der Seite Platz für ausführliche Referenzinhalte (Spezifikationen, Anleitungen, Downloads, FAQ), ohne sie jedem Besucher sofort aufzudrängen. Dieser Leitfaden dreht sich gezielt darum, diese Inhalte in die Tabs zu bekommen: was PrestaShop von Haus aus für Sie erstellt, was nicht, und wie Sie eigene Tab-Bereiche pro Produkt, pro Kategorie oder shopweit sauber ergänzen.

Wenn Sie noch einen Schritt früher stehen — also entscheiden, welche Inhalte überhaupt auf die Seite gehören und in welcher Reihenfolge — beginnen Sie mit der Anatomie der Produktseite und den umfassenderen Best Practices für das Design von Produktseiten. Dieser Beitrag setzt danach an: bei der Mechanik der Tab-Leiste selbst.

Was die Standard-Tabs von PrestaShop wirklich leisten

In einem unveränderten PrestaShop-Shop der Version 1.7, 8 oder 9 wird die Tab-Leiste durch die Produkt-Templates des Themes ausgegeben — vor allem durch themes/your-theme/templates/catalog/product.tpl und die eingebundenen Catalog-Partials — und die Standard-Tabs werden aus festen Quellen befüllt:

• Beschreibung — das lange Feld description aus dem Tab Beschreibung im Produkteditor. Die Kurzbeschreibung (summary) erscheint normalerweise oberhalb des Preises, nicht in einem Tab.
• Produktdetails — zieht die strukturierten Produktdaten heran: die Eigenschaften, die Sie im Tab Details des Produkts zuweisen, plus Referenz/EAN/UPC des Produkts. Diesen Tab unterschätzen die meisten Händler.
• Download — ein separater Tab, der nur erscheint, wenn Sie Anhänge (Handbücher, Datenblätter) zum Produkt hochgeladen haben. Im Classic-Theme ist das ein eigener Tab und nicht in die Produktdetails integriert.
• Bewertungen — erscheint nur, wenn ein Bewertungsmodul installiert und in die Produktseite eingehängt ist. In 1.7/8/9 rendert das offizielle Modul Product Comments über den Hook displayProductExtraContent (die alten Hooks displayProductTab/displayProductTabContent, die es in 1.6 nutzte, wurden in 1.7 entfernt).

Warum ist das wichtig? Die meisten Standard-Tabs sind keine Freitextflächen. Der Tab Produktdetails wird aus strukturierten Daten zusammengesetzt. Genau deshalb ist er wertvoller, als er aussieht — und genau deshalb ist „einfach in die Beschreibung tippen“ bei allem Messbaren der falsche Reflex.

Eigenschaften sind der Tab, den die meisten Shops ignorieren — und der doppelt wirkt

Für alles mit messbaren Attributen (Elektronik, Werkzeuge, Möbel, alles mit Datenblatt) ist Katalog → Attribute & Eigenschaften → Eigenschaften der richtige Ort, nicht ein Absatz in der Beschreibung. Sie legen eine Eigenschaft einmal an (z. B. „Gewicht“, „Material“, „Leistung“), definieren Werte dafür vor und weisen diese Werte anschließend jedem Produkt im Tab Details zu.

Das zahlt sich an zwei Stellen gleichzeitig aus — und genau deshalb ist es die Tab-Entscheidung mit dem größten Hebel:

• Der Spezifikations-Tab baut sich selbst auf. Eigenschaften erscheinen automatisch im Tab Produktdetails als saubere Liste aus Name und Wert — kein HTML von Hand formatieren, keine Tabelle pro Produkt pflegen. Ändern Sie einen Wert einmal, und jede Ausgabestelle aktualisiert sich.
• Sie treiben die Facettenfilterung an. Dieselben Eigenschaften speisen die Facettennavigation (ps_facetedsearch) auf Kategorieseiten. So wird „Material: Leder“ oder „Leistung: 2000 W“ zu einem Filter, den Kunden anklicken können. Freitext in der Beschreibung kann das nie leisten.

Die Disziplin dahinter ist dieselbe, die Beschreibungen schlank hält: strukturierte Daten gehören in Eigenschaften, Fließtext gehört in die Beschreibung. Wenn Sie den Textteil schreiben, zeigt wie Sie Produktbeschreibungen schreiben, die ranken und konvertieren, worauf es ankommt; die Spezifikationstabelle selbst ist Teil der Kaufen-oder-zurück-Entscheidung, die in der Anatomie der Produktseite beschrieben wird.

Die vier Arten von Tab-Inhalten — und wohin sie gehören

Nicht jeder Referenzinhalt braucht denselben Platz. Wenn Sie den Inhaltstyp dem richtigen Mechanismus zuordnen, bleibt ein Produktkatalog mit 50 Produkten genauso wartbar wie mit 5.000.

Der Fehler, den wir am häufigsten sehen: ein produktbezogenes benutzerdefiniertes Feld für Inhalte, die in einer ganzen Kategorie identisch sind — etwa eine Größentabelle für Schuhe, die auf 300 Produkte kopiert wird. Ändert sich die Tabelle, sind das 300 Bearbeitungen und fast sicher irgendwann ein Widerspruch. Kategorieweite Tab-Inhalte lösen genau das: derselbe Block erscheint auf jedem Produkt der Kategorie und wird an einer Stelle gepflegt. Genau diesen kategorieweiten Einmal-schreiben-Mechanismus ergänzt ein Tab-Modul wie Product Extra Info Tabs über den PrestaShop-Kern hinaus.

Echte benutzerdefinierte Tabs hinzufügen: die sauberen Wege

Sobald Sie über Eigenschaften und Anhänge hinausgehen, brauchen Sie einen Tab für beliebige Inhalte. In PrestaShop gibt es dafür drei Wege — in aufsteigender Reihenfolge danach, wie teuer sie später werden.

Der Grund, warum der Modulweg existiert, steckt in der dritten Zeile: product.tpl in einem Child-Theme zu bearbeiten funktioniert, bis das nächste Theme-Update diese Partials neu sortiert — und Ihre Tabs dann an einem Dienstag ohne Vorwarnung verschwinden. Ein Modul, das seine Inhalte über den Hook displayProductExtraContent registriert (den modernen Tab-Hook in 1.7/8/9), fügt Tabs hinzu, ohne eine einzige Theme-Datei anzufassen. Es übersteht Theme-Updates und Updates des Kerns — und genau darum geht es, wenn man es auf die PrestaShop-Art macht statt auf die schnelle.

Wie sich ein Tab-Modul einhängt

Wenn Sie einmal unter die Haube schauen: Moderne PrestaShop-Versionen (1.7, 8 und 9) bauen benutzerdefinierte Tabs über einen einzigen Hook auf: displayProductExtraContent. Ein Modul hängt sich dort ein und gibt ein oder mehrere ProductExtraContent-Objekte zurück — jedes enthält einen Titel (die anklickbare Tab-Beschriftung) und Inhalt (den Panel-Inhalt), gesetzt über setTitle() und setContent() — und PrestaShops ProductExtraContentFinder sammelt sie ein und rendert sie als Bootstrap-Tabs. Das Grundgerüst eines solchen Hooks sieht so aus:

public function hookDisplayProductExtraContent($params)
{
    $tab = (new PrestaShop\PrestaShop\Core\Product\ProductExtraContent())
        ->setTitle($this->l('Care & Sizing'))
        ->setContent($this->fetch('module:mymodule/views/templates/hook/tab.tpl'));

    return [$tab];
}

(Das ersetzt das alte Zwei-Hook-Modell aus 1.6 mit displayProductTab für die Beschriftung und displayProductTabContent für den Inhalt; beide wurden in 1.7 entfernt.) Ein sauber gebautes Modul lässt Sie mehrere Tabs definieren, sie nach Produkt oder Kategorie ausspielen und — wichtig — den Inhalt direkt in das initiale HTML der Seite ausgeben, statt ihn erst beim Klick per AJAX nachzuladen. Dieses letzte Detail ist nicht kosmetisch. Es ist der Unterschied zwischen Inhalten, die Google indexiert, und Inhalten, die Google nie sieht. Genau darum geht es im nächsten Abschnitt.

Liest Google, was in einem ausgeblendeten Tab steht?

Das ist die Frage, die für die SEO-Hälfte der Entscheidung wirklich zählt. Die ehrliche Antwort hat zwei Teile:

• Mit CSS ausgeblendete Inhalte (display:none) werden in der Regel indexiert. Wenn der vollständige Tab-Inhalt im initialen HTML der Seite steht und ein Tab nur visuell eingeklappt ist, kann Google ihn lesen. Ihre Spezifikationen, FAQ-Antworten und Anleitungstexte tragen also zur Keyword-Relevanz der Seite bei, obwohl ein Besucher immer nur einen Tab auf einmal sieht. Das ist der Vorteil: Sie bieten Tiefe, ohne die sichtbare Seite zu überfrachten.
• Inhalte, die beim Klick per AJAX geladen werden, möglicherweise nicht. Wenn ein Tab seinen Inhalt erst abruft, wenn der Kunde darauf klickt, steht dieser Text nicht im HTML, das der Crawler zuerst erhält. Auf eine Indexierung sollten Sie sich dann nicht verlassen.

Warum ist das wichtig? Bevorzugen Sie Tabs, deren Inhalte serverseitig in das initiale HTML gerendert werden. Das ist eine einzelne technische Entscheidung mit überproportionaler Wirkung: dieselben Wörter arbeiten für den Rechercheur und für die Suche. Ob versteckte Tab-Inhalte genauso stark ranken wie sichtbare Inhalte, wird durchaus diskutiert, und auch Googles eigene Empfehlungen haben sich im Lauf der Jahre verschoben — deshalb gilt für Inhalte, auf die Sie besonders ranken möchten: Die stärkste Kopie gehört in die immer sichtbare Beschreibung; Tab-Inhalte liefern unterstützende Tiefe, sind aber nicht der einzige Ort für wichtige Keywords. Für Produkttexte, die den größten SEO-Beitrag leisten, lesen Sie wie Sie Produktbeschreibungen schreiben, die ranken und konvertieren.

[SCREENSHOT: Frontoffice-Produktseite mit geöffneter Tab-Leiste auf einem benutzerdefinierten Tab „Pflege & Größen“, dazu die Quelltextansicht der Seite, in der der Text dieses Tabs bereits im initialen HTML vorhanden ist — der Punkt soll klar werden: Der Inhalt wird serverseitig gerendert und nicht per AJAX geladen.]

Die Tab-Leiste so gestalten, dass sie genutzt wird

Ein Tab, den niemand öffnet, ist Ballast. Einige Entscheidungen machen den Unterschied zwischen einer Leiste, die hilft, und einer, die überfordert:

• Beschränken Sie sich auf 3–5 Tabs. Ab sieben wirkt die Leiste überladen und die Beschriftungen beginnen umzubrechen. Fassen Sie natürlich zusammengehörende Inhalte zusammen — „Versand & Rückgabe“ als ein Tab ist besser als zwei dünne Tabs.
• Ordnen Sie nach Nachfrage, nicht nach Ihrem Organigramm. Beschreibung zuerst, Spezifikationen an zweiter Stelle (bei technischen Produkten ist das nach dem Haupttext der am häufigsten geöffnete Tab) und Tabs mit geringem Traffic wie Downloads oder Garantie ans Ende.
• Leere Tabs ausblenden. Ein Produkt ohne Anhänge sollte keinen leeren Downloads-Tab anzeigen — leere Tabs wirken wie ein halbfertiger Shop. Gute Tab-Module unterdrücken einen Tab automatisch, wenn sein Inhalt leer ist; wenn Sie Templates von Hand überschreiben, müssen Sie diese Prüfung selbst programmieren (ein weiterer Grund, warum der Modulweg besser altert).
• Inhalte im Tab formatieren. Tabellen für Spezifikationen, Aufzählungen für Funktionen, kurze Blöcke für FAQ. Ein dichter Absatz in einem Tab wird genau von dem Rechercheur nicht gelesen, für den Sie den Tab geöffnet haben.

Auf Mobilgeräten sollten Tabs zum Akkordeon werden

Ein unverändertes PrestaShop garantiert kein mobiles Akkordeon für Produkt-Tabs — je nach CSS des Themes brechen die Bootstrap-Tabs einfach um oder bleiben als horizontale Leiste stehen — prüfen Sie also zuerst, wie sich Ihr eigenes Theme auf einem Smartphone tatsächlich verhält. Wenn es das nicht bereits tut, lohnt es sich, die Tab-Leiste unterhalb eines Breakpoints als gestapeltes Akkordeon umzusetzen: Ein Tipp auf die Überschrift öffnet den jeweiligen Abschnitt. Das ist in der Regel das richtige Verhalten und sollte bewusst gestaltet werden:

• Akkordeon schlägt horizontales Scrollen. Eine Tab-Reihe, die auf dem Smartphone seitlich gewischt werden muss, versteckt Beschriftungen außerhalb des Bildschirms; ein Akkordeon zeigt alle Abschnittstitel auf einmal und öffnet nur das, was angetippt wird.
• Niemals Tabs in Tabs verschachteln. Die kognitive Last einer zweistufigen Navigation auf einem 6-Zoll-Display ist zu hoch — machen Sie die Struktur flach.
• Die eingeklappte Reihenfolge testen. Ein Akkordeon verwendet typischerweise dieselbe Quellreihenfolge. Der Tab, den Sie als „ersten“ festgelegt haben, ist also auch der erste Abschnitt, den ein Smartphone-Kunde öffnet — prüfen Sie das in Ihrem Theme. Einmal richtig sortieren, und die Reihenfolge sollte in beiden Layouts stimmen.

Tabs, die eigentlich keine Spezifikationen sind: Bewertungen, Fragen & Antworten und Video

Mehrere Dinge, die oft in der Tab-Leiste landen, sind gar keine Referenzinhalte — sondern eigenständige Funktionen, die nur zufällig über dieselben Hooks gerendert werden. Jede hat in diesem Bereich ihren eigenen Platz:

• Der Bewertungen-Tab wird von einem Bewertungsmodul gesteuert, nicht von irgendetwas im Produkteditor. Welches Modul Sie verwenden, ist eine eigene Entscheidung — PrestaShop-Bewertungen: integriert oder Drittanbieter.
• Ein Produkt-Q&A-Tab / „Frage zu diesem Produkt“-Tab verwandelt Fragen vor dem Kauf in beantwortete Einwände. Das behandelt Fragen zum Produkt stellen, und der breitere FAQ-Ansatz steht in FAQ-Seiten für E-Commerce.
• Ein Produktvideo steht oft in einem eigenen Tab oder Panel — siehe YouTube-Integration für PrestaShop.

Diese Elemente als eigene Funktionen zu behandeln (statt ihre Inhalte in einen generischen benutzerdefinierten Tab zu kopieren), ist das, was sie ihre jeweilige Aufgabe erfüllen lässt — ein Bewertungs-Tab braucht Sterneaggregation und strukturierte Daten, kein Textfeld.

Messen Sie, welche Tabs ihren Platz verdienen

Sie müssen nicht raten, welche Tabs wichtig sind. Versehen Sie die Überschrift jedes Tabs in Ihrer Analyse mit einem Klick-Event und lassen Sie einen Monat echte Besucherzugriffe sprechen:

• Wonach Kunden tatsächlich suchen — der am häufigsten geöffnete Tab enthält die Inhalte, die weiter nach oben auf die Seite gehören, vielleicht sogar aus dem Tab heraus in den sichtbaren Seitenkörper.
• Welche Tabs tot sind — ein Tab, der über Tausende Aufrufe hinweg fast nie geöffnet wird, ist ein Kandidat zum Zusammenlegen oder Entfernen, damit die Leiste wieder näher an den sinnvollen Bereich von 3–5 Tabs rückt.
• Ob Tab-Tiefe mit Käufen zusammenhängt — wenn Kunden, die den Spezifikations-Tab öffnen, sichtbar besser konvertieren, ist das ein Signal, Spezifikationen prominenter zu zeigen, statt sie einen Klick entfernt zu verstecken.

Häufig gestellte Fragen

Was ist der Unterschied zwischen Eigenschaften und einem benutzerdefinierten Tab — wann nutze ich was?

Eigenschaften sind strukturierte Name/Wert-Paare (Gewicht: 2,4 kg), die automatisch im Tab Produktdetails erscheinen und die Facettensuche speisen. Ein benutzerdefinierter Tab enthält freie Inhalte — eine Pflegeanleitung, FAQ, Kompatibilitätshinweise — die nicht in eine Name/Wert-Liste passen und nach denen ein Kunde niemals filtern würde. Faustregel: Wenn es eine messbare Spezifikation ist, nach der ein Käufer filtern könnte, ist es eine Eigenschaft; wenn es Fließtext oder eine Anleitung ist, ist es ein benutzerdefinierter Tab.

Kann ich denselben Tab für jedes Produkt einer Kategorie anzeigen, ohne jedes einzelne zu bearbeiten?

Nicht mit dem Kern allein — PrestaShop bietet produktbezogene Eigenschaften und Anhänge, aber keinen nativen „kategorieweiten Tab“. Ein Tab-Modul, das Inhalte nach Kategorie ausspielt, kann genau das: Sie schreiben die Größentabelle einmal, und sie erscheint auf jedem Produkt dieser Kategorie. Eine Änderung ist dann eine Bearbeitung, nicht 300. Das ist der Hauptgrund, warum Shops zu einem Tabs-Modul greifen, statt gemeinsam genutzte Inhalte pro Produkt einzufügen.

Zählt versteckter Tab-Inhalt für SEO, oder ist er verschwendet?

Wenn der Inhalt serverseitig in das initiale HTML der Seite gerendert und nur per CSS eingeklappt wird, liest Google ihn in der Regel — er trägt also zur Relevanz bei, obwohl ein Besucher immer nur einen Tab auf einmal sieht. Die Falle sind AJAX-Tabs, die ihren Inhalt erst beim Klick abrufen: Dieser Text steht nicht in der ersten Antwort und kann nicht zuverlässig indexiert werden. Halten Sie Ihre wichtigsten Keywords in der immer sichtbaren Beschreibung und nutzen Sie Tabs für unterstützende Tiefe.

Überstehen benutzerdefinierte Tabs ein Theme- oder PrestaShop-Update?

Wenn sie über den Hook displayProductExtraContent hinzugefügt werden (also per Modul), ja — sie berühren keine Theme-Dateien, daher kann ein Theme-Update sie nicht zerstören. Wenn Sie sie direkt durch Bearbeiten von product.tpl oder tabs.tpl hinzugefügt haben, nein — das nächste Theme-Update kann diese Partials neu sortieren, und Ihre Tabs verschwinden still. Diese Updatesicherheit ist das ganze Argument für den Hook-Weg statt Template-Chirurgie.

Wie viele Tabs sind zu viele?

Bleiben Sie bei 3–5. Ab etwa sieben bricht die Leiste um, Beschriftungen werden abgeschnitten, und Kunden hören auf, sie zu scannen. Fassen Sie dünne Tabs zusammen (ein Tab „Versand & Rückgabe“ ist besser als zwei), ordnen Sie nach Nachfrage statt nach interner Logik, und blenden Sie jeden Tab automatisch aus, dessen Inhalt leer ist, damit die Leiste nie halbfertig wirkt.

Das Prinzip darunter ist dasselbe, nach dem die ganze Produktseite funktioniert: den schnellen Käufer und den gründlichen Rechercheur auf einer Seite bedienen, ohne dass der eine vom Inhalt des anderen ausgebremst wird. Tabs sind in PrestaShop genau das Werkzeug dafür — strukturierte Daten in Eigenschaften, geteilte Inhalte in kategorieweite Tabs, produktbezogene Details in saubere benutzerdefinierte Tabs, die stärkste Kopie serverseitig gerendert und sichtbar halten, und Klickdaten entscheiden lassen, was als Nächstes prominenter werden sollte. Wenn das gelingt, bleibt die Seite für den kaufbereiten Besucher aufgeräumt und beantwortet trotzdem alle Fragen derjenigen, die noch nicht so weit sind.