---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten"
locale: de
meta:
"og:title": "Academy Article"
---
[Zur Startseite](https://academy.laioutr.com/)
- [Storefront-Funktionen](https://academy.laioutr.com/bereiche/storefront-funktionen)
- [Produkte und Kategorien](https://academy.laioutr.com/leitfaeden/produkte-und-kategorien)
- [Produktdetailseite und Datenblatt gestalten](https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten)
# Produktdetailseite und Datenblatt gestalten
Die Produktdetailseite ist in Studio eine Vorlage für alle Produkte: links die Bildergalerie, rechts die Buy Box aus Blöcken wie Titel, Preis, Variantenauswahl und In den Warenkorb, darunter optional ein Datenblatt. Inhalte wie Bilder, Varianten, Preise und Spezifikationen liefert die Commerce-App über Orchestr.
## Bevor du startest
- Tarif
- Laioutr-Commerce-Plan
- Rolle
- Editor oder Admin im Projekt
- Dauer
- 7 Min.
### Voraussetzungen
- Commerce-App installiert und verbunden
- Produktdetailseite im Projekt vorhanden
Zuletzt geprüft am 15. Oktober 2026
Die Produktdetailseite (PDP) ist eine dynamische Seite: Studio pflegt eine Konfiguration, die für jedes Produkt mit dessen Daten gerendert wird. Die Section **Product Detail** teilt die Seite in zwei Spalten. Links sitzt die **Product Image Gallery** mit Hauptbild, Thumbnail-Leiste und Vollbild-Lightbox. Rechts entsteht die Buy Box aus einzelnen Blöcken: Produkttitel, Preisangabe, Variantenauswahl, **Add to Cart** mit Mengenwahl, Vorteilsbox, Gutscheinbox, Staffelrabatt oder Energielabel. Jedes Projekt kombiniert die Blöcke, die zum Sortiment passen. Auf dem Smartphone wird daraus eine Spalte.
Das Datenblatt (**Table Product Specifications**) zeigt technische Daten wie Maße oder Leistungsaufnahme als Tabelle, gruppiert nach Abschnitten und passend zur Sprache formatiert. Es wird entweder aus den Spezifikationen des Produkts gefüllt oder mit manuell gepflegten Zeilen.
Bilder, Varianten, Preise, Lagerbestand und Spezifikationen liefert die Commerce-App über Orchestr. Was auf der PDP erscheint, hängt deshalb davon ab, welche Daten das Backend für ein Produkt bereitstellt.
## Schritt für Schritt
1. 1 ### Schritt 1: Produktdetailseite öffnen
In **Studio** die Produktdetailseite in der Seitenliste wählen. Änderungen gelten für alle Produkte.
2. 2 ### Schritt 2: Vorschauprodukt wählen
In den Seiteneigenschaften unter **Preview Data** ein Produkt mit Varianten und mehreren Bildern wählen. Die Auswahl gilt nur für die aktuelle Studio-Sitzung.
3. 3 ### Schritt 3: Buy Box zusammenstellen
Im Ebenenbaum die Section Product Detail aufklappen und Blöcke für Titel, Preis, Variantenauswahl und Add to Cart prüfen. Weitere Blöcke wie Vorteilsbox oder Staffelrabatt hinzufügen und per Drag and Drop anordnen.
4. 4 ### Schritt 4: Datenblatt einfügen
Den Block Table Product Specifications hinzufügen. Unter **Data Source** die Abfrage wählen, um die Spezifikationen des Produkts zu zeigen, oder manuelle Zeilen mit optionalem Feld **Section** pflegen; danach den Stil outlined oder plain wählen.
5. 5 ### Schritt 5: Weitere Produkte ergänzen
Unterhalb der Section Product Detail einen Product Slider für ähnliche oder passende Produkte einfügen.
6. 6 ### Schritt 6: Mit anderem Produkt prüfen
Unter **Preview Data** ein Produkt ohne Varianten oder ohne Spezifikationen wählen und prüfen, ob die Seite sauber bleibt. Danach mit **Save** speichern und mit **Publish** veröffentlichen.
## Ergebnis prüfen
In der Storefront ein Produkt mit Varianten öffnen und eine andere Variante wählen: Preis, Bild und Verfügbarkeit wechseln. Das Datenblatt zeigt Werte im Format der gewählten Sprache, und **Add to Cart** legt die gewählte Variante in den Warenkorb.
## Häufige Fragen
Muss jede Produktseite einzeln gepflegt werden?
Nein. Die Produktdetailseite ist eine Vorlage für alle Produkte. Produktinhalte wie Texte, Bilder und Preise kommen aus dem Backend, Studio legt nur Aufbau und Darstellung fest.
Warum bleibt das Datenblatt leer?
Im Abfragemodus zeigt die Tabelle die Spezifikationen, die die Commerce-App für das Produkt liefert. Fehlen sie im Backend oder gibt die App sie nicht weiter, bleibt die Tabelle leer; dann helfen manuelle Zeilen oder die Pflege im Backend.
Warum lässt sich Add to Cart nicht anklicken?
Ist ein Produkt ausverkauft, ist der Button deaktiviert. Hat ein Produkt Varianten und ist noch keine gewählt, passiert beim Klick nichts, bis eine Variante ausgewählt ist.
## Passend dazu
- [Seitentyp-Rezepte: Home, Produktliste, Produktdetail, Content](https://academy.laioutr.com/artikel/seitentyp-rezepte-home-produktliste-produktdetail-content)6 Min.
Für die wichtigsten Seitentypen gibt es bewährte Rezepte: welcher Pfad gilt, welche Daten die Seite lädt und welche Sections sie typischerweise enthält. Die Übersicht hilft, eine Storefront vollständig und konsistent aufzubauen.
- [Produktkacheln und Produktslider einsetzen](https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen)5 Min.
Produktkacheln zeigen ein Produkt mit Bild, Marke, Titel, Preis, Labels, Farbvarianten und optionalem Warenkorb-Button; der Product Slider reiht solche Kacheln horizontal auf, zum Beispiel für Neuheiten oder passende Produkte. Welche Produkte erscheinen, kommt aus einer Abfrage an die angebundene Commerce-App.
- [Strukturierte Daten nach Schema.org](https://academy.laioutr.com/artikel/strukturierte-daten-schema-org)6 Min.
Jede Laioutr-Seite enthält genau einen Schema.org-Graph als JSON-LD, ohne zusätzliches Modul. Die SEO-App liefert Website, Seite und Organisation, Sections ergänzen Breadcrumbs, FAQ, Produkte und Produktlisten.
- [Warenkorb in der Storefront einrichten und prüfen](https://academy.laioutr.com/artikel/warenkorb-im-storefront-pruefen-und-einrichten)5 Min.
Der Warenkorb öffnet sich als seitliches Panel (Cart Sheet) mit Positionen, Gutscheinfeld, Fortschritt bis zum Gratisversand und Summen; zusätzlich gibt es eine eigene Warenkorbseite. Preise, Rabatte, Versandkosten und der Weg zur Kasse kommen vom Commerce-Backend.
## In einer Lektion lernen
- [Seitentyp-Rezepte anwenden](https://academy.laioutr.com/lektionen/ux-designer-seitentyp-rezepte)12 Min.
## [Produkte und Kategorien](https://academy.laioutr.com/leitfaeden/produkte-und-kategorien)
In diesem Leitfaden suchen
1. [Produktlisten mit Filter und Sortierung einrichten](https://academy.laioutr.com/artikel/produktlisten-mit-filter-und-sortierung-einrichten)6 Min.
2. [Produktdetailseite und Datenblatt gestalten](https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten)7 Min.
3. [Produktkacheln und Produktslider einsetzen](https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen)5 Min.
4. [Markenseiten und Markenübersicht aufbauen](https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen)6 Min.
5. [Suche und Suchergebnisseite einrichten](https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten)6 Min.
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "de",
"name": "Default",
"url": "https://academy.laioutr.com/",
"workTranslation": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten"
]
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/",
"position": 1
},
{
"@type": "ListItem",
"name": "Storefront-Funktionen",
"item": "https://academy.laioutr.com/bereiche/storefront-funktionen",
"position": 2
},
{
"@type": "ListItem",
"name": "Produkte und Kategorien",
"item": "https://academy.laioutr.com/leitfaeden/produkte-und-kategorien",
"position": 3
},
{
"@type": "ListItem",
"name": "Produktdetailseite und Datenblatt gestalten",
"item": "https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten#/schema/question/1",
"@type": "Question",
"inLanguage": "de",
"name": "Muss jede Produktseite einzeln gepflegt werden?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Nein. Die Produktdetailseite ist eine Vorlage für alle Produkte. Produktinhalte wie Texte, Bilder und Preise kommen aus dem Backend, Studio legt nur Aufbau und Darstellung fest.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten#/schema/question/2",
"@type": "Question",
"inLanguage": "de",
"name": "Warum bleibt das Datenblatt leer?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Im Abfragemodus zeigt die Tabelle die Spezifikationen, die die Commerce-App für das Produkt liefert. Fehlen sie im Backend oder gibt die App sie nicht weiter, bleibt die Tabelle leer; dann helfen manuelle Zeilen oder die Pflege im Backend.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten#/schema/question/3",
"@type": "Question",
"inLanguage": "de",
"name": "Warum lässt sich Add to Cart nicht anklicken?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Ist ein Produkt ausverkauft, ist der Button deaktiviert. Hat ein Produkt Varianten und ist noch keine gewählt, passiert beim Klick nichts, bis eine Variante ausgewählt ist.
"
}
}
]
}
```