Produktbereich (Showcase)
Für Plain Jane und Plain Jane Interactive
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)
Gehen Sie zu Onlineshop > Themes > Anpassen
Navigieren Sie zu Produkte > Standardprodukt
Wenn derzeit ein anderer Produktbereich aktiv ist:
Klicken Sie auf den vorhandenen Produktbereich
Wählen Sie Abschnitt entfernen
Klicken Sie Sektion hinzufügen
Wählen Sie Produktbereich (Showcase)
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
Produktname: Auffällige Überschrift
Preis-Anzeige: Deutliche Preisangabe mit Anzeigen für Angebote
Produktbeschreibung: Rich-Text-Inhalt
Variantenauswahl: Größe, Farbe und andere Optionen
Mengenwähler: Steuerungen zum Hinzufügen zum Warenkorb
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
Zuletzt aktualisiert