Das Wichtigste in Kürze
- Die Anpassung der Produktseite teilt sich auf zwei Bereiche auf: den Theme-Editor (Layout und Abschnitte) und den Produkt-Editor (Inhalt).
- Bei den meisten modernen Shopify-Themes kannst du Blöcke – Bilder, Titel, Preis, Beschreibung, „In den Warenkorb“-Button – direkt im Theme-Editor neu anordnen.
- Das Hinzufügen neuer Abschnitte (Bewertungen, Upsells, FAQs, Vergleichstabellen) unter den Hauptproduktinfos ist im Theme-Editor ganz einfach.
- Für ein komplett individuelles Layout, das über die Funktionen deines Themes hinausgeht, kann Fudge es basierend auf einer Beschreibung für dich erstellen.
Auf deiner Produktseite werden Kaufentscheidungen getroffen. Die meisten Shopify-Shops verwenden das Standardlayout ihres Themes – oft gibt es hier viel Spielraum, um die Conversion Rate durch das Umstellen von Elementen und das Hinzufügen der richtigen Abschnitte zu verbessern.
Warum Sie uns vertrauen können
Jacques verfügt über mehr als 15 Jahre Erfahrung in der Shopify-Entwicklung und hat mit Hunderten von Marken an der Optimierung von Produktseiten gearbeitet. Wir haben Fudge entwickelt – einen KI-Storefront-Editor, der von Hunderten von Stores genutzt wird und im Shopify App Store mit 5,0 Sternen bewertet ist.
Zwei Dinge, die Sie auf einer Produktseite anpassen können
1. Content — der Produkttitel, die Beschreibung, Bilder, der Preis und Varianten. Dies geschieht im Produkt-Editor: Produkte → Produkt auswählen → Bearbeiten.
2. Layout — die Anordnung der Elemente, zusätzliche Abschnitte und das Design. Dies geschieht im Theme Editor: Online-Shop → Themes → Anpassen → zu einer Produktseite navigieren.
Die meisten Fragen zur Individualisierung beziehen sich auf das Layout. Hier kommen der Theme Editor und Fudge ins Spiel.
Passend dazu: Garantien zu einer Shopify-Produktseite hinzufügen.
So ordnen Sie Blöcke auf der Produktseite im Theme-Editor neu an
Moderne Shopify-Themes (Online Store 2.0) ermöglichen es Ihnen, einzelne Elemente innerhalb des Produktbereichs per Drag-and-Drop zu verschieben – Titel, Preis, Beschreibung, Warenkorb-Button, Variantenauswahl und mehr.
Schritt 1. Gehen Sie zu Onlineshop → Themes → Anpassen.
Schritt 2. Navigieren Sie zu einer Produktseite. Klicken Sie in der Seitenauswahl oben auf einen beliebigen Produktnamen oder rufen Sie eine Produkt-URL direkt im Editor auf.
Schritt 3. Klicken Sie in der linken Seitenleiste auf den Bereich Produktinformationen. Sie sehen eine Liste von Blöcken – Titel, Preis, Anzahl, In den Warenkorb, Beschreibung usw.
Schritt 4. Ziehen Sie die Blöcke in die gewünschte Reihenfolge. Eine gängige, Conversion-optimierte Reihenfolge ist: Bilder → Titel → Bewertungs-Snippet → Preis → Varianten → In den Warenkorb → Kurzbeschreibung → Trust Badges.
Schritt 5. Speichern.
So fügen Sie Abschnitte zu einer Shopify-Produktseite hinzu
Unterhalb der Haupt-Produktinformationen kannst du Abschnitte in voller Breite hinzufügen – dieselben Abschnitte, die auch auf deiner Homepage verfügbar sind.
Scrolle im Theme Editor auf einer Produktseite in der linken Seitenleiste am Produktbereich vorbei nach unten und klicke auf Abschnitt hinzufügen. Du kannst Folgendes hinzufügen:
- Reviews (wenn du eine Bewertungs-App nutzt, die mit dem Theme Editor kompatibel ist)
- Zuletzt angesehene Produkte
- Ähnliche Produkte / Empfehlungen
- FAQ-Accordions
- Rich Text oder Feature Callouts
- Bild mit Text für Inhaltsstoff-Storys oder Brand-Content
Diese Abschnitte gelten für alle Produktseiten, es sei denn, du verwendest ein Custom Template für bestimmte Produkte.
Passend dazu: Ein Custom Template in Shopify hinzufügen.
Passend dazu: Review Widgets in Shopify hinzufügen.
So erstellen Sie ein benutzerdefiniertes Template für ein bestimmtes Produkt
Wenn Sie für ein einzelnes Produkt ein anderes Layout wünschen (z. B. für ein Hero-Produkt mit einer eher redaktionellen Seite), können Sie ein benutzerdefiniertes Template erstellen.
Schritt 1. Klicken Sie im Theme-Editor oben auf die Seitenauswahl und wählen Sie Vorlage erstellen → Produkt.
Schritt 2. Geben Sie der Vorlage einen Namen (z. B. hero-produkt).
Schritt 3. Passen Sie das Layout im Theme-Editor an.
Schritt 4. Gehen Sie zu Produkte → wählen Sie das Produkt aus → weisen Sie in der rechten Seitenleiste unter Theme-Vorlage Ihre neue Vorlage zu.
Dieses Produkt nutzt nun das individuelle Layout. Alle anderen Produkte behalten das Standard-Template.
Anpassungen der Produktseite, die Code erfordern
Einige Funktionen für Produktseiten sind im Theme Editor nicht verfügbar:
- Sticky Add-to-Cart Bar — folgt dem Nutzer beim Scrollen
- Größentabellen-Modal — öffnet sich, ohne die Seite zu verlassen
- Custom Tab-Layout — Tabs für Beschreibung, Materialien, Versand
- Vorher/Nachher-Bild-Slider — für Hautpflege, Kleidung, Haushaltswaren
- Eigene Trust Badge-Leiste — Icons mit eigenem Text, in den meisten Themes nicht verfügbar
- Vergleichstabelle — zeigt, wie dein Produkt im Vergleich zu Alternativen abschneidet
Hierfür benötigst du entweder einen Developer oder ein Tool, das den Code für dich generiert.
Fudge erledigt all das. Beschreibe einfach, was du möchtest:
„Füge eine Sticky Add-to-Cart Bar zu meinen Produktseiten hinzu, die erscheint, wenn der Nutzer am Haupt-Kaufen-Button vorbeiscrollt.“
„Erstelle einen Tab-Bereich unter meiner Produktbeschreibung mit Tabs für: Beschreibung, Inhaltsstoffe, Anwendung, Versand.“
Fudge generiert den Code, du prüfst den Entwurf und veröffentlichst ihn, wenn alles passt.
Passend dazu: Fudge Store Editor.
Passend dazu: Metafelder zu Shopify-Produkten hinzufügen.
Passend dazu: Produkte in Shopify vergleichen.
Was macht eine hochgradig konvertierende Shopify-Produktseite aus?
Abgesehen von der reinen Umsetzung der Anpassungen, hier sind die Elemente, die deine Conversion Rate dauerhaft verbessern:
- Bewertungen weit oben – Social Proof gleich zu Beginn, vor dem Scrollen
- Klare Variantenauswahl – Größentabellen direkt verlinkt, Farbmuster statt Dropdowns
- Dringlichkeitssignale – Hinweis auf knappen Bestand, Liefer-Countdown (aber ehrlich eingesetzt)
- Kurze, nutzenorientierte Beschreibungen – Bullet Points statt ganzer Absätze für ein schnelles Scannen
- Verschiedene Blickwinkel bei Bildern – Lifestyle-, Detail- und Größenvergleichsbilder
- Trust Badges ‘Above the fold’ – kostenloser Rückversand, sicherer Checkout, schnelle Lieferung
FAQ
Wenn du Blöcke in der Standard-Produktvorlage neu angeordnet hast, gilt die Änderung für alle Produkte, die diese verwenden. Hast du sie in einer benutzerdefinierten Vorlage (z. B. product.hero) neu angeordnet, gilt dies nur für Produkte, die dieser Vorlage zugeordnet sind. Prüfe unter Produkte → Produkt → Theme-Vorlage, welche Vorlage jedes Produkt verwendet.
Nur wenn Produkte wirklich komplett unterschiedliche Layouts benötigen – ein Hero-Produkt mit einer ausführlichen Story-Seite, ein Geschenkgutschein ohne „In den Warenkorb“-Button, ein Abo-Produkt mit Intervall-Auswahl. Erstelle ansonsten nicht für jedes Produkt eine eigene Vorlage, da du sonst am Ende 50 fast identische Vorlagen pflegen musst, anstatt einer zentralen.
Den Kauf-Block (Titel, Preis, Varianten, „In den Warenkorb“) plus 4–8 unterstützende Blöcke (Beschreibung, Bewertungen, ähnliche Produkte, FAQ, Inhaltsstoffe etc.). Ab etwa 10 Blöcken wird die Seite auf Mobilgeräten zu lang und langsam. Nutze ausklappbare Blöcke (Akkordeons), um die Seite kompakt zu halten, aber bei Bedarf trotzdem detaillierte Infos zu bieten.
Ja, über Liquid in der Abschnittsvorlage. Der native Theme-Editor bietet dies nicht an – beschreibe Fudge die Regel ("Zeige diesen Trust-Block nur bei Produkten mit dem Tag 'high-ticket'") und es verpackt den Block in die richtige {% if product.tags contains '…' %}-Bedingung. Alternativ kannst du den Liquid-Code des Abschnitts selbst bearbeiten.
Minimal, je nachdem, was sie enthalten. Ein paar zusätzliche Rich-Text- oder Bild-Blöcke fallen kaum ins Gewicht. Abschnitte, die durch Apps gesteuert werden (Bewertungs-Widgets, Upsell-Leisten), fügen jedoch oft jeweils 50–200 KB an JavaScript hinzu. Wenn dir die Ladezeit (Page Speed) wichtig ist, solltest du prüfen, welche Apps Skripte auf der Produktvorlage laden, und alles entfernen, was sich nicht rentiert.
