# Produktbereich (Thumbnail)

> **Was Sie lernen werden**
>
> * So konfigurieren Sie das „Thumbnail“-Layout für Produktseiten
> * Alle Anpassungsoptionen für Galerie, Preise, Schaltflächen und Akkordeons
> * Beste Praktiken zur Formatierung von Produktbildern und -beschreibungen

***

### Was ist das Thumbnail-Layout?

Die **Thumbnail-Layout** zeigt Produktbilder in einer vertikalen oder rasterartigen Galerie mit Miniaturansichten an. Es ist das flexibelste und am weitesten verbreitete Layout im Plain Jane-Theme und ideal für Shops mit mehreren Produktaufnahmen.

Verfügbar in:

* ✅ Plain Jane v3
* ✅ Plain Jane Interactive v2

***

### 🔧 So aktivieren Sie das Thumbnail-Layout

1. Gehen Sie zu **Onlineshop > Themes > Anpassen**
2. Wählen Sie oben im Dropdown-Menü **Produkte > Standardprodukt**
3. Suchen Sie den Bereich mit dem Namen **Produktabschnitt**
4. Wenn ein anderes Layout (z. B. `Showcase` oder `Scroll`) aktiv ist, klicken Sie auf „...“ > **Abschnitt ausblenden**
5. Erweitern Sie das `Produktabschnitt` und konfigurieren Sie jeden **Block**:
   * Im Angebot-Label
   * Überschrift
   * Preis
   * Beschreibung
   * Galerie
   * Varianten & Schaltflächen
   * Produkt-Akkordeon

> 💡 Tipp: Sie können Blöcke nach Bedarf mit dem **Block hinzufügen** Button unter diesem Abschnitt hinzufügen oder entfernen.

***

### ⚙️ Layout-Anpassung

Klicken Sie auf das Haupt- `Produktabschnitt` (nicht die Blöcke), um auf die Layouteinstellungen zuzugreifen:

#### Position der Produktgalerie

* Verschieben Sie die Bildergalerie nach **links** oder **rechts**

#### Einblend-Animation

* Steuert die Einblend-Dauer für den Abschnitt (0 = sofort, höhere Werte = langsamere Einblendung)

#### Galerie-Spalten (nur linke Seite)

* Passen Sie an, wie viele Miniaturbilder pro Reihe angezeigt werden (1 bis 6)

#### Galerie-Bildgröße

* Feinabstimmung der Bildgröße separat für **Desktop** und **Mobil**

***

### 🏷 Angebotsschild

* Sichtbarkeit umschalten
* Hintergrund- und Textfarbe festlegen
* Abstand/Rand um das Schild anpassen

***

### 🧾 Produktdetails

Jeder Block kann angepasst werden:

* **Überschrift**: Titelgröße, Farbe, Abstand
* **Preis**: Währung anzeigen/ausblenden, Schriftgröße, Preisfarbe
* **Beschreibung**: Legen Sie eine maximale Wortanzahl fest (fügt einen „Mehr lesen“-Umschalter hinzu)
* **Varianten & Schaltflächen**:
  * Eckenradius und Abstände steuern
  * Den „Nächstes Produkt“-Button ausblenden, wenn nicht gewünscht

***

### 🪜 Produkt-Akkordeons

Fügen Sie mehrere zusammenklappbare Abschnitte mit dem **Produkt-Akkordeon** Block hinzu:

* Titel umbenennen (z. B. „Größentabelle“, „Rückgaben & Umtausch“)
* Abstände anpassen
* Beliebigen formatierten Text oder HTML hinzufügen

> 💡 Tipp: Halten Sie Akkordeons minimal. Verwenden Sie maximal 2–3, um Käufer nicht zu überfordern.

***

### ➕ Benutzerdefinierte Abschnitte hinzufügen

Sie können normale Theme-Abschnitte anhängen **unter dem Produktlayout**, wie zum Beispiel:

* Scrollende Bildstreams
* E-Mail-Anmeldungen
* Vorgestellte Kollektionen

***

### 🖼 Tipps zur Bildgröße

Für eine saubere Ausrichtung von Produktname, Preis und Schaltflächen:

* Laden Sie alle Produktbilder mit demselben **Seitenverhältnis hoch**
* Empfohlen: `1000 px x 1000 px` für quadratische Galerien

### **Brauchen Sie Hilfe?**

* 💬 **Treten Sie unserer Community auf Discord bei:** <https://discord.gg/hcc2GvgZc6>
* 📧 **Schreiben Sie uns eine E-Mail an:** <support@openspaces.design>
* 💻 **Chatten Sie live mit uns:** Verfügbar Montag–Freitag, 10:00–18:00 EST, direkt auf unserer Website