Shopify Produktseiten-Layout anpassen

Das Wichtigste in Kürze

Ziehe im Theme Editor Blöcke innerhalb des Hauptprodukt-Bereichs (Main product) einfach per Drag-and-Drop, um sie neu anzuordnen.

Unter dem Hauptprodukt-Bereich kannst du Abschnitte für Inhalte wie Bewertungen, FAQs oder ähnliche Produkte hinzufügen.

Erstelle individuelle Produktseiten-Templates für bestimmte Produkte oder Kollektionen.

Für Layouts, die über die Möglichkeiten des Theme Editors hinausgehen, kannst du Fudge nutzen.

Eine gut strukturierte Produktseite präsentiert Käufern die richtigen Informationen genau im passenden Moment ihrer Kaufentscheidung. Einen Garantie-Block zu verschieben, die Position der Beschreibung zu ändern oder ein komplett individuelles Layout zu erstellen, kann einen echten Unterschied für deine Conversions bedeuten.

Warum du uns vertrauen kannst

Wir haben mit hunderten von Shopify-Marken an der Optimierung ihrer Produktseiten gearbeitet. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer 5,0-Sterne-Bewertung im Shopify App Store.

So ordnest du Blöcke auf der Shopify-Produktseite neu an

Schritt 1. Gehen Sie zu Onlineshop > Themes > Anpassen.

Schritt 2. Navigiere über die Seitenauswahl oben zu einer beliebigen Produktseite.

Schritt 3. Suchen Sie in der linken Seitenleiste den Bereich Produktinformationen (Main product) und klicken Sie darauf, um die Blockliste zu erweitern.

Schritt 4. Sie sehen die Blöcke in der Reihenfolge aufgelistet: normalerweise Titel, Preis, Varianten-Auswahl, Mengenauswahl, In den Warenkorb, Beschreibung. Ziehen Sie die Griffe neben jedem Block, um sie neu anzuordnen.

Schritt 5. Speichern.

Gängige Neuanordnungen, die die Conversion verbessern:

Ähnlich: Blöcke innerhalb eines Shopify-Abschnitts verschieben.

Ähnlich: Deine Shopify-Produktseite anpassen.

Verschieben Sie Social Proof (Bewertungszusammenfassung oder Sternebewertung) weiter nach oben, näher zum Titel
Platzieren Sie Garantietexte direkt unter dem Add-to-Cart-Button
Rücke die Beschreibung weiter nach unten, wenn der ATC-Button ohne Scrollen sichtbar sein soll
Platziere einen Größenberater oder einen Block mit Passform-Informationen direkt über der Varianten-Auswahl

Neue Blöcke zur Produktseite hinzufügen

Schritt 1. Navigiere im Theme-Editor zu einer Produktseite.

Schritt 2. Klicke in der linken Seitenleiste innerhalb des Abschnitts „Produktinformationen“ auf Block hinzufügen.

Schritt 3. Wähle aus den Blocktypen deines Themes. Häufige Optionen: Text, Rich Text, Ausklappbare Zeile, Bild, Bewertung, Custom HTML.

Schritt 4. Konfiguriere den Inhalt des Blocks und positioniere ihn durch Ziehen.

Schritt 5. Speichern.

Abschnitte unterhalb des Hauptproduktbereichs hinzufügen

Zusätzlich zum eigentlichen Produktbereich kannst du darunter Abschnitte in voller Breite hinzufügen.

Schritt 1. Scrolle in der linken Seitenleiste am Abschnitt „Produktinformationen“ vorbei nach unten.

Schritt 2. Klicke auf Abschnitt hinzufügen (meist ganz unten in der Liste).

Schritt 3. Wähle einen Abschnittstyp – typische Ergänzungen unter Produktseiten sind: Produktbewertungen, Ähnliche Produkte, Zuletzt angesehen, Rich Text, FAQ/Akkordeon.

Schritt 4. Positionieren und konfigurieren.

Schritt 5. Speichern.

Eine eigene Vorlage für Produktseiten erstellen

Wenn Sie ein anderes Layout für bestimmte Produkte wünschen – eine ausführliche Sales Page für Ihr Hero-Produkt oder ein minimalistisches Layout für einfache Produkte – können Sie benutzerdefinierte Templates erstellen.

Schritt 1. Gehen Sie zu Onlineshop > Themes > Aktionen > Code bearbeiten.

Schritt 2. Suchen Sie im Ordner templates/ die Datei product.json.

Schritt 3. Klicken Sie auf das Drei-Punkte-Menü daneben und wählen Sie Kopie hinzufügen. Benennen Sie sie product.hero.json oder ähnlich.

Schritt 4. Gehen Sie zum Theme Editor. Navigieren Sie zu einer Produktseite. Unten links sehen Sie ein Dropdown-Menü Template – wählen Sie Ihr neues Template aus.

Schritt 5. Passen Sie dieses Template separat vom Standard an. Änderungen an product.hero.json wirken sich nur auf Produkte aus, die dieses Template verwenden.

