So passt du deine Shopify-Produktseite an (2026)

Zuletzt aktualisiert
•
Von Experten geprüft
•
5 Min. Lesezeit

Das Wichtigste in Kürze

  • Die Anpassung der Produktseite ist auf zwei Orte aufgeteilt: den Theme Editor (Layout und Abschnitte) und den Produkteditor (Inhalte).
  • In den meisten modernen Shopify-Themes kannst du Blöcke (Titel, Preis, Beschreibung, Add-to-Cart-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 Möglichkeiten deines Themes hinausgeht, kann Fudge es aus einer Beschreibung heraus für dich erstellen.

Um eine Shopify-Produktseite anzupassen, öffne Onlineshop → Themes → Anpassen, wechsle zu einer Produktseite, ziehe dann die Blöcke im Abschnitt mit den Produktinformationen an die gewünschte Stelle und füge darunter weitere Abschnitte hinzu. Inhalte wie Titel, Bilder und Preis werden direkt im Produkt bearbeitet.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Entwicklungserfahrung und hat mit Hunderten von Shopify-Marken an ihren Produktseiten gearbeitet. Wir entwickeln Fudge, den KI-Operator für Shopify-Shops, mit einer Bewertung von 4.9 im Shopify App Store.


Zwei Dinge, die du auf einer Produktseite anpassen kannst

1. Inhalt – der Produkttitel, Beschreibung, Bilder, Preis und Varianten. Das findest du im Produkteditor: Produkte → Produkt auswählen → Bearbeiten.

2. Layout – die Anordnung der Elemente, zusätzliche Abschnitte und das Design. Das findest du im Theme Editor: Onlineshop → Themes → Anpassen → zu einer Produktseite navigieren.

Die meisten Fragen zur Anpassung drehen sich ums Layout. Genau hier kommen der Theme Editor und Fudge ins Spiel.

Für einen Garantie-Block, sieh dir an, wie man Garantien zu einer Shopify-Produktseite hinzufügt.


So ordnest du Produktseiten-Blöcke im Theme Editor neu an

Moderne Shopify-Themes (Online Store 2.0) ermöglichen es dir, die einzelnen Elemente innerhalb des Produkt-Abschnitts per Drag-and-Drop zu verschieben und neu anzuordnen – Titel, Preis, Beschreibung, In-den-Warenkorb-Button, Varianten-Auswahl und mehr.

Schritt 1. Gehe zu Onlineshop → Themes → Anpassen.

Schritt 2. Navigiere zu einer Produktseite. Klicke auf einen beliebigen Produktnamen in der Seitenauswahl oben oder rufe eine Produkt-URL auf, während du im Editor bist.

Schritt 3. Klicke in der linken Seitenleiste auf den Produktinformations-Abschnitt. Du siehst eine Liste von Blöcken – Titel, Preis, Menge, In den Warenkorb, Beschreibung usw.

Schritt 4. Ziehe die Blöcke in die gewünschte Reihenfolge. Eine übliche Reihenfolge für die Info-Spalte: Titel → Bewertungs-Snippet → Preis → Varianten → In den Warenkorb → Kurzbeschreibung → Trust Badges.

Schritt 5. Speichern.

Um einen neuen Block hinzuzufügen, klicke innerhalb des Produktinformations-Abschnitts auf Block hinzufügen und wähle einen der Blocktypen deines Themes aus, z. B. Text, Einklappbare Zeile, Bild, Bewertung oder Custom Liquid. Fülle den Inhalt aus, ziehe ihn an die richtige Stelle und speichere.


So fügst du einer Shopify-Produktseite Sections hinzu

Unter den Hauptproduktinformationen kannst du Abschnitte in voller Breite hinzufügen – die gleichen Abschnitte, die auch auf deiner Startseite verfügbar sind.

Scrolle im Theme Editor auf einer Produktseite in der linken Seitenleiste am Produktabschnitt vorbei nach unten und klicke auf Abschnitt hinzufügen. Du kannst Folgendes hinzufügen:

  • Bewertungen (wenn du eine Bewertungs-App nutzt, die sich in den Theme Editor integriert)
  • Zuletzt angesehene Produkte
  • Ähnliche Produkte / Empfehlungen
  • FAQ-Akkordeons
  • Rich Text oder Feature-Callouts
  • Bild mit Text für Inhaltsstoff-Stories oder Marken-Inhalte

Diese Abschnitte gelten für alle Produktseiten, es sei denn, du verwendest ein benutzerdefiniertes Template für bestimmte Produkte.

Wenn du möchtest, dass Käufer eine Vorschau von Artikeln in diesen Produktrastern sehen können, ohne die Seite zu verlassen, schau dir an, wie man ein Quick-View-Modal hinzufügt.


So erstellst du ein Custom Template für ein bestimmtes Produkt

Wenn du für ein einzelnes Produkt ein anderes Layout möchtest (z. B. ein Hero-Produkt mit einer eher redaktionell gestalteten Seite), kannst du ein Custom Template erstellen.

Schritt 1. Klicke im Theme Editor oben auf die Seitenauswahl und wähle Vorlage erstellen (Create template) → Produkt.

Schritt 2. Benenne das Template (z. B. hero-product).

Schritt 3. Passe das Layout im Theme Editor an.

Schritt 4. Gehe zu Produkte → wähle das Produkt aus → weise in der rechten Seitenleiste unter Theme-Vorlage (Theme template) dein neues Template zu.

Dieses Produkt verwendet nun das benutzerdefinierte Layout. Alle anderen Produkte bleiben beim Standard-Template.

Willst du ein individuelles Produktseiten-Layout? Beschreibe es Fudge.
Kostenlose Testversion starten

Produktseiten-Anpassungen, die Code erfordern

Einige Funktionen der Produktseite sind im Theme Editor nicht verfügbar:

  • Sticky Add-to-Cart-Leiste – folgt dem Nutzer beim Scrollen
  • Größentabellen-Modal – öffnet sich, ohne die Seite zu verlassen
  • Benutzerdefiniertes Tab-Layout – Beschreibung, Materialien, Versand in Tabs
  • Vorher/Nachher-Bild-Slider – für Hautpflege, Bekleidung, Haushaltswaren
  • Individuelle Trust-Badge-Reihe – Icons mit eigenem Text, in den meisten Themes nicht verfügbar
  • Vergleichstabelle – zeige, wie dein Produkt im Vergleich zu Alternativen abschneidet

Dafür brauchst du entweder einen Entwickler oder ein Tool, das den Code für dich generieren kann.

Fudge, der KI-Operator für Shopify-Shops, erledigt all das als nativen Code in deinem Theme. Beschreibe, was du willst:

„Füge meinen Produktseiten eine Sticky Add-to-Cart-Leiste hinzu, die erscheint, wenn der Nutzer am Haupt-Kaufen-Button vorbeiscrollt.“

„Erstelle unter meiner Produktbeschreibung einen Abschnitt mit Tabs für: Beschreibung, Inhaltsstoffe, Anwendung, Versand.“

Fudge generiert den Code, du überprüfst den Entwurf an einem echten Produkt und veröffentlichst ihn, wenn er gut aussieht. Danach zeigt es dir die Add-to-Cart- und Conversion-Raten auf den geänderten Seiten im Vorher-Nachher-Vergleich, damit du entscheiden kannst, ob du die Änderung auf dein restliches Sortiment ausrollen möchtest.

Um zu sehen, wie dies im Vergleich zum Theme Editor abschneidet, sieh dir den Fudge Store-Editor an.


Gängige Shopify-Produktseiten-Layouts

  • Standard-Layout: Bilder links; Titel, Preis, Varianten, In den Warenkorb, Garantie und Beschreibung rechts.
  • Long-Form Sales Page: ein Hero-Bild in voller Breite, gefolgt von der Produktgeschichte, Feature-Blöcken, Testimonials, In den Warenkorb und FAQs.
  • Minimalistisches Layout: ein großes Bild, Titel, Preis und In den Warenkorb, wobei alles andere eingeklappt oder entfernt ist.
  • Layout mit Tabs: die wichtigsten Details bleiben sichtbar, während Beschreibung, Pflegehinweise, Inhaltsstoffe und Spezifikationen in Tabs darunter liegen.

Wenn dein Theme das gewünschte Layout nicht erstellen kann, beschreibe es Fudge, zum Beispiel: „Strukturiere unsere Produktseite so um, dass die Beschreibung in drei Tabs unterteilt ist: Übersicht, Inhaltsstoffe und Pflegehinweise.“ Fudge erstellt es als Entwurf in deinem Theme, damit du es überprüfen kannst.


Was macht eine konversionsstarke Shopify-Produktseite aus?

Das Layout ist nur die halbe Miete; die Produktdaten dahinter sind die andere Hälfte. Das kostenlose Shopify Katalogdaten-Audit markiert die Produkte, deren Daten zu dünn sind, als dass Käufer oder KI-Agenten darauf reagieren könnten.

Über die Mechanik der Anpassung hinaus helfen diese Elemente oft bei der Konversion:

  • Bewertungen weit oben — Social Proof frühzeitig, noch bevor gescrollt wird
  • Klare Varianten-Auswahl — Größentabellen direkt verlinkt, Farbmuster statt Dropdowns
  • Dringlichkeitssignale — Hinweise auf geringen Lagerbestand, Liefer-Timer (ehrlich eingesetzt)
  • Kurze, nutzenorientierte Beschreibungen — Aufzählungspunkte statt Absätze für schnelles Überfliegen
  • Mehrere Bildwinkel — Lifestyle-, Detail- und Größenvergleich-Aufnahmen
  • Trust Badges above the fold — kostenlose Rücksendung, sicherer Checkout, schnelle Lieferung

FAQ

Warum wird meine Block-Umsortierung im Theme-Editor nicht bei jedem Produkt angezeigt?

Wenn du Blöcke in der Standard-Produktvorlage neu angeordnet hast, gilt die Änderung für alle Produkte, die diese verwenden. Wenn du sie in einer benutzerdefinierten Vorlage (z. B. product.hero) neu angeordnet hast, gilt sie nur für Produkte, die dieser Vorlage zugewiesen sind. Überprüfe unter Produkte → Produkt → Theme-Vorlage, welche Vorlage jedes Produkt verwendet.

Sollte ich benutzerdefinierte Vorlagen für einzelne Produkte erstellen?

Nur wenn Produkte wirklich unterschiedliche Layouts benötigen – ein Hero-Produkt mit einer ausführlichen Story-Seite, ein Geschenkgutschein ohne 'In den Warenkorb', ein Abo-Produkt mit Intervall-Auswahl. Erstelle ansonsten nicht für jedes Produkt eine eigene Vorlage; du wirst viel Zeit damit verbringen, 50 fast identische Vorlagen zu pflegen, anstatt einer gemeinsamen.

Wie viele Blöcke sollte eine Shopify-Produktseite haben?

Den Kauf-Block (Titel, Preis, Varianten, In den Warenkorb) plus 4–8 unterstützende Blöcke (Beschreibung, Bewertungen, ähnliche Produkte, FAQ, Inhaltsstoffe usw.). Ab etwa 10 Blöcken wird die Seite auf Mobilgeräten lang und langsam. Nutze einklappbare Blöcke, um die sichtbare Seite kompakt zu halten und gleichzeitig detaillierte Infos bei Bedarf anzuzeigen.

Kann ich Produktseiten-Blöcke basierend auf Tags oder Metafeldern ein- oder ausblenden?

Ja, über Liquid in der Abschnittsvorlage. Der native Theme-Editor bietet dies nicht – beschreibe die Regel für Fudge ("Zeige diesen Trust-Block nur bei Produkten an, die mit 'high-ticket' getaggt sind") und Fudge verpackt den Block in die richtige {% if product.tags contains '…' %}-Bedingung. Alternativ kannst du das Liquid des Abschnitts selbst bearbeiten.

Verlangsamen zusätzliche Abschnitte meine Shopify-Produktseite?

Geringfügig, je nachdem, was sie enthalten. Ein paar zusätzliche Rich-Text- oder Bildblöcke fallen kaum ins Gewicht. App-gesteuerte Abschnitte (Bewertungs-Widgets, Upsell-Leisten) fügen oft jeweils 50–200 KB an JavaScript hinzu. Wenn die Ladezeit wichtig ist, überprüfe, welche Apps Skripte auf der Produktvorlage laden, und entferne alles, was keinen echten Mehrwert bringt.

Jacques's signature
Passe deine Produktseiten an, ohne einen Entwickler zu benötigen.

You might also be interested in

Jacques Blom
Jacques Blom
CTO bei Fudge.