Überblick

• Die Section zeigt ein Lookbook mit 1–2 Spalten.
  
• Jedes Bild kann bis zu 5 klickbare Hotspots bekommen.
  
• Hotspots öffnen ein Produkt-Tooltip mit Bild, Titel und Preis.
  
• Es gibt optional eine interaktive Lupe und einen sanften Hover-Zoom.
  
• Du kannst optional ein Produkt komplett integrieren und direkt in den Warenkorb legen.
  
• Sehr viele Design- und Layout-Optionen sind im Theme-Editor einstellbar.
  
• Bilder sind responsiv und werden lazy geladen.
  

Layout und Darstellung

• Spaltenanzahl ist separat für Desktop und Mobil wählbar.
  
• Abstände zwischen Spalten und Zeilen sind einstellbar.
  
• Die Section kann volle Breite nutzen.
  
• Das Seitenverhältnis kann natürlich oder fest (1:1, 4:5, 4:3, 16:9) sein.
  
• object-fit kann auf „cover“ oder „contain“ stehen.
  
• Ein farbiges Bild-Overlay ist möglich.
  
• Der Hover-Zoom skaliert das Bild leicht für einen modernen Effekt.
  

Hotspots (Shoppable Punkte)

• Pro Bild sind bis zu 5 Hotspots möglich.
  
• Für jeden Hotspot wählst du ein Produkt aus.
  
• Die Position wird in Prozent über X und Y festgelegt.
  
• Das Hotspot-Icon kann Punkt, Plus oder ein eigenes Logo sein.
  
• Größe, Farben, Rand, und Puls-Animation sind konfigurierbar.
  
• Das Tooltip zeigt Produktbild, Titel und Preis und kann oben, unten, links oder rechts erscheinen.
  
• Die Tooltip-Position wird gegen den Viewport geprüft, damit nichts „herausfällt“.
  
• Hotspots sind anklickbar und haben ein sinnvolles aria-label.
  

Interaktive Lupe

• Die Lupe ist optional aktivierbar.
  
• Der Zoomfaktor und die Lupengröße sind einstellbar.
  
• Die Lupe folgt der Maus und zeigt den vergrößerten Bildausschnitt.
  
• In Version 2.4 wurde ein Bug behoben, damit Hotspots trotz Lupe klickbar bleiben.
  

Produkt-Integration und CTA

• Du kannst ein konkretes Produkt integrieren.
  
• Varianten-Auswahl aktualisiert Preis, Compare-at-Price, Verfügbarkeit und Variant-ID.
  
• Der „In den Warenkorb“-Button sendet direkt an /cart/add.
  
• Wenn du keine Produkt-Integration nutzt, kannst du stattdessen einen CTA-Button mit Link anzeigen.
  

Texte und Typografie

• Section-Überschrift und Unterüberschrift sind editierbar.
  
• Ausrichtung, Schriftgrößen, Schriftgewichte und Abstände sind einstellbar.
  
• Jeder Look kann Titel und Beschreibung mit eigenen Typo-Werten bekommen.
  

Styling über CSS-Variablen

• Viele Werte wie Tooltip-Breite, Padding, Bildgröße, Schriftgrößen, Hotspot-Größe, Farben und Border-Radius sind als CSS-Variablen vorhanden.
  
• Das erleichtert globale Feintuning ohne Codeänderungen in vielen Stellen.