Wichtigste Erkenntnisse
- Die Anpassung von Produktseiten findet an zwei Orten statt: im Theme Editor (Layout und Abschnitte) und im Produkt-Editor (Inhalt).
- Du kannst Blöcke – Bilder, Titel, Preis, Beschreibung, In-den-Warenkorb-Button – bei den meisten modernen Shopify-Themes direkt im Theme Editor neu anordnen.
- Das Hinzufügen neuer Abschnitte (Bewertungen, Upsells, FAQs, Vergleichstabellen) unter den Hauptproduktinfos ist im Theme Editor ganz einfach.
- Für ein komplett individuelles Layout, das über die Funktionen deines Themes hinausgeht, kann Fudge es einfach aus einer Beschreibung heraus erstellen.
Deine Produktseite ist der Ort, an dem Kaufentscheidungen getroffen werden. Die meisten Shopify-Shops nutzen das Standardlayout ihres Themes – oft gibt es viel Spielraum, um die Conversion Rate zu verbessern, indem Elemente neu angeordnet und die richtigen Abschnitte hinzugefügt werden.
Warum Sie uns vertrauen können
Jacques hat über 15 Jahre Erfahrung in der Shopify-Entwicklung und hat bereits mit hunderten von Marken an der Optimierung ihrer Produktseiten gearbeitet. Wir haben Fudge entwickelt – einen KI-Storefront-Editor, der von hunderten Stores genutzt wird und eine Bewertung von 4.9 im Shopify App Store hat.
Zwei Dinge, die Sie auf einer Produktseite anpassen können
1. Content — der Produkttitel, die Beschreibung, Bilder, der Preis und Varianten. Dies geschieht im Produkt-Editor: Produkte → Produkt auswählen → Bearbeiten.
2. Layout — die Anordnung der Elemente, zusätzliche Abschnitte und das Design. Dies geschieht im Theme Editor: Online-Shop → Themes → Anpassen → zu einer Produktseite navigieren.
Die meisten Fragen zur Individualisierung beziehen sich auf das Layout. Hier kommen der Theme Editor und Fudge ins Spiel.
Passend dazu: Garantien zu einer Shopify-Produktseite hinzufügen.
So ordnen Sie Blöcke auf der Produktseite im Theme-Editor neu an
Moderne Shopify-Themes (Online Store 2.0) ermöglichen es Ihnen, einzelne Elemente innerhalb des Produktbereichs per Drag-and-Drop zu verschieben – Titel, Preis, Beschreibung, Warenkorb-Button, Variantenauswahl und mehr.
Schritt 1. Gehen Sie zu Onlineshop → Themes → Anpassen.
Schritt 2. Navigieren Sie zu einer Produktseite. Klicken Sie in der Seitenauswahl oben auf einen beliebigen Produktnamen oder rufen Sie eine Produkt-URL direkt im Editor auf.
Schritt 3. Klicken Sie in der linken Seitenleiste auf den Bereich Produktinformationen. Sie sehen eine Liste von Blöcken – Titel, Preis, Anzahl, In den Warenkorb, Beschreibung usw.
Schritt 4. Ziehen Sie die Blöcke in die gewünschte Reihenfolge. Eine gängige, Conversion-optimierte Reihenfolge ist: Bilder → Titel → Bewertungs-Snippet → Preis → Varianten → In den Warenkorb → Kurzbeschreibung → Trust Badges.
Schritt 5. Speichern.
So fügen Sie Abschnitte zu einer Shopify-Produktseite hinzu
Unter den Haupt-Produktinformationen kannst du Abschnitte in voller Breite hinzufügen – dieselben Abschnitte, die auch auf deiner Startseite verfügbar sind.
Scrolle im Theme Editor auf einer Produktseite in der linken Seitenleiste am Produktabschnitt vorbei nach unten und klicke auf Abschnitt hinzufügen. Du kannst Folgendes hinzufügen:
- Bewertungen (falls du eine Reviews-App nutzt, die sich in den Theme Editor integrieren lässt)
- Zuletzt angesehene Produkte
- Ähnliche Produkte / Empfehlungen
- FAQ-Akkordeons
- Rich Text oder Feature Callouts
- Bild mit Text für Informationen zu Inhaltsstoffen oder Marken-Content
Diese Abschnitte gelten für alle Produktseiten, es sei denn, du verwendest ein Custom Template für bestimmte Produkte.
Wenn Käufer sich Artikel in diesen Produktrastern als Vorschau ansehen sollen, ohne die Seite zu verlassen, schau dir an, wie du ein Quick-View-Modal hinzufügst.
Siehe auch: Ein Custom Template in Shopify hinzufügen.
Siehe auch: Review-Widgets in Shopify hinzufügen.
So erstellen Sie ein benutzerdefiniertes Template für ein bestimmtes Produkt
Wenn Sie für ein einzelnes Produkt ein anderes Layout wünschen (z. B. für ein Hero-Produkt mit einer eher redaktionellen Seite), können Sie ein benutzerdefiniertes Template erstellen.
Schritt 1. Klicken Sie im Theme-Editor oben auf die Seitenauswahl und wählen Sie Vorlage erstellen → Produkt.
Schritt 2. Geben Sie der Vorlage einen Namen (z. B. hero-produkt).
Schritt 3. Passen Sie das Layout im Theme-Editor an.
Schritt 4. Gehen Sie zu Produkte → wählen Sie das Produkt aus → weisen Sie in der rechten Seitenleiste unter Theme-Vorlage Ihre neue Vorlage zu.
Dieses Produkt nutzt nun das individuelle Layout. Alle anderen Produkte behalten das Standard-Template.
Anpassungen der Produktseite, die Code erfordern
Einige Funktionen für Produktseiten sind im Theme Editor nicht verfügbar:
- Sticky Add-to-Cart-Leiste — folgt dem Nutzer beim Scrollen
- Größentabellen-Modal (Size Guide) — öffnet sich, ohne die Seite zu verlassen
- Benutzerdefiniertes Tab-Layout — Produktbeschreibung, Materialien und Versand in Tabs unterteilt
- Vorher/Nachher-Bild-Slider — für Hautpflege, Kleidung, Haushaltswaren
- Benutzerdefinierte Trust-Badge-Leiste — Icons mit individuellem Text, in den meisten Themes nicht verfügbar
- Vergleichstabelle — zeige, wie dein Produkt im Vergleich zu Alternativen abschneidet
Dafür brauchst du entweder einen Entwickler oder ein Tool, das den Code für dich generieren kann.
Fudge übernimmt all das. Beschreibe einfach, was du möchtest:
„Füge meinen Produktseiten eine Sticky Add-to-Cart-Leiste hinzu, die angezeigt wird, wenn der Nutzer am Haupt-Kaufen-Button vorbeiscrollt.“
„Erstelle unter meiner Produktbeschreibung einen Tab-Bereich mit Tabs für: Beschreibung, Inhaltsstoffe, Anwendung, Versand.“
Fudge generiert den Code, du überprüfst den Entwurf und veröffentlichst ihn, wenn alles gut aussieht.
Siehe auch: Fudge Store Editor.
Siehe auch: Metafields zu Shopify-Produkten hinzufügen.
Siehe auch: Produkte in Shopify vergleichen.
Was macht eine hochgradig konvertierende Shopify-Produktseite aus?
Das Layout ist nur die halbe Miete; die Produktdaten dahinter sind die andere Hälfte. Das kostenlose Shopify Catalog Data Audit zeigt Produkte auf, deren Daten zu dürftig sind, als dass Käufer oder KI-Agenten etwas damit anfangen könnten.
Neben der reinen Anpassungstechnik sind hier die Elemente, die die Conversion Rate kontinuierlich verbessern:
- Bewertungen weit oben – Social Proof frühzeitig, noch bevor gescrollt wird
- Klare Varianten-Auswahl – verlinkte Größentabellen, Farbmuster anstelle von Dropdowns
- Dringlichkeitssignale – Anzeigen für geringen Lagerbestand, Liefer-Countdowns (ehrlich eingesetzt)
- Kurze, nutzenorientierte Beschreibungen – Aufzählungspunkte statt langer Absätze für schnelles Überfliegen
- Verschiedene Bildperspektiven – Lifestyle-, Detail- und Größenvergleichsaufnahmen
- Trust Badges im sichtbaren Bereich (Above the fold) – kostenlose Rücksendung, sicherer Checkout, schnelle Lieferung
FAQ
Wenn du Blöcke im Standard-Produkttemplate neu angeordnet hast, gilt die Änderung für alle Produkte, die es verwenden. Wenn du ein benutzerdefiniertes Template (z. B. product.hero) angepasst hast, gilt dies nur für Produkte, die diesem Template zugewiesen sind. Überprüfe unter Produkte → Produkt → Theme-Template, welches Template jedes Produkt verwendet.
Nur wenn Produkte wirklich unterschiedliche Layouts benötigen – ein Hero-Produkt mit einer ausführlichen Story-Seite, ein Geschenkgutschein ohne In-den-Warenkorb-Button, ein Abo-Produkt mit Frequenzauswahl. Erstelle ansonsten nicht pro Produkt ein Template; du verbringst sonst Zeit damit, 50 fast identische Templates zu pflegen, anstatt ein gemeinsames.
Den Kauf-Block (Titel, Preis, Varianten, In-den-Warenkorb) plus 4–8 unterstützende Blöcke (Beschreibung, Bewertungen, ähnliche Produkte, FAQ, Inhaltsstoffe etc.). Ab ca. 10 Blöcken wird die Seite auf Mobilgeräten sehr lang und langsam. Nutze aufklappbare Blöcke, um die sichtbare Seite kompakt zu halten und gleichzeitig detaillierte Infos bei Bedarf anzuzeigen.
Ja, über Liquid im Abschnitts-Template. Der native Theme Editor bietet das nicht direkt an – beschreibe Fudge einfach die Regel ("zeige diesen Trust-Block nur bei Produkten mit dem Tag 'high-ticket'") und es packt den Block in die richtige {% if product.tags contains '…' %}-Bedingung. Alternativ kannst du den Liquid-Code des Abschnitts selbst bearbeiten.
Geringfügig, je nachdem, was sie enthalten. Ein paar zusätzliche Rich-Text- oder Bildblöcke fallen kaum ins Gewicht. App-gesteuerte Abschnitte (Bewertungs-Widgets, Upsell-Leisten) fügen oft jeweils 50–200 KB JavaScript hinzu. Wenn die Ladegeschwindigkeit (Page Speed) wichtig ist, überprüfe, welche Apps Skripte im Produkttemplate laden, und entferne alles, was keinen echten Mehrwert bringt.