PrestaShop-Produktseitendesign: Best Practices für mehr Conversions

Zuletzt geprüft im Juni 2026 — abgeglichen mit PrestaShop 1.7, 8 und 9. Die unten genannten Template-Pfade, Hooks und Back-Office-Bereiche sind aktuell; Produkt-URLs in PrestaShop 9 enthalten den Kategoriepfad standardmäßig nicht mehr, was relevant ist, wenn Sie Produkte umbenennen (behandelt im Abschnitt zur mobilen Darstellung und zur Struktur der unteren Seitenhälfte).

Ihre Startseite bekommt von Designern meist die meiste Aufmerksamkeit, aber Ihre Produktseite bekommt die meiste Aufmerksamkeit von Käufern. Sie ist der letzte Bildschirm, den ein Besucher sieht, bevor er entweder auf "In den Warenkorb" klickt oder zurückgeht. In den meisten PrestaShop-Shops ist sie zugleich die am stärksten vernachlässigte Seite: einmal beim Einrichten des Themes angelegt und danach nie wieder angefasst. In diesem Leitfaden geht es um eine konkrete Sache: das Design dieser Seite. Nicht um die Produktfotografie, nicht um das Texten, nicht darum, welches Trust-Widget Sie kaufen sollten — diese Themen werden weiter unten jeweils separat behandelt — sondern um die Layout-Entscheidungen, die darüber bestimmen, ob ein Besucher, der das Produkt bereits kaufen möchte, den Kaufbutton ohne Reibung erreicht.

"Design" bedeutet hier nicht, die Seite hübscher zu machen. Gemeint ist die Reihenfolge, in der Dinge erscheinen, was oberhalb des sichtbaren Bereichs steht, wie der Blick vom Preis zum Button geführt wird und welche Template-Dateien und Theme-Einstellungen von PrestaShop Sie anfassen müssen, um etwas daran zu ändern. Wenn die Anordnung nicht stimmt, konvertiert selbst eine Seite mit schönen Fotos und gut geschriebenen Texten schlecht, weil der Kunde nie zu dem Teil gelangt, der entscheidend ist.

Was "Produktseitendesign" in PrestaShop konkret bedeutet

In einem PrestaShop-Shop mit Version 1.7, 8 oder 9 wird die Produktseite vom product-Controller gerendert und aus einigen Smarty-Templates im Ordner themes/your-theme/templates/catalog/ zusammengesetzt — vor allem aus product.tpl. Der rechte Kaufbereich entsteht aus Partials unter catalog/_partials/ (Sie werden product-add-to-cart.tpl, product-prices.tpl, product-variants.tpl und product-flags.tpl wiedererkennen). Die zweispaltige Anordnung "Bilder links, Kaufbox rechts", die die meisten Shops nutzen, ist das Standardlayout des Classic-Themes. Das ist wichtig, weil fast jede Designänderung, die Sie vornehmen möchten, entweder eine Template-Anpassung in diesem Ordner, eine Änderung der Hook-Position oder eine Einstellung im Back Office ist — kein Rätsel, für das Sie ein komplettes Redesign brauchen.

Die Hooks, die steuern, was rund um die eigentliche Kaufbox erscheint, werden Sie am häufigsten nutzen: displayProductActions und displayProductPriceBlock liegen innerhalb des Kaufbereichs, displayProductAdditionalInfo sitzt direkt darunter, displayProductExtraContent befüllt die unteren Produkt-Tabs, und displayFooterProduct steuert die Blöcke unterhalb des Produkts. Was heißt das für Sie? Wenn Sie ein Badge, eine Lieferzeitangabe oder einen Vertrauenshinweis an einer bestimmten Stelle platzieren möchten, wählen Sie einen Hook — statt Theme-Dateien zu bearbeiten und zu hoffen, dass das nächste Theme-Update Ihre Arbeit nicht überschreibt. Ein sauber gebautes Modul hängt sich an diese Hooks, anstatt Ihre product.tpl zu forken. Genau das sorgt dafür, dass Ihre Designänderungen Updates überstehen.

Wenn Sie Module, die im Kaufbereich landen, neu sortieren möchten, statt ein Template umzuschreiben, führt der schnellste Weg über das Back Office: Design → Positionen listet jedes Modul auf, das an den jeweiligen Hook angehängt ist, und erlaubt es, die Module nach oben oder unten zu ziehen. Genau dort beheben Sie das Problem "ein Modul schiebt meinen Button unter den sichtbaren Bereich", ohne eine einzige .tpl-Datei anzufassen.

