# 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:** * 📧 **Schreiben Sie uns eine E-Mail an:** * 💻 **Chatten Sie live mit uns:** Verfügbar Montag–Freitag, 10:00–18:00 EST, direkt auf unserer Website --- # 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/plain-jane-interactive/pages-and-menus/product-page/product-section-thumbnail.md?ask= ``` 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.