Das Wichtigste auf einen Blick
- Die Anpassung der Produktseite ist in zwei Bereiche unterteilt: den Theme-Editor (Layout und Abschnitte) und den Produkt-Editor (Inhalte).
- In den meisten modernen Shopify-Themes können Sie Blöcke – Bilder, Titel, Preis, Beschreibung, Warenkorb-Button – direkt im Theme-Editor neu anordnen.
- Das Hinzufügen neuer Abschnitte (Bewertungen, Upsells, FAQs, Vergleichstabellen) unter den Haupt-Produktinfos ist im Theme-Editor unkompliziert.
- Für ein vollständig individuelles Layout, das über die Möglichkeiten Ihres Themes hinausgeht, kann Fudge dieses basierend auf einer Beschreibung für Sie erstellen.
Auf Ihrer Produktseite fallen die Kaufentscheidungen. Die meisten Shopify-Stores nutzen das Standard-Layout ihres Themes – dabei gibt es meist 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 die Blöcke in der Standard-Produktvorlage (Default product template) neu angeordnet hast, gilt die Änderung für alle Produkte, die diese nutzen. Wenn du sie in einem benutzerdefinierten Template (z. B. product.hero) neu angeordnet hast, gilt das nur für die Produkte, die diesem Template zugewiesen sind. Überprüfe unter Produkte → Produkt → Theme-Vorlage, welches Template das jeweilige Produkt nutzt.
Nur dann, wenn Produkte wirklich unterschiedliche Layouts brauchen – ein Hero-Produkt mit langer Story-Seite, ein Geschenkgutschein ohne In-den-Warenkorb-Button oder ein Abo-Produkt mit Intervall-Auswahl. Erstelle sonst nicht für jedes Produkt ein eigenes Template. Du würdest nur unnötig Zeit damit verschwenden, 50 fast identische Templates zu pflegen, anstatt eines gemeinsamen.
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 dem Smartphone sehr lang und langsam. Nutze einklappbare Blöcke, um den sichtbaren Teil der Seite kompakt zu halten und gleichzeitig detaillierte Infos bei Bedarf anzuzeigen.
Ja, per Liquid im Section-Template. Der native Theme Editor bietet das nicht direkt an – beschreibe Fudge die Regel (z. B. „Zeige diesen Trust-Block nur bei Produkten, die mit 'high-ticket' getaggt sind“) und es umschließt den Block mit der passenden {% if product.tags contains '…' %}-Bedingung. Alternativ kannst du das Liquid der Section auch selbst bearbeiten.
Nur geringfügig, abhängig davon, was drinsteckt. Ein paar zusätzliche Rich-Text- oder Bild-Blöcke fallen kaum ins Gewicht. App-gesteuerte Sections (Bewertungs-Widgets, Upsell-Bars) fügen oft jeweils 50–200 KB an JavaScript hinzu. Wenn dir die Ladegeschwindigkeit wichtig ist, überprüfe, welche Apps Skripte im Produkt-Template laden, und entferne alles, was sich nicht bezahlt macht.