Die Kaufbox oberhalb des sichtbaren Bereichs ist die eine Designentscheidung, die immer zählt

Alles, was ein Käufer für seine Entscheidung braucht, sollte ohne Scrollen sichtbar sein: Produktname, Preis, Hauptbild, Variantenauswahl, Bestands-/Verfügbarkeitszeile und der Button "In den Warenkorb". Das ist die eine Designregel, die jeden Redesign-Trend überlebt. Wenn ein Besucher erst an einer 500-Wörter-Beschreibung vorbeiscrollen muss, um den Preis zu finden, verlässt ein spürbarer Teil einfach die Seite — er liest "dieser Shop macht es mir schwer", bevor er auch nur ein Wort Ihres Textes gelesen hat.

Im Classic-Theme von PrestaShop sitzt die Kaufbox bereits dort oben, aber drei Dinge schieben sie häufig nach unten oder beschädigen das Layout:

• Eine überdimensionierte Bildspalte. Wenn Ihre Produktbilder mit uneinheitlichen Seitenverhältnissen hochgeladen werden, wächst die Galeriespalte in die Höhe und drückt die Kaufbox auf kleineren Laptops aus dem sichtbaren Bereich. Korrigieren Sie die Bildabmessungen an der Quelle — behandelt in Produktfotografie für den E-Commerce — statt mit CSS-Notlösungen.
• Eine Textwand in der Kurzbeschreibung. PrestaShop rendert die Kurzbeschreibung (das Feld Zusammenfassung, description_short) direkt innerhalb der Kaufspalte. Beschränken Sie sie auf zwei oder drei Nutzenzeilen; die lange Beschreibung gehört weiter nach unten. Diese kurze Angabe gut zu schreiben, ist ein eigenes Handwerk — siehe wie man Produktbeschreibungen schreibt, die ranken und konvertieren.
• Module, die sich über dem Button stapeln. Jedes Modul, das in displayProductActions oder den Preisblock eingehängt ist, schiebt den Button nach unten. Prüfen Sie, was dort tatsächlich ausgegeben wird.

Die visuelle Hierarchie: wohin der Blick der Reihe nach fallen sollte

Eine konvertierende Produktseite führt den Blick entlang eines klaren Pfads: zuerst das Bild (es bestätigt "ja, das ist genau das, wonach ich gesucht habe"), dann Name und Preis (die zwei Fakten, die über Weiterklicken oder Absprung entscheiden), dann Variante und Bestandszeile (bekomme ich die gewünschte Ausführung?), danach der Button. Bewertungen, Lieferung und Vertrauenssignale unterstützen diese Hauptlinie — sie konkurrieren nie beim ersten Blick mit ihr.

Der häufige Designfehler besteht darin, sekundären Elementen primäres visuelles Gewicht zu geben. Ein riesiges "KOSTENLOSER VERSAND"-Banner über dem Produktnamen, ein lautes Cross-Selling-Karussell, bevor der Kunde sich überhaupt für dieses Produkt entschieden hat, ein automatisch startendes Video, das Aufmerksamkeit kapert — jedes dieser Elemente zieht Fokus von der Hauptlinie ab. Der Test ist schonungslos einfach: Laden Sie Ihre Produktseite, schauen Sie eine Sekunde darauf und blicken Sie dann weg. Können Sie Produktname, Preis und Position des Buttons nennen? Wenn nicht, arbeitet Ihre Hierarchie gegen sich selbst.

Platzierungsentscheidungen, die wirklich etwas bewegen

Der Großteil der Designarbeit an Produktseiten besteht darin zu entscheiden, wo eine Handvoll Elemente stehen soll. Diese Platzierungen sind Template- bzw. Hook-Entscheidungen, und für die meisten Shops gibt es darauf eine robuste Antwort:

Die Vertrauenszeile unter dem Button verdient eine besondere Erwähnung, weil sie der wirkungsvollste Designgewinn mit dem geringsten Aufwand auf der gesamten Seite ist: eine einzelne Zeile mit Rückgaberichtlinie, akzeptierten Zahlungsarten und Sicherheitssignal, platziert dort, wo der Blick im Moment des Zögerns ohnehin liegt. Welche visuelle Form diese Signale haben sollten — und ob sie tatsächlich Vertrauen schaffen oder nur Unordnung erzeugen — ist ein eigenes Thema; siehe Trust-Badges und die umfassendere Frage, ob Ihr Shop vertrauenswürdig wirkt.

