Great Image Map Banner: Klickbare Hotspots auf Bildern
Beschreibung
Highlights
- Bis zu 10 klickbare Hotspots auf jedem Banner-Bild
- Fünf Marker-Stile, vom deutlichen Pin bis komplett unsichtbar
- Tooltip mit Titel, Text, Bild und Link je Hotspot
- Streifen-Modus: 2 bis 5 klickbare Spalten oder Zeilen
- Positions-Picker im Frontend, kein Raten von Koordinaten
Features
- CMS-Block für den Erlebniswelten-Editor
- Bis zu 10 Hotspots je Banner
- Marker-Stile: Pin, pulsierender Punkt, Plus, Nummer, unsichtbar
- Animationen: keine, Pulse, Heartbeat, Resonate, Energize
- Hover-Tooltip, Klick-Tooltip, direkter Link oder dauerhaftes Label
- Tooltip mit Titel, Text, Bild und CTA-Button oder Textlink
- Tooltip-Position je Hotspot: automatisch, oben, unten, links, rechts
- Fünf Sichtbarkeits-Hinweise, frei kombinierbar
- Streifen-Modus mit 2 bis 5 Spalten oder Zeilen
- Je Streifen: Größe, Link, Titel, Untertitel und Farben
- Hybrid-Modus: Streifen und Hotspots zusammen
- Getrenntes Bild für Desktop und Mobil mit eigenem Breakpoint
- Mobile-Liste statt Hotspots auf kleinen Bildschirmen
- Positions-Picker im Frontend über ?hotspots=editor
- Alle Texte sind Snippet-Felder, eines je Sprache
Über die Erweiterung
Machen Sie Ihr bestes Foto klickbar
Ein Lookbook, ein eingerichteter Raum, eine Werkstattszene. Ihr Kunde sieht etwas, das ihm gefällt, weiß aber nicht, wie es heißt oder wo er es findet. Setzen Sie einen Hotspot darauf und ein Klick führt zum Produkt.
Das bekommen Sie
- Bis zu 10 Hotspots, in Prozent positioniert und dadurch auf jedem Bildschirm an der richtigen Stelle
- Fünf Marker-Stile: Pin, pulsierender Punkt, Plus, nummerierter Kreis oder unsichtbar
- Tooltip mit Titel, Text, Bild und Link, bei Hover oder Klick
- Streifen-Modus: den Banner in 2 bis 5 klickbare Spalten oder Zeilen teilen
- Optionaler Header und Footer, getrenntes Bild für Desktop und Mobil
Hotspots, die auch gefunden werden
Unsichtbare Hotspots sehen aufgeräumt aus, aber niemand klickt, was niemand sieht. Fünf Hinweise helfen: ein kurzes Pulsieren nach dem Laden, kleine dauerhafte Punkte, Umrandungen beim Hover, ein Spotlight-Effekt und eine Textzeile unter dem Bild. Beliebig kombinierbar.
Funktioniert auch am Smartphone
Kleine Bildschirme und viele Hotspots passen schlecht zusammen. Schalten Sie die Mobile-Liste ein und die Hotspots erscheinen stattdessen als übersichtliche Liste unter dem Bild. Jeder Hotspot lässt sich auch nur für Desktop oder nur für Mobil anzeigen.
Schnell eingerichtet
Sie finden den Block im Erlebniswelten-Editor unter "Text und Bild" und tragen die Inhalte in den Einstellungen ein. Zum Positionieren rufen Sie Ihre Seite mit ?hotspots=editor auf, klicken aufs Bild, und die X- und Y-Werte liegen in der Zwischenablage. Alle Texte sind Snippet-Felder, jede Sprache bekommt ihre eigene Formulierung.
Machen Sie Ihr bestes Foto klickbar
Ein Lookbook, ein eingerichteter Raum, eine Werkstattszene. Ihr Kunde sieht etwas, das ihm gefällt, weiß aber nicht, wie es heißt oder wo er es findet. Setzen Sie einen Hotspot darauf und ein Klick führt zum Produkt.
Das bekommen Sie
- Bis zu 10 Hotspots, in Prozent positioniert und dadurch auf jedem Bildschirm an der richtigen Stelle
- Fünf Marker-Stile: Pin, pulsierender Punkt, Plus, nummerierter Kreis oder unsichtbar
- Tooltip mit Titel, Text, Bild und Link, bei Hover oder Klick
- Streifen-Modus: den Banner in 2 bis 5 klickbare Spalten oder Zeilen teilen
- Optionaler Header und Footer, getrenntes Bild für Desktop und Mobil
Hotspots, die auch gefunden werden
Unsichtbare Hotspots sehen aufgeräumt aus, aber niemand klickt, was niemand sieht. Fünf Hinweise helfen: ein kurzes Pulsieren nach dem Laden, kleine dauerhafte Punkte, Umrandungen beim Hover, ein Spotlight-Effekt und eine Textzeile unter dem Bild. Beliebig kombinierbar.
Funktioniert auch am Smartphone
Kleine Bildschirme und viele Hotspots passen schlecht zusammen. Schalten Sie die Mobile-Liste ein und die Hotspots erscheinen stattdessen als übersichtliche Liste unter dem Bild. Jeder Hotspot lässt sich auch nur für Desktop oder nur für Mobil anzeigen.
Schnell eingerichtet
Sie finden den Block im Erlebniswelten-Editor unter "Text und Bild" und tragen die Inhalte in den Einstellungen ein. Zum Positionieren rufen Sie Ihre Seite mit ?hotspots=editor auf, klicken aufs Bild, und die X- und Y-Werte liegen in der Zwischenablage. Alle Texte sind Snippet-Felder, jede Sprache bekommt ihre eigene Formulierung.
Details
- Verfügbar in: Englisch, Deutsch
- Zuletzt aktualisiert: 9. September 2026
- Version: 1.67.1
- Kategorie: Erlebniswelten
Über den Extension Partner
great2gether
Partner Status
-
Shopware
Bronze Partner -
Shopware
Extension Partner
Details
-
Ø-Bewertung:
5
Durchschnittliche Bewertung von 5 von 5 Sternen
- Partner seit: 2015
- Erweiterungen: 28
Support
- Land: Germany
- Spricht: Deutsch, Englisch
- Reaktionszeit: Schnell
1. Bild und Modus festlegen
Erweiterungen > Meine Erweiterungen > Image Map Banner > Konfiguration öffnen, Verkaufskanal wählen, Modus festlegen (Hotspots, Streifen oder Hybrid) und die Bild-URL aus Inhalte > Medien einfügen.
2. Hotspots setzen
Hotspot aktivieren, Titel, Text und Link eintragen, dann die Position festlegen. Am einfachsten: den Block auf eine Seite legen, diese Seite mit ?hotspots=editor am Ende der URL aufrufen und auf die gewünschte Stelle im Bild klicken. Die X- und Y-Werte liegen dann in der Zwischenablage.
3. Block einbauen
Inhalte > Erlebniswelten öffnen, Block aus der Kategorie Text und Bild hinzufügen und Image Map Banner wählen. Layout speichern und einer Seite zuweisen.
Gut zu wissen
- Alle Texte sind Snippet-Felder, Sie tragen je Sprache einen Text ein.
- Die Positionen sind Prozentwerte und sitzen dadurch auf jeder Bildschirmgröße richtig. Für das Mobil-Bild denselben Bildausschnitt verwenden, sonst verschieben sich die Hotspots.
- Bei unsichtbaren Markern mindestens einen Sichtbarkeits-Hinweis aktivieren. First-Load-Pulse plus Mini-Punkte funktioniert gut.
- Der Spotlight-Effekt wirkt nur auf dunklen Bildern gut.
- Bei ausbleibenden Änderungen den Cache leeren.
1.67.1 6.7.0.0 - 6.7.14.0
Erste Version für Shopware 6.7.
- Interaktiver Bild-Banner mit bis zu 10 klickbaren Hotspots
- Fünf Marker-Stile: Pin, pulsierender Punkt, Plus, nummerierter Kreis, unsichtbar
- Fünf Animationen: keine, Pulse, Heartbeat, Resonate, Energize
- Tooltip mit Titel, Text, Bild und CTA, bei Hover oder Klick
- Tooltip-Position je Hotspot, mit automatischer Platzierung im Banner
- Fünf Sichtbarkeits-Hinweise, frei kombinierbar
- Streifen-Modus: 2 bis 5 klickbare Spalten oder Zeilen
- Hybrid-Modus: Streifen und Hotspots zusammen
- Getrenntes Bild für Desktop und Mobil mit eigenem Breakpoint
- Mobile-Liste statt Hotspots auf kleinen Bildschirmen
- Positions-Picker im Frontend über ?hotspots=editor
- Alle Texte sind Snippet-Felder, eines je Sprache
- Demo-Inhalte enthalten, der Block funktioniert direkt nach der Installation