# Produktbereich (Showcase) > **Was Sie lernen werden** > > * So richten Sie das Produktlayout „Showcase“ ein und passen es an, das traditionelle Seiten-an-Seiten-Layout > * Konfigurationsoptionen für Bildergalerien, Positionierung und responsives Verhalten > * Wann dieses Layout gegenüber dem modernen Thumbnail-Layout zu verwenden ist *** ## 🎯 Was ist das Showcase-Layout? **Produktbereich (Showcase)** bietet ein traditionelles Seiten-an-Seiten-Produktlayout mit Thumbnail-Galerien und klassischer Anzeige von Produktinformationen. Dieses Layout ist ideal für Shops, die eine konventionellere E‑Commerce-Erfahrung mit vertrauten Navigationsmustern bevorzugen. **Hauptfunktionen:** * Traditionelles Thumbnail-Galeriesystem * Seiten-an-Seiten-Anordnung von Bild und Produktinformationen * Konfigurierbare Bildpositionierung (links/rechts) * Anpassbare Galeriespalten und -abstände * Mobil responsives Design mit gestapeltem Layout * Klassische Hierarchie der Produktinformationen Verfügbar in: * ✅ Plain Jane v3.1+ * ✅ Plain Jane Interactive v2+ *** ## 🔧 So aktivieren Sie den Produktbereich (Showcase) 1. Gehen Sie zu **Onlineshop > Themes > Anpassen** 2. Navigieren Sie zu **Produkte > Standardprodukt** 3. Wenn derzeit ein anderer Produktbereich aktiv ist: * Klicken Sie auf den vorhandenen Produktbereich * Wählen Sie **Abschnitt entfernen** 4. Klicken Sie **Sektion hinzufügen** 5. Wählen Sie **Produktbereich (Showcase)** 6. Konfigurieren Sie bei Bedarf das Layout und die Blöcke *** ## 📐 Layout-Konfiguration ### **Positionierung von Bild & Produktinformationen** **Produktinfo & Bild tauschen** * Umschalten, um Produktinformationen auf die linke Seite zu verschieben * Standard: Bilder links, Produktinformationen rechts * Umgekehrt: Produktinformationen links, Bilder rechts **Einrichtung der Bildergalerie** * **Zusätzliche Fotos umkehren**: Steuern, ob Thumbnails über oder unter dem Hauptbild angezeigt werden * **Anzahl der Galeriespalten**: Anzahl der Thumbnail-Spalten festlegen (1–6) * **Galerieränder**: Abstand um die Bildergalerie anpassen ### **Responsives Verhalten** **Desktop-Layout** * Seiten-an-Seiten-Layout mit konfigurierbaren Proportionen * Die Bildergalerie nimmt ungefähr 60 % der Breite ein * Produktinformationen in den verbleibenden 40 % Platz **Mobil-Layout** * Automatisches Stapeln zu einer Spalte * Hauptbild wird zuerst angezeigt * Thumbnail-Galerie unter dem Hauptbild * Produktinformationen folgen den Bildern *** ## 🖼️ Optionen für die Bildergalerie ### **Galeriekonfiguration** **Anzahl der Spalten** * 1–6 Spalten für die Thumbnail-Anzeige einstellen * Kann pro Produkt über Metafelder überschrieben werden * Mobil passt sich automatisch für optimale Anzeige an **Bildgrößen** * **Desktop-Bildgröße**: Maximale Bildabmessungen steuern * **Mobile Bildgröße**: Für kleinere Bildschirme optimieren * **Galerieränder**: Abstände zwischen Elementen feinabstimmen **Galerie-Positionierung** * **Zusätzliche Fotos unter dem Hauptbild platzieren**: Thumbnails unter dem Hauptbild verschieben * **Zusätzliche Fotos umkehren**: Reihenfolge der Thumbnails ändern * **Grid-Abstand**: Abstand zwischen Thumbnail-Bildern anpassen ### **Bildanzeige** **Hauptbild** * Großes Hauptproduktbild mit Zoom-Funktion * Klicken, um die Vollbildansicht zu öffnen * Sanfte Übergänge zwischen Bildern * Unterstützung für mehrere Medientypen (Bilder, Videos) **Thumbnail-Navigation** * Auf Thumbnails klicken, um das Hauptbild zu wechseln * Hover-Effekte für besseres Nutzerfeedback * Konsistente Seitenverhältnisse empfohlen * Lazy Loading für bessere Performance *** ## 📱 Mobiloptimierung ### **Responsives Design** **Verhalten des mobilen Layouts** * Automatisches Stapeln der Spalten auf mobilen Geräten * Optimierte Thumbnail-Größen für Touch-Interaktion * Vereinfachte Navigation für kleinere Bildschirme * Verbesserte Ladeleistung **Touch-Interaktionen** * Unterstützung für Swipe-Gesten zur Bildnavigation * Touch-freundliche Thumbnail-Größen * Optimierte Platzierung von Buttons für Mobilgeräte * Verbesserte Zugänglichkeit für Touch-Geräte *** ## ⚙️ Anpassungsoptionen ### **Animationseinstellungen** * **Fade-Dauer**: Übergangszeit zwischen Bildern steuern * **Seitenübergang**: Gesamte Seitenladeanimation festlegen * **Hover-Effekte**: Hover-Verhalten der Thumbnails konfigurieren ### **Feinabstimmung des Layouts** * **Randkontrollen**: Abstand um alle Elemente anpassen * **Ausrichtungsoptionen**: Text- und Elementpositionierung steuern * **Farb-Anpassung**: Auf Ihre Markenfarben abstimmen * **Typografie-Einstellungen**: Schriftgrößen und Stil steuern *** ## 🛍️ Anzeige von Produktinformationen Der Produktbereich (Showcase) bewahrt die traditionelle Hierarchie der Produktinformationen: ### **Informationsreihenfolge** 1. **Produktname**: Auffällige Überschrift 2. **Preis-Anzeige**: Deutliche Preisangabe mit Anzeigen für Angebote 3. **Produktbeschreibung**: Rich-Text-Inhalt 4. **Variantenauswahl**: Größe, Farbe und andere Optionen 5. **Mengenwähler**: Steuerungen zum Hinzufügen zum Warenkorb 6. **Aktionsschaltflächen**: Buttons „In den Warenkorb“ und „Jetzt kaufen“ ### **Zusätzliche Funktionen** * **Sale-Badges**: Rabatte und Aktionen hervorheben * **Lageranzeigen**: Verfügbarkeitsstatus anzeigen * **Produktbewertungen**: Integration mit Bewertungs-Apps * **Soziale Freigabe**: Teilen-Buttons für soziale Medien *** ## 🎨 Best Practices ### **Bildrichtlinien** * Verwenden Sie konsistente Seitenverhältnisse für alle Produktbilder * Mindestens 1000px Breite für scharfe Darstellung * Fügen Sie mehrere Blickwinkel und Detailaufnahmen hinzu * Optimieren Sie Dateigrößen für schnelles Laden ### **Layout-Überlegungen** * Testen Sie auf verschiedenen Bildschirmgrößen und Geräten * Stellen Sie sicher, dass die Informationshierarchie klar ist * Halten Sie essentielle Details oberhalb des Fold * Verwenden Sie Weißraum effektiv für ein sauberes Erscheinungsbild ### **Benutzererlebnis** * Machen Sie die Thumbnail-Navigation intuitiv * Stellen Sie schnelle Ladezeiten der Bilder sicher * Testen Sie Touch-Interaktionen auf mobilen Geräten * Bieten Sie klare Call-to-Actions *** ## 🔄 Wann Produktbereich (Showcase) verwenden ### **Am besten geeignet für:** * Traditionelle Einzelhandelsmarken * Shops mit konventionellen Kundenerwartungen * Produkte, die von detaillierten Thumbnail-Galerien profitieren * Marken, die vertraute E‑Commerce-Muster wünschen ### **Erwägen Sie stattdessen Produktbereich (Thumbnail), wenn:** * Sie das modernste mobile Erlebnis wollen * Ihre Kunden app‑ähnliche Interaktionen bevorzugen * Sie erweiterte Funktionen wie Bottom-Modals benötigen * Mobile Optimierung Ihre höchste Priorität ist *** ## 🚀 Leistungsaspekte * **Bildoptimierung**: Verwenden Sie nach Möglichkeit das WebP-Format * **Lazy Loading**: Eingebaut für verbesserte Seitengeschwindigkeit * **Responsive Bilder**: Automatische Größenoptimierung * **Mobile Leistung**: Für langsamere Verbindungen optimiert *** --- # 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-showcase.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.