Die untere Seitenhälfte strukturieren: Tabs oder ein langer Scrollbereich

Unter der Kaufbox liegt die Detailhälfte der Seite — lange Beschreibung, Spezifikationen, Bewertungen, Versandinformationen. Die Designentscheidung heißt hier Struktur: Ein einzelner endloser Scrollbereich vergräbt alles hinter dem ersten Bildschirm, während gut gebaute Tabs detailorientierte Käufer direkt zu Spezifikationen oder Bewertungen springen lassen. Das Classic-Theme von PrestaShop stellt Beschreibung und Datenblatt bereits in Tabs dar; die Frage ist, ob Sie mehr Abschnitte brauchen (Installationsanleitung, Garantie, Größenangaben), als die zwei nativen Tabs erlauben. Das ist ein eigenes Thema mit einem eigenen Modulweg — Produkt-Tabs: Spezifikationen, Anleitungen und eigene Inhalte hinzufügen erklärt genau, wie Sie eigene Tabs ohne Bearbeitung von Theme-Dateien ergänzen. Wenn Sie diese Abschnitte lieber aus dem Back Office statt im Template hinzufügen möchten, hängt sich unser Modul Product Extra Info Tabs an displayProductExtraContent und lässt Sie katalogweite Tabs (etwa ein überall geteilter Tab "Versand") mit produktspezifischen Tabs kombinieren. So bleibt die untere Hälfte geordnet, ohne einen Theme-Fork, den das nächste Update überschreibt.

Eine Designregel für die untere Hälfte gilt unabhängig von der Struktur: Lassen Sie kein Bewertungs-Widget mit Endlos-Scroll ausufern, denn es schiebt Ihren Footer — mit Rückgaberichtlinie, Kontaktdaten und Trust-Signalen — dauerhaft außer Reichweite. Paginieren Sie Bewertungen, damit die Seite ein Ende hat.

Mobile ist ein anderes Design, nicht dasselbe Design in klein

Mehr als die Hälfte des Produktseiten-Traffics eines typischen PrestaShop-Shops kommt von Mobilgeräten, und ein Layout, das auf dem Desktop funktioniert, funktioniert auf dem Smartphone nicht automatisch. Die zweispaltige Desktop-Anordnung klappt zu einer einzelnen gestapelten Spalte zusammen, und die Reihenfolge dieses Stapels ist nun eine Designentscheidung, die Sie bewusst treffen müssen. Wenn sie stimmt, fühlt sich die Seite nativ an; wenn sie nicht stimmt, landet der Preis unter einem bildschirmfüllenden Foto und der Button irgendwo in weiter Ferne.

• Reihenfolge im Stapel: Bild, Name, Preis, Variante, Button — dann Beschreibung. Die Kaufentscheidung muss mit minimalem Scrollen erreichbar sein.
• Wischbare Galerie: Der Bildbereich sollte horizontal wischbar sein und keine vertikale Thumbnail-Liste erzwingen, die den Bildschirm auffrisst, bevor der Preis erscheint.
• Fixierter "In den Warenkorb"-Button: Eine feste Leiste am unteren Bildschirmrand mit Preis und Button hält die Kaufaktion in Reichweite, egal wie weit der Kunde in Spezifikationen und Bewertungen nach unten scrollt. Das ist das mobile Designmuster mit dem größten Einzelhebel.
• Einklappbare Abschnitte: Beschreibung, Spezifikationen und Bewertungen als Akkordeons, die die ersten Zeilen mit einem "Mehr lesen"-Schalter zeigen, damit die Seite auf kleinen Bildschirmen eine vernünftige Länge behält.

Wenn Sie die fixierte mobile Leiste selbst bauen, ist sie ein kleiner Block in der product.tpl Ihres Child-Themes, der dieselben Preis- und Warenkorb-Partials wiederverwendet, die die Haupt-Kaufbox bereits rendert, und nur auf kleinen Viewports angezeigt wird. Entscheidend ist, die vorhandenen Partials wiederzuverwenden, nicht das Markup zu duplizieren. So aktualisiert eine künftige Änderung am Preisblock beide Stellen gleichzeitig:

