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. Gehe zu Onlineshop > Themes > Anpassen (Customize).
Schritt 2. Navigiere über die Seitenauswahl oben zu einer beliebigen Produktseite.
Schritt 3. Suche in der linken Seitenleiste den Abschnitt Produktinformationen (Main product) und klicke darauf, um die Liste der Blöcke zu erweitern.
Schritt 4. Du siehst die Blöcke in der Reihenfolge: normalerweise Titel, Preis, Variantenwahl, Mengenauswahl, In den Warenkorb, Beschreibung. Ziehe an den Griffen neben jedem Block, um sie neu anzuordnen.
Schritt 5. Speichern.
Gängige Neuanordnungen, die die Conversion verbessern:
- Verschiebe Social Proof (Bewertungsübersicht oder Sternebewertung) nach oben, näher zum Titel.
- Verschiebe den Garantietext direkt unter den „In den Warenkorb“-Button.
- Verschiebe die Beschreibung weiter nach unten, wenn der Add-to-Cart (ATC) Button ohne Scrollen sichtbar sein soll.
- Verschiebe einen Block für Größentabellen oder Passform-Infos direkt über die Variantenwahl.
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 du für bestimmte Produkte ein anderes Layout wünscht – etwa eine Long-form Sales Page für dein Top-Produkt oder ein minimales Layout für einfache Produkte – kannst du eigene Vorlagen (Templates) erstellen.
Schritt 1. Gehe zu Onlineshop > Themes > Aktionen > Code bearbeiten.
Schritt 2. Suche im Ordner templates/ nach der Datei product.json.
Schritt 3. Klicke auf das Drei-Punkt-Menü daneben und wähle Kopie hinzufügen. Benenne sie product.hero.json oder ähnlich.
Schritt 4. Gehe zum Theme-Editor. Navigiere zu einer Produktseite. Unten links siehst du ein Vorlage-Dropdown – wähle dort deine neue Vorlage aus.
Schritt 5. Optimiere diese Vorlage unabhängig vom Standard. Änderungen an product.hero.json betreffen nur Produkte, die diese Vorlage nutzen.
Schritt 6. Öffne im Shopify-Admin ein Produkt > scrolle zum Bereich Theme-Vorlagen > weise die eigene Vorlage zu.
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 nicht per Drag-and-Drop machbar ist, kann Fudge es bauen.
Beispiel-Prompts:
-
„Erstelle eine eigene Produktseiten-Vorlage für unser Hero-Produkt – oben ein Sticky-Bild in voller Breite, rechts ein scrollbares Info-Panel, darunter ein Bereich für Key-Features, ein Testimonial-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 prüfst ihn vor der Veröffentlichung.
