Produktseite optimieren: 7 Schritte zur richtigen Strategie

Aus unserer Arbeit mit Shopify Brands hat sich ein Vorgehen in 7 Schritten bewährt, um Produktseiten ganzheitlich zu optimieren. Wichtige Schritte sind unter anderem die eindeutige Klärung der Rolle der Seite, Brand-Perspektive mit E-Commerce-Best Practices vereinen, Mobile First nach Viewports planen und systematisches Testen von Änderungen.

Wie das konkret aussieht, zeigen wir am Beispiel der Naturkosmetikmarke nkm, deren Produktseite wir nachhaltig optimiert haben. Welche Learnings kannst du für deinen eigenen Shop anwenden? Die Inhalte dieses Artikels basieren auf dem Wissen unserer Account-Managerin Anna.

1. Klären, welche Rolle die Produktseite in deinem Shop spielt
2. Den richtigen Zeitpunkt für einen ganzheitlichen Blick erkennen
3. Brand-Vorlage und E-Com-Best Practices zusammenbringen
4. Mobile First planen: Welcher Viewport beantwortet welche Frage?
   1. Viewport 1: Bin ich hier richtig?
   2. Viewport 2: Kann ich jetzt kaufen?
   3. Viewport 3: Welche Zweifel bleiben?
5. Weniger ist mehr
6. Testen statt raten
7. Grundsätze verinnerlichen statt andere zu kopieren
8. Fazit

 

 

1. Klären, welche Rolle die Produktseite in deinem Shop spielt

Bevor du etwas optimierst, solltest du wissen, welche Aufgabe die Produktseite in deinem Shop erfüllen muss. Die Antwort unterscheidet sich stark je nach Marke und Produkt.

Grob unterscheiden wir in 2 Typen an Produktseiten für Onlineshops:

Typ	Situation	Rolle der Produktseite
Transaktionskanal	Kaufentscheidung ist vor dem Shop-Besuch gefallen, z.B. bei Fan-Merch	Schnell zum Checkout, wenig Erklärung nötig
Dreh- und Angelpunkt	Produkt oder Marke sind erklärungsbedürftig, Vertrauen muss erst entstehen	Produkt erklären, abgrenzen, Preis rechtfertigen, Zweifel ausräumen

Die meisten Shopify Shops fallen in die zweite Kategorie, insbesondere wenn Kund:innen über Marketing oder Anzeigen direkt auf einer Produktseite landen. Dann ist sie die erste Seite, die sie von deiner Marke sehen.

Bei nkm erfüllt die Produktseite klar die Funktion des Dreh- und Angelpunkts. Naturkosmetik braucht Aufklärung: Welcher Wirkstoff steckt drin, für welchen Hauttyp passt das Produkt, womit kombiniert man es am besten? Eine Kategorieseite bietet für diesen Kontext zu wenig Platz.

Unsere Empfehlung: Je erklärungsbedürftiger dein Produkt, desto mehr Zeit solltest du in die Struktur der Produktseite investieren.

2. Den richtigen Zeitpunkt für einen ganzheitlichen Blick erkennen

Kontinuierliche Optimierung ist wichtig, ersetzt aber nicht das regelmäßige Rauszoomen. Wenn du nur im Detail arbeitest, verlierst du häufig den Blick auf das Gesamtbild.

Wann kann es sich lohnen, mal die Perspektive zu wechseln und deine Produktseite neu zu bewerten?

• Dein Brand-Team schärft die Marke ohnehin nach: neue Farben, Fonts, Button-Styles oder ein verschobener inhaltlicher Fokus
• Der letzte Relaunch liegt mehr als zwei Jahre zurück
• Seitdem wurden nur Einzelmaßnahmen ergänzt, etwa ein Loyalty-Programm, ein Abo-Modell oder akut benötigte Features
• Die Seite ist über die Zeit lang und voll geworden, ohne dass jemand die Gesamtstruktur hinterfragt hat

Bei nkm kamen zwei dieser Punkte zusammen. Der Theme-Relaunch stammte von Ende 2023. Seitdem lief die Optimierung im Detail. Parallel entschied das Brand-Team, den Fokus zu verschieben: weg von einem reinen Fokus auf Nachhaltigkeit, hin zu einem stärker wissenschaftlich fundierten Auftritt. Dies zeigte sich auch in einem neuen Styling. Um beide Punkte effizient abzudecken, entschieden wir uns für einen Relaunch.

Wichtig dabei: Ein ganzheitlicher Blick heißt nicht, alles neu zu machen. Die alte Produktseite von nkm hatte bereits eine solide Basis mit Galerie, Bewertungssternen, USPs in Bullet Points, Abo-Auswahl, Trust-Elementen rund um den Warenkorb-Button und einer Inhaltsstoff-Tabelle. Vieles davon erhielten wir bewusst.

Unsere Empfehlung: Mach vor jeder Überarbeitung eine ehrliche Bestandsaufnahme. Was funktioniert, bleibt. Nur was nicht mehr passt, wird neu gedacht.

3. Brand-Vorlage und E-Com-Best Practices zusammenbringen

