Produktbereich (Thumbnail)
Für Plain Jane und Plain Jane Interactive
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)
Gehen Sie zu Onlineshop > Themes > Anpassen
Navigieren Sie zu Produkte > Standardprodukt
Klicken Sie Sektion hinzufügen falls noch nicht vorhanden
Wählen Sie Produktbereich (Thumbnail)
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:
Fügen Sie Farbmetafelder zu Ihren Produkten hinzu
Konfigurieren Sie Anzeigeoptionen für Muster
Richten Sie Verbindungen zu Farbvarianten ein
Erfahren Sie mehr: Einrichtung von Farbmuster
Modellinformationen
Zeigen Sie Modelldetails für Modeprodukte an:
Fügen Sie Modellmetafelder hinzu (Größe, Maße, getragene Größe)
Konfigurieren Sie Anzeigeformat und Positionierung
Passen Sie Styling und Layout an
Erfahren Sie mehr: Einrichtung von Modellinformationen
Größentabellen
Fügen Sie produktspezifische Größentabellen hinzu:
Erstellen Sie Größentabellen-Metafelder
Laden Sie Größentabellenbilder oder -tabellen hoch
Konfigurieren Sie das Popup-Verhalten
Erfahren Sie mehr: Hinzufügen von Größentabellen
📐 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
Zuletzt aktualisiert