{* themes/your-child-theme/templates/catalog/product.tpl — sticky mobile buy bar *}
<div class="mpr-sticky-buy d-md-none">
  {block name='product_prices'}
    {include file='catalog/_partials/product-prices.tpl' product=$product}
  {/block}
  {block name='product_add_to_cart'}
    {include file='catalog/_partials/product-add-to-cart.tpl' product=$product}
  {/block}
</div>

/* custom.css — pin it to the bottom on phones only */
.mpr-sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 1030; background: #fff;
  padding: .5rem .75rem;
  box-shadow: 0 -2px 8px rgba(0,0,0,.08);
}

(Die Bootstrap-Utility d-md-none blendet sie ab Tablet-Breite aus, sodass der Desktop den normalen Button im Seitenfluss behält.)

Designentscheidungen, die Sie still und leise Conversions kosten

Einige beliebte "Design"-Entscheidungen arbeiten aktiv gegen die Seite. Dabei geht es nicht um Geschmack — jede einzelne beseitigt einen echten Grund, warum ein kaufbereiter Besucher abspringt:

• Automatisch abspielendes Produktvideo. Es verlangsamt die Seite, verbraucht mobile Daten und kapert die visuelle Hauptlinie. Zeigen Sie stattdessen einen Play-Button. (Wenn Video Ihr Produkt verkauft, ist der richtige Weg dafür in YouTube-Integration für verkaufsstarke Produktvideos beschrieben.)
• Pop-up-Overlays mit "Kunden sahen auch". Sie unterbrechen die Entscheidung im ungünstigsten Moment. Lassen Sie Cross-Sells auf der Seite leben, unterhalb des sichtbaren Bereichs, wo sie hingehören — die Strategie dazu finden Sie in Cross-Selling und Upselling.
• Den Preis hinter "Angebot anfragen" verstecken. In einem B2C-Shop verlieren Sie damit sofort den Großteil der Besucher. Wenn Ihr Modell es wirklich erfordert, zeigen Sie eine Spanne, damit die Seite keine Sackgasse ist.
• Ein auffälliges, leeres Gutscheinfeld. Wenn Sie die Aufmerksamkeit auf ein Rabattfeld lenken, für das der Kunde keinen Code hat, schicken Sie ihn zur Suche nach Google — und manche kommen nie zurück.

Seitengeschwindigkeit ist eine Designvorgabe, kein Nachgedanke

Produktseiten sind die schwersten Seiten in einem PrestaShop-Shop — Galerie, Varianten-JavaScript, Bewertungen und Cross-Selling-Module werden hier alle geladen. Ein Design, das perfekt aussieht, aber auf dem Smartphone vier Sekunden zum Rendern braucht, hat den Kunden bereits verloren, um dessen Aufmerksamkeit Sie mit dem Layout gerungen haben. Behandeln Sie das Budget als Teil des Designs: Zielen Sie auf einen Largest Contentful Paint unter 2,5 Sekunden auf Mobilgeräten und halten Sie die Seite in diesem Rahmen, indem Sie Cross-Selling- und Bewertungsbilder unterhalb des sichtbaren Bereichs per Lazy Loading laden, Bewertungsmodule erst verzögert laden, wenn der Kunde in ihre Nähe scrollt, das erste Produktbild vorladen und schonungslos begrenzen, wie viele Skripte von Drittanbietern (Chat, Heatmaps, Analytics) Sie auf die Seite lassen.

Woran Sie erkennen, ob Ihr Design tatsächlich konvertiert

Designmeinungen sind billig; das einzige ehrliche Urteil liefert eine Kennzahl: die In-den-Warenkorb-Rate auf der Seite — also der Anteil der Produktseitenbesucher, die den Artikel in den Warenkorb legen. Das Back Office von PrestaShop liefert Ihnen diese Zahl nicht direkt: Statistiken → Bestseller zeigt verkaufte Menge und Seitenaufrufe je Produkt (ein nützlicher Verkauft-pro-Aufruf-Näherungswert), und die Liste Bestellungen → Warenkörbe zeigt Warenkörbe, während sie entstehen. Die tatsächliche In-den-Warenkorb-Rate kommt jedoch aus Ihrer Analyse-Software. Welche Quelle Sie auch nutzen: Die Disziplin besteht darin, immer nur eine Sache auf einmal zu ändern — die Vertrauenszeile verschieben, die Kurzbeschreibung kürzen, die mobile Stapelreihenfolge korrigieren — und dieselbe Kennzahl über genügend Traffic hinweg zu beobachten, damit Sie einen echten Trend sehen und nicht nur Schwankungen von Woche zu Woche. Eine Layoutänderung, die sich "besser anfühlt", aber keine Zahl bewegt, ist nur Möbelrücken.

