> For the complete documentation index, see [llms.txt](https://docs.premsoft.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.premsoft.de/plugins/interaktive-hotspots.md). # Interaktive Hotspots ### Einführung Mit der Erweiterung Interaktive Hotspots für Shopware 6 kannst du ein einzelnes Foto mit Links zu verwandten Produkten in deinem Katalog anreichern, so dass deine Kunden sehen können, wie gut sich die einzelnen Produkte gegenseitig ergänzen.
Das gezeigte Beispiel eines modernen Wohnzimmers ist ein Blickfang, der mehrere Produkte im Raum zum Kauf anbietet. Kunden, die zum Beispiel ein neues Sofa suchen, werden durch eine solche Szene inspiriert und kaufen aufgrund der Präsentation mit größerer Wahrscheinlichkeit weitere ergänzende Produkte. Interactive Hotspots bietet auch eine viel effizientere Methode des Einkaufens. Die Kunden können ganze Einkaufswelten besuchen und müssen nicht mehr durch viele ähnliche Produkte blättern und ihre Vorstellungskraft einsetzen, um sie im Zusammenhang zu sehen. Interaktive Hotspots ist eine höchst individualisierbare App, die externe Links zu Produktbeschreibungen, Übersichtsseiten, Social-Media-Profilen oder jede anderen denkbaren Webseite ermöglicht, sowie ansprechende Mouseover-Effekte und attraktive Overlays bietet. Lade einfach dein Szenenbild hoch, definiere deine Produkt-Hotspots und gestalte deinen Shop um – alles mit wenigen Klicks. ### Voraussetzungen Die App kann nur in einer selbst verwalteten Shopware-Umgebung installiert werden, in der mindestens die Version 6.2.0 läuft. ### Installation Installiere die App auf die übliche Weise über Shopware „Meine Erweiterungen“. **Im Gegensatz zu anderen App muss die App für Interaktive Hotspots nach der Installation nicht konfiguriert werden. Du kannst sofort mit der Erstellung von Layouts mit Hotspots beginnen.** ### Ein interaktives Einkaufserlebnis schaffen #### Ein neues Layout erstellen Um mit der App für Interaktive Hotspots zu beginnen, erstelle zunächst wie folgt ein neues Layout: 1. Wähle in deinem Shopware Admin Dashboard **Inhalte** > **Erlebniswelten**. 2. Wähle **Neues Layout anlegen** und dann **Shopseite.** Wähle **Volle Breite**. 3. Klicke auf das **+** Symbol auf der rechten Seite, um einen neuen Block hinzuzufügen, und wähle für die Blockkategorie **Text & Bilder**. 4. Suche den Block **Interaktive Hotspots** am unteren Rand und ziehe ihn in den Hauptarbeitsbereich. 5. Um die Basis-Informationen zu ändern (z. B. den Layout-Namen), klicke jederzeit auf das **Zahnradsymbol** **⚙**. Klicke auf **Speichern**, um deine Änderungen zu speichern.
Ihr Layout für die interaktiven Hotspots kann nun angepasst werden. #### Bild hinzufügen Bewege den Mauszeiger über den Block Interaktive Hotspots und klicke auf das **Zahnradsymbol** **⚙** in der oberen rechten Ecke, um das Fenster Elementeinstellungen zu öffnen (Registerkarte Basis Einstellungen).
* Um ein vorhandenes Bild für das interaktive Einkaufserlebnis zu verwenden, klicke auf **Medien öffnen**. Wähle ein geeignetes Bild aus der Medienbibliothek aus. * Um ein neues Bild hochzuladen, klicke auf **Datein hochladen** und suche das gewünschte Bild auf deinem lokalen Rechner oder im Netzwerk.
#### Basiseinstellungen definieren Nachdem du ein Bild für dein interaktives Einkaufserlebnis hinzugefügt hast, aktiviere oder deaktiviere die folgenden Einstellungen nach Bedarf: * **Zeige Hotspot Liste unter dem Bild:** Zeigt eine Liste aller Hotspots unter dem Hauptbild an**.** * **Bei Klick zu Listeneintrag blättern**: Automatisch zum entsprechenden Listeneintrag blättern, wenn der Benutzer auf einen Hotspot klickt. #### Hotspot hinzufügen Klicke im Fenster Elementeinstellungen / Basiseinstellungen auf **Hotspot hinzufügen**, um die neue Registerkarte „Hotspot 1“ hinzuzufügen. Klicke erneut auf **Hotspot hinzufügen**, um einen weiteren Hotspot hinzuzufügen (mit fortlaufender Nummerierung), bis du die erforderliche Anzahl an Hotspots hast. Klicke auf die entsprechende **Registerkarte des Hotspots**, um dessen Einstellungen zu ändern, die in den folgenden Abschnitten beschrieben werden. Um einen Hotspot zu entfernen, klicke auf der entsprechenden Hotspot-Registerkarte auf **Hotspot entfernen**. Nachdem du eine der folgenden Hotspot-Einstellungen geändert hast, klicke auf **Fertig**, um das Fenster zu schließen. #### Hotspot-Position festlegen Die Hotspot-Position ist die Position des anklickbaren Elements, mit dem der Benutzer interagiert. Standardmäßig wird der Hotspot als blau-weißer Kreis vor dem Hauptbild angezeigt, das Aussehen ist jedoch vollständig anpassbar.
* Am einfachsten kannst du eine neue Hotspot-Position festlegen, indem du auf eine beliebige Stelle des Hauptbildes klickst. Die Hotspot-Markierung wird an diese Stelle verschoben. * Alternativ kannst du auch die **X-** und **Y-Koordinaten** für den Hotspot in die beiden Felder unter dem Hauptbild eingeben. #### Hotspot-Farben festlegen Jeder Hotspot-Marker hat zwei Farben: **Hintergrund** (der größere äußere Kreis) und **Symbol** (der kleinere innere Kreis). Für den Fall, dass der Benutzer mit Mauszeiger über den Hotspot fährt, kannst du auch verschiedene Farben definieren; diese werden mit dem Wort **Mouseover** unterschieden. Um diese Farben zu definieren, verwende die entsprechenden Farbwähler oder gib für jedes der folgenden Felder einen hexadezimalen Wert ein: * Hintergrund Farbe * Hintergrund Farbe Mouseover * Symbol Farbe * Symbol Farbe Mouseover #### Hotspot-Design einstellen Über das Dropdown-Menü kannst du zwischen zwei Designs wählen: * **Standard**: die Standard-Hotspot-Markierung ohne zusätzlichen Text. * **Zeichen**: Wähle diese Option, um der Hotspot-Markierung eine Textbeschriftung hinzuzufügen. Füge in dem Feld **Beschriftung** einen beliebigen Text hinzu.
#### Animationsstile festlegen Du kannst auf jeden Hotspot-Marker einen anderen Animationsstil anwenden, um deine Kunden anzulocken. Du kannst aus vier Animationsstilen wählen: * Pulse * Heartbeat * Energize * Resonate Probiere jede der Animationen aus und schau, welche du bevorzugst, oder verwende eine Kombination aus ihnen für deine Hotspots. #### Overlay hinzufügen Füge dem Hotspot optional ein Overlay hinzu, das ein Textfeld erscheinen lässt, wenn der Nutzer mit dem Mauszeiger darüber fährt. Das Overlay kann verwendet werden, um ein Produkt weiter zu bewerben und auf es aufmerksam zu machen.
1. Aktiviere den Schalter **Overlay anzeigen**. 2. Gib einen **Overlay Titel** und einen **Overlay Text** in die beiden unteren Felder ein. Das gesamte Overlay wird auch ein anklickbarer Link sein, den du in den Link-Feldern definierst (beschrieben im nächsten Abschnitt). #### Link hinzufügen Durch Hinzufügen eines Links zum Hotspot kannst du Kunden zu einem bestimmten Produkt in deinem Shop oder zu einer bestimmten Webseite leiten. Folge diesen Schritten: 1. Wähle für den **Link-Typ** entweder **Extern** (für einen Link zu einer bestimmten Webseite) oder **Produkt** (für einen Link zu einem bestimmten Produkt). 2. Lege den Zielort des Links fest, wenn er angeklickt wird. Wenn der Link extern ist, gib die Adresse in das Feld **Link URL** ein**.** Wenn der Link auf ein bestimmtes Produkt verweist, wähle das **Produkt** aus dem Dropdown-Menü. 3. Gib den **Link Text** ein. 4. Lege das **Link Ziel** fest: entweder **Aktuelles Fenster** oder **Neues Fenster** (empfohlen, da die Besucher sonst möglicherweise von deinem Shop weg navigieren). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.premsoft.de/plugins/interaktive-hotspots.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.