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.
Ä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 Sie auf die Sektions-Bibliothek Ihres Themes. Wenn Sie ein Layout wünschen, das nicht durch Drag-and-Drop realisierbar ist, kann Fudge es erstellen.
Beispiel-Prompts:
-
“Erstelle ein benutzerdefiniertes Produktseiten-Template für unser Hero-Produkt – Hero-Image in voller Breite mit Sticky-Effekt, scrollbares Info-Panel rechts, Bereich für Hauptmerkmale darunter, Testimonials-Grid und 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 Ihrem Theme. Sie prüfen ihn vor der Veröffentlichung.
Ähnlich: Fudge Page Builder.