Schritt 6. Öffnen Sie im Shopify Admin ein Produkt > scrollen Sie zum Bereich Theme-Templates > weisen Sie das benutzerdefinierte Template zu.

Du benötigst ein Produktseiten-Layout, das über die Möglichkeiten des Theme Editors hinausgeht? Beschreibe es Fudge.

Try Fudge for Free

Ähnlich: Ein benutzerdefiniertes Template in Shopify hinzufügen.

Ähnlich: Video zur Produktgalerie in Shopify hinzufügen.

Gängige Layout-Muster für Produktseiten

Standard E-Commerce Layout: Bilder (links) / Titel, Preis, Varianten, ATC, Garantie, Beschreibung (rechts)

Long-form Sales Page Layout: Hero-Bild in voller Breite, Story zum Produkt, Feature-Blöcke, Testimonials, ATC, FAQs

Minimales Layout: Großes Bild, Titel, Preis, nur ATC – alles andere eingeklappt oder entfernt

Tab-Layout: Hauptinfos sichtbar, Beschreibung / Pflege / Inhaltsstoffe / Specs in Tabs darunter

Mit Fudge über den Theme-Editor hinausgehen

Der Theme-Editor beschränkt dich auf die Abschnitts-Bibliothek deines Themes. Wenn du ein Layout willst, das sich nicht per Drag-and-drop umsetzen lässt, kann Fudge es für dich bauen.

Beispiel-Prompts:

„Erstelle ein benutzerdefiniertes Produktseiten-Template für unser Hero-Produkt – Sticky-Hero-Bild über die volle Breite, scrollbares Info-Panel rechts, Key-Features-Abschnitt darunter, Testimonials-Grid und ein Sticky-ATC-Button.“
„Strukturiere unsere Produktseite so um, dass die Beschreibung in einem Tab-Bereich mit drei Tabs erscheint: Übersicht, Inhaltsstoffe, Pflegehinweise.“

Fudge generiert den Liquid-Code als Entwurf in deinem Theme. Du kannst ihn überprüfen, bevor du ihn veröffentlichst.

FAQ

Was ist die beste Reihenfolge der Blöcke auf einer Shopify-Produktseite?

Eine bewährte, auf Conversions getestete Reihenfolge ist: Galerie → Titel → Bewertungs-Snippet → Preis → Varianten-Auswahl → Menge → Add-to-Cart (In den Warenkorb) → Trust/Garantie-Zeile → Kurzbeschreibung → ausklappbare Detailbeschreibung. Setze Social Proof und den Kauf-Button weit nach oben; platziere längere Texte weiter unten. Teste es in deinem Shop mit deinem eigenen Traffic – die optimale Reihenfolge variiert je nach Kategorie.

Sollten Bilder links oder rechts vom Kauf-Block präsentiert werden?

Bilder links und der Kauf-Block rechts entsprechen dem westlichen Lesemuster und konvertieren in den meisten A/B-Tests etwas besser. Einige Fashion- und Lifestyle-Marken drehen das aus Designgründen um. Bleibe auf jeden Fall konsistent über alle Produkte hinweg – ein Wechsel mitten im Katalog ist für wiederkehrende Käufer extrem irritierend.

Kann ich Blöcke auf der Produktseite für Mobile und Desktop unterschiedlich anordnen?

Nicht über den normalen Theme Editor – die Reihenfolge der Blöcke ist für alle Bildschirmgrößen (Viewports) gleich. Die sauberste Lösung: Beschreibe die mobil-spezifische Reihenfolge für Fudge, und das Tool schreibt die passenden CSS order-Overrides verpackt in einer Media Query für Mobile. Ein häufiges Muster: Auf dem Desktop steht der Kauf-Block über der Beschreibung, auf mobilen Geräten darunter (damit die Galerie als Erstes direkt ins Auge springt).

Sollte ich eine Sticky Add-to-Cart-Leiste hinzufügen?

Ja, für Produktseiten, bei denen Käufer am Hauptkauf-Button vorbeiscrollen müssen, um Details zu lesen. Eine Sticky-Leiste (mit Produktname, Preis und ATC-Button) steigert die Conversion auf langen Produktseiten in der Regel um 5–15 %. Halte sie minimalistisch – riesige Sticky-Bars wirken aufdringlich und verdecken auf mobilen Geräten oft wichtige Inhalte.

Konvertieren Bewertungen über oder unter dem Add-to-Cart-Button besser?

Ein Sterne-Bewertungs-Snippet in der Nähe des Titels (über dem ATC) funktioniert am besten – es ist ein schnelles Trust-Signal im Moment der Entscheidung. Die kompletten Bewertungen solltest du unter dem ATC oder in einem ausklappbaren Bereich platzieren. Setze keine riesige Review-Wall über den Kauf-Button; dadurch rutscht die eigentliche Aktion aus dem sichtbaren Bereich (Below the fold) und schadet der Conversion.