# Produktbereich (Thumbnail)

> **Was Sie lernen werden**
>
> * So konfigurieren Sie das „Thumbnail“-Layout, das standardmäßige moderne Layout in Plain Jane v3.1
> * Erweiterte Anpassungsoptionen einschließlich Rastersystem, mobile Modale und Medienverwaltung
> * Best Practices für Produktbilder, Varianten und mobile Optimierung

***

## 🎯 Was ist das Thumbnail-Layout?

**Produktbereich (Thumbnail)** ist das standardmäßige, moderne Produktlayout in Plain Jane v3.1. Es bietet ein fortschrittliches, rasterbasiertes Bildsystem, eine untere Modaloberfläche für Mobilgeräte und umfangreiche Anpassungsmöglichkeiten. Dieser Bereich bietet die größte Flexibilität und moderne UX-Muster.

**Hauptfunktionen:**

* Fortschrittliche rasterbasierte Bildergalerie
* Unteres Modal für mobile Geräte
* Verbesserte Medienverwaltung (Bilder, Videos, 3D-Modelle)
* Erweiterte Variantenauswahl mit Farbmuster
* Modellinformationen und Unterstützung für Größentabellen
* Für Mobilgeräte optimiertes responsives Design
* Anpassbare Galeriespalten und -abstände

Verfügbar in:

* ✅ Plain Jane v3.1+ (Standard)
* ✅ Plain Jane Interactive v2+

***

## 🔧 So aktivieren Sie den Produktbereich (Thumbnail)

1. Gehen Sie zu **Onlineshop > Themes > Anpassen**
2. Navigieren Sie zu **Produkte > Standardprodukt**
3. Klicken Sie **Sektion hinzufügen** falls noch nicht vorhanden
4. Wählen Sie **Produktbereich (Thumbnail)**
5. Konfigurieren Sie die Blöcke und Einstellungen nach Bedarf

> 💡 **Hinweis**: Produktbereich (Thumbnail) ist der Standardbereich in neuen Plain Jane v3.1-Installationen.

***

## 📱 Layout- & Galerieoptionen

### **Konfiguration der Bildergalerie**

**Anzahl der Galeriespalten**

* Legen Sie die Anzahl der Spalten für die Desktop-Galerie fest (1–6 Spalten)
* Mobil passt sich automatisch für kleinere Bildschirme an
* Kann pro Produkt über Metafelder überschrieben werden

**Galerieabstand**

* Passen Sie den Abstand zwischen Galerie und Hauptbild an
* Desktop- und Mobilbildgrößen können angepasst werden
* Grid-Gap- und Auto-Rows-Einstellungen zur Feinabstimmung

**Bildpositionierung**

* Wählen Sie, ob zusätzliche Fotos über oder unter dem Hauptbild erscheinen
* Layout von Bild und Produktinformationen umkehren
* Mobil-spezifische Positionierungsoptionen

### **Mobile Modal-Erfahrung**

Der Produktbereich (Thumbnail) enthält ein ausgeklügeltes unteres Modal-System für Mobilgeräte:

* **Unteres Modal**: Fährt von unten mit Produktdetails hoch
* **Responsive Höhen**: Passt sich automatisch an den Inhalt an
* **Touch-freundlich**: Für mobile Interaktionen optimiert
* **Sanfte Animationen**: 0,3s Übergangszeit

***

## 🛍️ Produkt-Informationsblöcke

Der Produktbereich (Thumbnail) unterstützt modulare Blöcke, die neu angeordnet werden können:

### **Kernblöcke**

* **Sale-Badge** - Anzeige von Verkaufs-/Rabattkennzeichnungen
* **Produktkopf** - Titel- und Brotkrümelnavigation
* **Produktpreis** - Preisanzeige mit Verkaufspreis
* **Produktbeschreibung** - Rich-Text-Produktbeschreibung
* **Produktvarianten** - Größen-, Farb- und andere Variantenauswahlen
* **Produkt-Buttons** - In den Warenkorb und Jetzt kaufen Buttons

### **Erweiterte Blöcke**