Eine gute Produktseite entsteht aus zwei Perspektiven: der Marke, die weiß, wie sie wirken will, und der E-Commerce-Erfahrung inkl. Erkenntnisse, was Nutzer:innen zum Kauf bewegt. Wichtig ist eine Kombination der beiden Seiten.

So lief der Prozess bei nkm:

1. Mockup vom Brand-Team: nkm lieferte ein visuell ausgearbeitetes Briefing mit neuem Design-System und inhaltlichem Fokus.
2. Gegenvorschlag von uns mit E-Com-Perspektive: Wir haben das Mockup auf Conversion-Logik geprüft und Alternativen vorgeschlagen, auch auf Basis früherer A/B-Test-Learnings und unserer Agenturerfahrung.
3. Abstimmung im größeren Kreis: Neben dem Brand-Team waren weitere Parteien involviert, darunter SEO-Expert:innen.
4. Finale Struktur, dann Design: Erst wenn die Struktur steht, lohnt sich das Fine-Tuning des Designs.

Der Zeitrahmen war überschaubarer, als es klingt:

Phase	Zeitraum	Aufwand
Neuer Grundlook (Farben, Fonts, Abstände)	November 2025, unter einem Monat	Gering, da Theme-Settings statt Hardcoding
Mobile Design und Abstimmung	November bis Januar	ca. 30 Stunden Beratung und Design
Desktop Design	ab Februar	Nachgezogen nach finaler Entscheidung
Umsetzung	ab Januar, über mehrere Monate	Quick Wins zuerst, dann der Rest

Dass der Grundlook in unter einem Monat stand, liegt am sauberen Theme-Coding. nkm nutzt das Impact Theme, das wir über Jahre erweitert haben. Weil wir dabei die Theme-Struktur eingehalten und etwa Farben nie hardcodiert haben, ließ sich der neue Look über die Theme-Settings ausrollen statt Abschnitt für Abschnitt.

Unsere Empfehlung: Plane die Abstimmung großzügiger als die reine Arbeitszeit. Außerdem lohnt sich eine saubere und zuverlässige Theme-Basis, sodass spätere Änderungen zentral möglich sind.

4. Mobile First planen: Welcher Viewport beantwortet welche Frage?

Auf dem Smartphone sehen User nie die ganze Produktseite, sondern immer nur einen Ausschnitt. Deshalb planen wir Produktseiten nach Viewports: Jeder sichtbare Bereich hat eine Aufgabe und beantwortet eine konkrete Frage.

Viewport	Frage der Nutzer:innen	Ziel	Elemente
1: Above the Fold	Bin ich hier richtig?	Identifikation, Interesse wecken	Produkttitel, Bewertungen, USP-Teaser, Galerie mit Badges
2: Direkt darunter	Kann ich jetzt kaufen?	Kaufabschluss für Entschlossene	Preis, Add-to-Cart, transaktionale USPs, Produkt-USPs
3: Weiter unten	Welche Zweifel bleiben?	Interessierte überzeugen	Ergebnisse, Routine, Cross-Selling, Inhaltsstoffe

Viewport 1: Bin ich hier richtig?

Bei nkm haben wir Produkttitel, Bewertungen und einen kurzen USP-Teaser über die Galerie gesetzt und das per A/B-Test geprüft. Der Grund: Kosmetikverpackungen sind oft minimalistisch und sagen wenig über das Produkt aus, anders als etwa bei Fashion. Zusätzlich zeigt ein Badge in der Galerie den Hauttypen, etwa trockene oder sensible Haut.

Die Galerie selbst sollte alle Fragen abdecken, die jemand haben könnte: Vorteile, Inhaltsstoffe, Anwendung, zu erwartendes Ergebnis, die passende Pflegeserie.

Viewport 2: Kann ich jetzt kaufen?

Entschlossene Kund:innen müssen den Kauf hier reibungslos abschließen können. Preis, Add-to-Cart-Button und die transaktionalen USPs wie Lieferzeit und Zahlungsarten bleiben zusammen sichtbar, dazu die wichtigsten Produkt-USPs kompakt in Bullet Points.

Viewport 3: Welche Zweifel bleiben?

Wer hier ankommt, ist interessiert, hat aber eine offene Frage. Bei nkm haben wir zwei Dinge platziert: eine Section mit Vorher-Nachher-Ergebnissen in mehreren Beispielen (als A/B-Test, zuvor auf der Startseite erprobt) und eine Routine-Section, die Schritt für Schritt erklärt, welches Produkt in welcher Reihenfolge angewendet wird. Letztere beantwortet eine echte Nutzerfrage und erhöht nebenbei den Warenkorbwert.

Unsere Empfehlung: Frage dich für jeden Viewport, was dort passieren soll. Und hab keine Angst vor Wiederholungen: Nicht alle wischen durch die Galerie, deshalb darf ein Inhalt weiter unten noch einmal auftauchen.

5. Weniger ist mehr

Wer einen Viewport schärft und neue Elemente ergänzt, muss an anderer Stelle Platz schaffen. Weglassen kann erfahrungsgemäß ein wirksamer Hebel sein, weil weniger Reize mehr Aufmerksamkeit auf das Relevante lenken.