Eine stark konvertierende PrestaShop-Produktseite ist keine hübschere Seite — sie ist eine Seite, auf der die Hauptlinie (Bild, Name, Preis, Variante, Button) auf einen Blick erreichbar ist, die unterstützenden Signale genau dort sitzen, wo der Blick sie braucht, der mobile Stapel eigenständig gestaltet ist statt vom Desktop geerbt zu werden und das Ganze schnell rendert. Wenn diese Architektur stimmt, leisten Produktfotos, Texte und Trust-Widgets, die Sie danach hinzufügen, mehr, weil der Kunde sie endlich wirklich zu sehen bekommt.

Häufig gestellte Fragen

Sollte ich product.tpl direkt bearbeiten, um das Layout meiner Produktseite zu ändern?

Nur in einem Child-Theme und nur dann, wenn ein Hook oder eine Back-Office-Einstellung die Aufgabe nicht erfüllen kann. Wenn Sie die product.tpl des Parent-Themes direkt bearbeiten, überschreibt das nächste Theme-Update Ihre Arbeit. Die sauberere Reihenfolge lautet: zuerst über Design → Positionen die eingehängten Module neu sortieren, dann ein Modul verwenden, das sich an den richtigen Hook hängt, und erst danach ein Template-Override in themes/your-child-theme/templates/catalog/ ablegen, damit die Änderung Updates übersteht.

Wo erscheint die Kurzbeschreibung auf der Produktseite eigentlich?

Das Feld Zusammenfassung (description_short) wird in der Kaufspalte nahe am Preis gerendert, oberhalb des sichtbaren Bereichs — nicht in den unteren Tabs. Genau deshalb muss es kurz bleiben: zwei oder drei Nutzenzeilen. Die vollständige Beschreibung wird weiter unten gerendert, typischerweise in einem Tab. Denselben langen Text in beide Felder zu kopieren, ist der häufigste Grund dafür, dass eine Kaufbox aus dem sichtbaren Bereich gedrückt wird.

Warum sitzt ein Modul über meinem "In den Warenkorb"-Button, und wie verschiebe ich es?

Es ist in displayProductActions oder displayProductPriceBlock eingehängt, die innerhalb des Kaufbereichs gerendert werden. Gehen Sie zu Design → Positionen, suchen Sie diesen Hook und ziehen Sie das Modul unter die Module, die zuerst kommen müssen — oder hängen Sie es aus, wenn es überhaupt nicht über den Button gehört. Eine Template-Bearbeitung ist nicht nötig.

Hat PrestaShop eine integrierte fixierte mobile Leiste für "In den Warenkorb"?

Das Classic-Theme bringt standardmäßig keine mit. Sie ergänzen sie entweder über ein Modul, das sich in die Produktseite einhängt, oder mit einem kleinen Child-Theme-Block, der die vorhandenen Preis- und Warenkorb-Partials wiederverwendet (oben gezeigt), damit Sie kein Markup duplizieren. Es ist die mobile Änderung mit dem größten Einzelhebel auf der Seite, daher lohnt es sich, sie sauber umzusetzen statt mit einem kopierten Button.

Hat sich in PrestaShop 9 die Produkt-URL so geändert, dass es meine Designarbeit betrifft?

Ja — PrestaShop 9 entfernt die Kategorie standardmäßig aus der Produkt-URL, sodass der Slug allein aus dem Produktnamen generiert wird. Das ändert das Layout nicht, bedeutet aber, dass das Umbenennen eines Produkts die suchmaschinenfreundliche URL neu erzeugen und eingehende Links brechen kann, wenn keine Weiterleitung vorhanden ist. Wenn Sie kanonische Struktur und Weiterleitungen während einer Migration pflegen, hält ein spezialisiertes Werkzeug wie unser Modul SEO Revolution Slug- und Weiterleitungsverwaltung unter Kontrolle, damit eine Umbenennung Sie nicht unbemerkt Ranking kostet.