Eine Produktseite muss den Artikel, seine Optionen und die Kaufbedingungen erklären. Diese Beispiele zeigen, wie sich diese Anforderungen bei Büchern, Kochgeschirr, Kleidung, Lebensmitteln und Möbeln unterscheiden. Achte auf die Reihenfolge, in der jede Seite den Kunden bittet, Entscheidungen zu treffen.
FINEX kombiniert eine scrollbare Galerie mit einem Sticky-Kaufbereich auf dem Desktop und bietet dann Maße, Pflegehinweise, Rezepte und FAQs. Diese Abschnitte erklären die Nutzung nach der eigentlichen Bestellung. Die Ratschläge bleiben eng mit dem Kochgeschirr und seiner Pflege verbunden.
Für deinen Shop
Zeige, wie der Kunde ein langlebiges Produkt nutzen und pflegen wird.
Jinx behält Geschmack, Größe und Optionen für einmalige oder wiederkehrende Käufe im Hauptbestellbereich. Abschnitte zu Rezept, Zutaten, Analyse und Fütterung folgen separat. Diese Struktur stellt detaillierte Informationen bereit, ohne spezifische Nährwertangaben oder die Eignung für ein bestimmtes Tier in den Vordergrund zu rücken.
Für deinen Shop
Gib detaillierten Produktinformationen eine klare Struktur unterhalb der wichtigsten Auswahlmöglichkeiten.
Ritual gibt Nährwertangaben, Verzehrempfehlungen und Rückverfolgbarkeit eigene, beschriftete ausklappbare Bereiche (Drawers), während Zutaten und Produkttechnologie weiter unten stehen. Besucher können die Informationen aufklappen, die sie brauchen. Präzise Labels und leicht zugängliche Inhalte sind hierbei essenziell; das Drawer-Layout validiert keine gesundheitsbezogenen Aussagen.
Für deinen Shop
Beschrifte ausklappbare Bereiche klar mit den darin enthaltenen Informationen.
GSI Outdoors kombiniert eine breite Galerie mit einem Sticky-Kaufbereich auf dem Desktop für seinen Campingkocher. Auf Mobilgeräten wird der Inhalt zu einer vertikalen Abfolge mit Spezifikationen in Akkordeons. Die Informationen bleiben verfügbar, während sich ihre Anordnung an den Bildschirm anpasst.
Für deinen Shop
Erhalte die Informationen, aber passe an, wie sie angezeigt werden.
Unit Editions platziert ein großes Buchbild und eine umfangreiche Thumbnail-Galerie neben dem Titel, Preis und Kauf-Button. Ein Klick zum Ausklappen enthüllt eine längere Beschreibung, gefolgt von ähnlichen Publikationen weiter unten. Vorschauen der Innenseiten lassen die Leser ein visuelles Buch begutachten, während der Kauf der einzigen Variante unkompliziert bleibt.
Für deinen Shop
Lass die Galerie die Fragen beantworten, die sonst eine physische Begutachtung klären würde.
Café du Cycliste kombiniert Farbfelder, Größenauswahl und Passform-Tipps neben Freistellern und Tragebildern des Kleidungsstücks. Ausklappbare technische Bereiche folgen weiter unten. Kunden können Look und Passform begutachten, bevor sie ihre Konfiguration in den Warenkorb legen.
Für deinen Shop
Platziere Passform-Tipps direkt neben der Größenauswahl und zeige das Kleidungsstück sowohl allein als auch getragen.
CW&T platziert die Konfiguration und den Kaufbereich neben einer langen Erklärung über die präzise Fertigung des Stifts. Das Panel bleibt auf dem Desktop sichtbar (sticky) und fügt sich auf Mobilgeräten in den normalen Seitenfluss ein. Kunden können über die Herstellung lesen, ohne woanders nach ihren ausgewählten Optionen suchen zu müssen.
Für deinen Shop
Lass den Herstellungsprozess den Kauf rechtfertigen, ohne die Konfigurations-Optionen zu verstreuen.
Intelligentsia platziert die Geschmacksnoten in der Nähe des Kaufbereichs und liefert danach Herkunftsinformationen, Bewertungen und Tipps zur Zubereitung. Die Seite verbindet die Auswahl des Kaffees direkt mit dessen Zubereitung. Spezifische Ratschläge zum Kaffee oder zur Brühmethode beantworten praktische Fragen nach der ersten Beschreibung.
Für deinen Shop
Kombiniere Geschmacksbeschreibungen mit praktischen Tipps zur Zubereitung.
Heart Coffee Roasters setzt Spezifikationen und Transparenz-Hinweise direkt neben den Kaufbereich, mit einem großen Bild in der anderen Spalte. Auf Mobilgeräten werden die Bilder zu einer horizontalen Galerie. Die spezifischen Infos des Kaffees bleiben für Käufer, die bestimmte Röstungen vergleichen, gut sichtbar.
Für deinen Shop
Gib informierten Käufern die spezifischen Details, die sie brauchen, um Produkte zu vergleichen.
Helinox platziert Features, 'Warum dieses Produkt wichtig ist', Spezifikationen und Garantie in der Nähe der Galerie und des Bestellbereichs. Lifestyle-Fotos, passendes Zubehör und geschriebene Maße folgen weiter unten. Durch die benannten Abschnitte können Kunden nach einem bestimmten Detail suchen, ohne die gesamte Seite der Reihe nach lesen zu müssen.
Für deinen Shop
Benenne jeden Informationsabschnitt nach einer anderen Kundenfrage.
Die scrollende Kaufspalte von TRNK umfasst Material- und Größenauswahl, Kauf-Buttons sowie Infos zur Verfügbarkeit oder den Richtlinien. Eine Sticky-Galerie auf dem Desktop hält das Sofa stets sichtbar. Lieferzeiten und Versanddetails gehören direkt neben die Konfiguration, für die sie gelten.
Für deinen Shop
Platziere Lieferzeiten und -beschränkungen neben den Optionen, die diese beeinflussen.
Smith Teamaker bietet für die Verpackungswahl und Kaufhäufigkeit (Abo) separate Optionen. Die Produktbilder bleiben auf dem Desktop sichtbar, während die Kunden diese Entscheidungen treffen. Klare Bezeichnungen machen deutlich, dass der Lieferplan und die physische Verpackung zwei unterschiedliche Entscheidungen sind.
Für deinen Shop
Mache das physische Format und die Abo-Lieferung zu sichtbar getrennten Auswahlmöglichkeiten.
Borough Kitchen stellt Größe, Lagerbestand und Lieferung neben die Menge und den Kauf-Button. Spezifikationen, Pflegehinweise und Hintergrundinfos zum Hersteller folgen in separaten Abschnitten. Der Bestellbereich beantwortet, ob genau diese Pfanne die Bedürfnisse des Kunden erfüllt und rechtzeitig ankommen kann.
Für deinen Shop
Starte mit den Fakten, die nötig sind, um genau diesen Artikel richtig zu kaufen.
Momentous kombiniert das Hauptbestellformular mit längeren, informativen Inhalten und einer permanent sichtbaren Kauf-Leiste (Sticky Bar). In der aufgezeichneten Interaktion bleiben Variante, Menge und Kaufmodus in beiden Bereichen stets synchron. Beide Widgets müssen nach jeder Änderung exakt dieselbe Bestellung widerspiegeln.
Für deinen Shop
Halte alle Kauf-Buttons stets mit der aktuellen Auswahl des Kunden synchronisiert.
Bei Athletic Brewing folgen nach dem Kaufbereich die Zutaten, Geschmacksbeschreibungen, ein Video und die Notizen des Brauers. So bekommen Kunden verschiedene Möglichkeiten, ein Getränk einzuschätzen, das sie online nicht probieren können. Jeder Abschnitt ist dann am hilfreichsten, wenn er ein spezifisches Detail hinzufügt, das die anderen noch nicht erklärt haben.
Für deinen Shop
Nutze verschiedene Medien, um unterschiedliche Fragen zu einem sensorischen Produkt zu beantworten.
Schreibe auf, was die Auswahl der Kundschaft beeinflussen könnte, bevor du ein Layout wählst. Bei Kleidung sind das Passform- und Größeninfos; bei Möbeln vielleicht Materialauswahl und Verfügbarkeit; bei einem Abo Preis und Lieferintervall. Café du Cycliste platziert die Passformberatung neben Größe und Farbe, während Smith Teamaker die Verpackungswahl von der Lieferhäufigkeit trennt.
Setze diese Auswahlmöglichkeiten in die Nähe der Kauf-Buttons. Nutze den Rest der Seite für aussagekräftige Details: Innenseiten bei einem Buch, technische Daten bei Ausrüstung oder Zubereitungstipps für Kaffee. Unit Editions und Intelligentsia zeigen, wie unterschiedlich diese Details sein können. Eine hilfreiche Produktgalerie beantwortet Fragen, die die Textbeschreibung offen lässt.
TRNK kombiniert Möbelmaterialien mit Verfügbarkeitsinfos, und CW&T platziert die Konfiguration eines Stiftes neben der Geschichte seiner Herstellung. Diese Seiten zeigen, warum eine Variantenauswahl Kontext braucht. Käufer müssen verstehen, was sich ändert, wenn sie eine andere Option wählen, einschließlich Aussehen, Preis oder Lieferzeit.
Überprüfe eine Standardoption, eine weitere verfügbare Option und eine nicht verfügbare Option. Das Bild, der Preis und der Kauf-Button sollten stets dieselbe Auswahl widerspiegeln. Wenn du eine Sticky Add-to-Cart-Leiste hinzufügst, stelle sicher, dass sie mit dem Hauptformular synchron bleibt. Momentous demonstriert diese Beziehung in der aufgezeichneten Interaktion. Teste Mengenänderungen und Optionen für wiederkehrende Käufe genauso intensiv wie Farbe oder Größe.
Zeige die gewählten Optionen, den Preis, die Verfügbarkeit und wichtige Kaufbedingungen. Füge Hinweise zur Größe oder Lieferung hinzu, sofern diese die Auswahl beeinflussen.
Ihre Länge sollte sich nach den Fragen richten, die das Produkt aufwirft. Einfache Produkte benötigen vielleicht nur wenig Erklärung; technische, konfigurierbare oder erklärungsbedürftige Artikel hingegen mehr.
Diese Sammlung stützt sich nicht auf Conversion-Daten. Sie dokumentiert Designentscheidungen, die du selbst bewerten und mit deinen eigenen Produkten und Kunden testen kannst.
Eine Produktseite unterstützt die Auswahl und Bestellung eines bestimmten Artikels. Eine Kampagnen-Landingpage kann ein Angebot, eine Kollektion oder ein Problem vorstellen, bevor sie Besucher zu den Produkten weiterleitet. Wie stark sich beide überschneiden, hängt davon ab, wo die Besucher ankommen und was sie bereits wissen.
Wähle Bilder, die die Fragen beantworten, die der Artikel aufwirft: Größenverhältnis, Passform, Verarbeitung, Inhalt oder Verwendung. Ein Buch braucht vielleicht Bilder von den Innenseiten, während Möbel Ansichten benötigen, die Abmessungen und Oberfläche erklären. Mehrere fast identische Studioaufnahmen lassen diese Fragen oft unbeantwortet.
Gib Fudge ein Ziel und eine Referenz. Das Tool schlägt Änderungen für deinen Shop vor, erstellt einen Entwurf in deinem Shopify-Theme und gibt dir Rückmeldung. Du überprüfst jede Änderung, bevor sie live geht.
Sieh dir an, wie der Shop-Editor funktioniert