Shopify Produktseiten-Layout anpassen

Das Wichtigste in Kürze

Im Theme Editor kannst du Blöcke im Hauptprodukt-Abschnitt per Drag-and-Drop verschieben, um sie neu anzuordnen.

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

Erstelle benutzerdefinierte Produktseiten-Templates für bestimmte Produkte oder Kategorien.

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

Eine gut gestaltete Produktseite präsentiert Käufern die richtigen Informationen genau im richtigen Moment ihrer Entscheidungsfindung. 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 machen.

Warum du uns vertrauen kannst

Wir haben mit hunderten Shopify-Marken an der Optimierung von Produktseiten gearbeitet. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer Bewertung von 4.8 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 Block-Reihenfolge auf einer Shopify-Produktseite?

Eine gängige, auf Conversion getestete Reihenfolge: Galerie → Titel → Bewertungs-Snippet → Preis → Varianten-Auswahl → Menge → In den Warenkorb → Trust-Zeile/Garantien → Kurzbeschreibung → aufklappbare Detailbeschreibung. Setze Social Proof und den Kauf-Button nach oben; verschiebe längere Inhalte nach unten. Teste es in deinem Store mit deinem Traffic – die optimale Reihenfolge variiert je nach Kategorie.

Sollten Bilder links oder rechts vom Buy Block platziert werden?

Bilder links, Buy Block rechts ist das westliche Standard-Lesemuster und konvertiert in den meisten A/B-Tests etwas besser. Einige Bekleidungs- und Lifestyle-Marken drehen dies aus Designgründen um. Halte es produktübergreifend einheitlich – ein Wechsel mitten im Katalog ist für wiederkehrende Käufer irritierend.

Kann ich die Blöcke der Produktseite auf Mobile und Desktop unterschiedlich anordnen?

Nicht über den Standard-Theme-Editor – die Block-Reihenfolge ist für alle Viewports gleich. Die sauberste Lösung: Beschreibe Fudge die gewünschte mobile Reihenfolge, und es schreibt die passenden CSS order Overrides für eine Mobile Media Query. Gängiges Muster: Buy Block auf dem Desktop über der Beschreibung, auf Mobile darunter (damit die Galerie den ersten Viewport einnimmt).

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

Ja, für Produktseiten, auf denen Kunden am Haupt-Kaufen-Button vorbeiscrollen, um Details zu lesen. Eine Sticky Bar (die Produktname, Preis und ATC anzeigt) steigert die Conversion auf langen Produktseiten in der Regel um 5–15 %. Halte sie minimalistisch – große Sticky Bars wirken aufdringlich und können auf Mobilgeräten Inhalte verdecken.

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

Ein Sterne-Bewertungs-Snippet nahe am Titel (über dem ATC) funktioniert am besten – es ist ein schnelles Trust-Signal im Moment der Kaufentscheidung. Die kompletten Bewertungen gehören unter den ATC oder in einen aufklappbaren Bereich. Platziere keine riesige Review-Wall über dem Kaufen-Button; das schiebt die Aktion 'below the fold' und schadet der Conversion.