* **Modellinfo** - Anzeige von Modellmaßen und Informationen
* **Farbfelder** - Visuelle Farbauswahloberfläche
* **Größentabellen** - Pop-up- oder eingebettete Größentabellen
* **Benutzerdefinierte Akkordeons** - Ausklappbare Inhaltsabschnitte

***

## ⚙️ Erweiterte Anpassung

### **Einrichtung von Farbmuster**

Aktivieren Sie die visuelle Farbauswahl:

1. Fügen Sie Farbmetafelder zu Ihren Produkten hinzu
2. Konfigurieren Sie Anzeigeoptionen für Muster
3. Richten Sie Verbindungen zu Farbvarianten ein

**Erfahren Sie mehr**: [Einrichtung von Farbmuster](/german/plain-jane-interactive/advanced/setting-up-color-swatches.md)

### **Modellinformationen**

Zeigen Sie Modelldetails für Modeprodukte an:

1. Fügen Sie Modellmetafelder hinzu (Größe, Maße, getragene Größe)
2. Konfigurieren Sie Anzeigeformat und Positionierung
3. Passen Sie Styling und Layout an

**Erfahren Sie mehr**: [Einrichtung von Modellinformationen](/german/readme-1/advanced/setting-up-model-info.md)

### **Größentabellen**

Fügen Sie produktspezifische Größentabellen hinzu:

1. Erstellen Sie Größentabellen-Metafelder
2. Laden Sie Größentabellenbilder oder -tabellen hoch
3. Konfigurieren Sie das Popup-Verhalten

**Erfahren Sie mehr**: [Hinzufügen von Größentabellen](/german/readme-1/advanced/how-to-add-size-charts-to-each-product.md)

***

## 📐 Anpassungsoptionen

### **Layout-Einstellungen**

* **Produktinfo & Bild tauschen**: Reihenfolge des Layouts umkehren
* **Zusätzliche Fotos umkehren**: Galeriepositionierung steuern
* **Anzahl der Galeriespalten**: 1–6 Spalten für den Desktop
* **Galerieränder**: Abstand um Bilder anpassen

### **Styling-Optionen**

* **Fade-Dauer**: Seitenübergangsanimationen steuern
* **Mobile Bildgrößen**: Für verschiedene Bildschirmgrößen optimieren
* **Desktop-Bildgrößen**: Maximale Bildabmessungen festlegen
* **Grid-Abstand**: Abstand zwischen Bildern feinabstimmen

### **Responsives Verhalten**

* **Mobil-Layout**: Automatische Optimierung für Mobilgeräte
* **Tablet-Ansicht**: Zwischenmaß für Tablet-Bildschirme
* **Desktop-Layout**: Volles Rastersystem mit anpassbaren Spalten

***

## 🎨 Best Practices

### **Bildoptimierung**

* Verwenden Sie hochwertige Bilder (mindestens 1000 px Breite)
* Behalten Sie konsistente Seitenverhältnisse bei Produktbildern bei
* Fügen Sie Lifestyle-Aufnahmen neben produktreinen Bildern hinzu
* Optimieren Sie Dateigrößen für schnelles Laden

### **Produktinformationen**

* Schreiben Sie klare, überzeugende Produktbeschreibungen
* Verwenden Sie Modellinformationen für Mode-/Bekleidungsprodukte
* Fügen Sie Größentabellen für Artikel hinzu, die Passformhinweise erfordern
* Richten Sie Farbmuster für Produkte mit mehreren Farben ein

### **Mobile Erfahrung**

* Testen Sie die Funktionalität des unteren Modals auf echten Geräten
* Stellen Sie sicher, dass alle interaktiven Elemente touchfreundlich sind
* Halten Sie wichtige Informationen sichtbar, ohne zu scrollen
* Verwenden Sie geeignete Bildgrößen für die mobile Ansicht

***

## 🚀 Leistungstipps

* **Bildkompression**: Verwenden Sie optimierte Bildformate (WebP, wenn möglich)
* **Lazy Loading**: Eingebautes Lazy Loading für bessere Leistung
* **Mobile-First**: Design berücksichtigt die mobile Erfahrung als primär
* **Grid-Effizienz**: Fortgeschrittenes CSS Grid für optimale Darstellung

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/german/readme-1/pages-and-menus/product-page/product-section-thumbnail.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.