Elemente, die wir bei nkm hinterfragt haben:

Element	Frage	Entscheidung
Lupe / Zoom-Tool	Zoomt bei Naturkosmetik wirklich jemand in die Verpackung?	Icon entfernt, Zoom per Klick bleibt möglich
Mengenauswahl	Wird der Reiniger tatsächlich mehrfach gekauft?	Per A/B-Test prüfen, Menge lässt sich auch im Warenkorb erhöhen
Inhaltsstoff-Tabelle	Wird sie genutzt und braucht sie Platz?	Bleibt, sie funktioniert und muss nicht neu erfunden werden

Zwei Datenquellen helfen bei solchen Entscheidungen:

• Analytics: Zeigt, wie oft ein Produkt in Mehrfachmengen gekauft wird oder wie weit Nutzer:innen scrollen.
• Heatmaps und Clickmaps: Zeigen, welche Elemente angeklickt werden und welche nicht. Oft fallen dabei Design-Fehler auf, etwa Bereiche, die klickbar wirken, es aber nicht sind. Tools wie Microsoft Clarity sind hier Standard, sollten aber nur punktuell laufen, weil sie Page Speed kosten.

Unsere Empfehlung: Stell bei jedem Element die Frage, ob es eine Nutzerfrage beantwortet. Wenn nicht, kann es weg oder sollte in einem Test genauer untersucht werden.

6. Testen statt raten

Nicht jede Änderung an der Produktseite lässt sich vorab sicher bewerten. Wir empfehlen: Was sich testen lässt, sollte getestet werden, bevor es dauerhaft live geht.

Bei nkm haben wir unter anderem getestet:

• Titel, Bewertungen und USP-Teaser über der Galerie statt der klassischen Reihenfolge mit Bild zuerst
• Vorher-Nachher-Section weiter unten auf der Produktseite, nachdem sie zuvor auf der Startseite erprobt wurde
• Ausblenden einzelner Elemente wie der Mengenauswahl, um zu prüfen, ob sie fehlen

Dabei gibt es zwei Wege, A/B-Tests auf Shopify zu fahren:

Option	Für wen	Vorteil	Grenze
Dediziertes A/B-Testing-Tool	Teams, die kontinuierlich und tief testen	Detailgrad, Auswertung, Segmentierung	Kosten, Setup, oft Agentur-Abhängigkeit
Shopify Rollouts	Einstieg, Teams ohne eigenes Testing-Setup	Nativ im Backend unter Markets, in einer halben Stunde verstanden, keine Abhängigkeiten	Rudimentär, Theme-Version gegen Theme-Version

Shopify Rollouts ist ein noch junges Feature und ersetzt kein ausgereiftes Testing-Tool. Es senkt aber die Hürde, überhaupt anzufangen. Wer bisher gar nicht testet, kann damit den ersten Schritt machen.

Unsere Empfehlung: Lieber einen einfachen Test fahren als keinen. Und Learnings aus früheren Tests lassen sich bei jeder neuen Überarbeitung wieder hervorholen.

7. Grundsätze verinnerlichen statt andere zu kopieren

Konkrete Maßnahmen für eine optimierte Produktseite unterscheiden sich von Shop zu Shop. Was bleibt, sind jedoch einige Grundsätze, die sich in unserer Arbeit immer wieder bestätigen:

1. Simpel denken und erklären. Was man dreimal lesen muss, verstehen Endkund:innen nicht und fragen den Support. Im schlimmsten Fall kaufen sie nicht.
2. Product Fit zuerst klären. Die wichtigste Frage auf jeder Produktseite ist, ob das Produkt zur Person passt. Wer nicht passt, soll das schnell merken und ohne Umweg zurück zur Kategorie finden.
3. Fragen beantworten, bevor sie aufkommen. Jeder Abschnitt der Produktseite sollte eine konkrete Nutzerfrage lösen, von „Bin ich hier richtig?" bis „Wie wende ich das an?".
4. Wege kurz halten. Je weniger Klicks und Scrolltiefe zwischen Interesse und Entscheidung liegen, desto besser.
5. Branchenspezifisch bleiben. Inspiration bei großen Brands zu holen ist sinnvoll, jedoch solltest du Anpassungen nicht einfach blind übernehmen. Was bei einer Fashion-Brand z.B. über Bildsprache funktioniert, löst du bei Kosmetik besser über Bild und Text kombiniert.

Unsere Empfehlung: Prüfe jede Idee gegen diese fünf Punkte, bevor du sie umsetzt.

8. Fazit

Eine Produktseite zu optimieren heißt nicht, immer mehr Elemente zu stapeln. Stattdessen solltest du die Rolle der Seite kennen, den richtigen Zeitpunkt für einen ganzheitlichen Blick erkennen und dann systematisch vorgehen: Brand und E-Commerce-Perspektive zusammenbringen, Mobile First nach Viewports planen, Überflüssiges entfernen, Quick Wins früh umsetzen und den Rest testen.