Shopify Produktseiten-Layout anpassen

Wichtige Erkenntnisse

Ziehe im Theme-Editor Blöcke innerhalb des Bereichs „Produktinformationen“, um sie neu anzuordnen.

Du kannst Abschnitte unterhalb des Hauptproduktbereichs für Inhalte wie Bewertungen, FAQs oder verwandte Produkte hinzufügen.

Erstelle eigene Vorlagen für Produktseiten für bestimmte Produkte oder Kollektionen.

Für Layouts, die über das Angebot des Theme-Editors hinausgehen, nutze Fudge.

Eine gut gestaltete Produktseite liefert Käufern die richtigen Informationen zum genau richtigen Zeitpunkt im Entscheidungsprozess. Das Verschieben eines Garantie-Blocks, das Ändern der Position der Beschreibung oder das Erstellen eines komplett individuellen Layouts kann einen echten Unterschied für die Conversions machen.

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 Block-Reihenfolge auf einer Shopify-Produktseite?

Eine gängige, auf Conversion getestete Reihenfolge: Galerie → Titel → Review-Snippet → Preis → Varianten-Auswahl → Menge → Add-to-Cart (oder In den Warenkorb) → Trust/Garantie-Leiste → Kurzbeschreibung → ausklappbare Detailbeschreibung. Social Proof und die Kauf-Aktion sollten weit oben stehen, lange Texte weiter unten. Teste es in deinem Shop mit deinem Traffic – die optimale Reihenfolge variiert je nach Kategorie.

Sollten Bilder links oder rechts vom Kauf-Block stehen?

Bilder links, Kauf-Block rechts entspricht dem westlichen Standard-Lesemuster und konvertiert in den meisten A/B-Tests etwas besser. Einige Fashion- und Lifestyle-Brands drehen das aus Designgründen um. Halte es auf jeden Fall konsistent über alle Produkte hinweg – ein Wechsel mitten im Katalog ist für wiederkehrende Kunden irritierend.

Kann ich Produktseiten-Blöcke 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 mobile Reihenfolge und es schreibt die CSS-order-Overrides speziell für eine Mobile-Media-Query. Ein gängiges Pattern: Kauf-Block auf dem Desktop über der Beschreibung, auf Mobile darunter (damit die Galerie den gesamten ersten Bildschirmbereich einnimmt).

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

Ja, bei Produktseiten, wo Käufer am Haupt-Kaufen-Button vorbeiscrollen, um Details zu lesen. Eine Sticky-Bar (die Produktname, Preis und ATC anzeigt) steigert die Conversion auf langen Produktseiten typischerweise um 5–15 %. Halte es aber minimal – große Sticky-Bars wirken aufdringlich und können auf Mobile wichtigen Content verdecken.

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

Ein Sterne-Bewertungs-Snippet in der Nähe des Titels (über dem ATC) performt am besten – es ist ein schnelles Trust-Signal im Moment der Kaufentscheidung. Die kompletten Reviews gehören unter den ATC oder in einen ausklappbaren Bereich. Packe keine riesige Review-Wand über den Kaufen-Button; das schiebt die Aktion „below the fold“ (in den nicht sichtbaren Bereich) und schadet der Conversion.