FynDesign WordPress Theme mit Shoppable Images
Kunde: FynDesign / FreyRaum3 GmbH
Website: https://fyndesign.de
Projektzeitraum: Oktober-November 2025
Technologie: WordPress, WooCommerce, Full Site Editing (FSE)
Entwicklung: FreyRaum UG
Das Projekt
FynDesign ist eine E-Commerce-Marke für 3D-gedruckte Haushaltsartikel im skandinavischen Design. Die Marke steht für Nachhaltigkeit, Minimalismus und hochwertige Produkte – Made in Germany mit erneuerbaren Energien.
Die Herausforderung
E-Commerce im Bereich Interior Design und Home Decor lebt von visueller Inspiration. Kunden möchten Produkte in echten Wohnszenarien sehen und sich inspirieren lassen – nicht nur isolierte Produktbilder betrachten.
Die zentrale Frage war: Wie können wir Storytelling, Inspiration und Shopping nahtlos miteinander verbinden?
Die Lösung: Shoppable Image Block
Wir haben einen Custom Gutenberg Block entwickelt, der Bilder in interaktive Shopping-Erlebnisse verwandelt. Der Shoppable Image Block ermöglicht es, Hotspots direkt auf Lifestyle-Bildern zu platzieren, die mit WooCommerce-Produkten verknüpft sind.
Hauptfunktionen
🎯 Interaktive Hotspots
- Beliebig viele klickbare Hotspots pro Bild
- Direkte Verknüpfung mit WooCommerce-Produkten und Variationen
- Produktsuche direkt im Editor
- Automatische Anzeige von Produktname, Variation und Preis
🎨 Vollständige Design-Kontrolle
- Theme-Farbpalette Integration (WordPress ColorPalette)
- Globale und individuelle Hotspot-Styling-Optionen
- Größe: 10–80px
- Farbe, Rahmenfarbe, Rahmenbreite
- Separate Transparenz-Steuerung für Hintergrund und Rahmen
- Ecken-Abrundung: von eckig bis kreisrund
- Animierte Rahmen-Pulse-Effekte in konfigurierbarer Farbe
📝 Text-Overlays
- Überschrift und Text über dem Bild
- 9 Positionierungsoptionen (top/middle/bottom × left/center/right)
- Individuelle Schriftgrößen und Farben
- Hintergrundfarbe mit Transparenz
- Font-Family-Auswahl
- Textausrichtung (links, zentriert, rechts)
📱 Mobile Optimierung
- Proportionale Skalierung aller Elemente
- Hotspot-Tooltips ausgeblendet auf Touch-Geräten (kein Hover)
- Text-Overlays skalieren mit: 75% (Tablet), 60% (Mobile)
- Hotspots skalieren mit: 75% (Tablet), 60% (Mobile)
- Perfekte Proportionen auf allen Bildschirmgrößen
✨ Drag & Drop Editor
- Hotspots per Klick auf das Bild platzieren
- Bestehende Hotspots per Drag & Drop verschieben
- Intuitive Sidebar-Controls für alle Einstellungen
- Live-Vorschau aller Änderungen