Skip to main content
Image

​
Allgemeine Beschreibung

Der “NIU Spotlight Banner” (auch oft “Shop the Look” genannt) ist ein interaktives Portlet für den OnPage Composer. Er ermöglicht es dir, ein Bild hochzuladen und darauf spezifische Bereiche (“Hotspots”) zu markieren. Diese Hotspots können mit Produkten oder beliebigen URLs verknüpft werden. Wenn ein Kunde auf einen Hotspot klickt oder tippt, öffnen sich weitere Informationen oder eine direkte Verlinkung zum Artikel. Dies schafft ein intuitives und visuelles Einkaufserlebnis.

​
Einsatzmöglichkeiten (Inspiration)

  • Shop the Look (Mode): Zeige ein Model, das ein komplettes Outfit trägt. Setze Hotspots auf die Hose, das Hemd und die Schuhe, um die einzelnen Artikel direkt verlinken.
  • Interior Design: Präsentiere ein fertig eingerichtetes Wohnzimmer. Verlinke das Sofa, die Lampe und den Teppich direkt im Bild.
  • Technische Zeichnungen: Nutze Explosionszeichnungen von Maschinen oder Geräten und verlinke die einzelnen Ersatzteile exakt an ihrer Position.
  • Interaktive Grafiken: Erkläre Features eines Produktes, indem du Hotspots auf Details (z. B. Anschlüsse, Bedienelemente) legst und Info-Texte hinterlegst.

​
Featureübersicht:

  • Visueller Editor: Platziere Hotspots einfach per Klick direkt auf dem Vorschaubild.
  • Produktverknüpfung: Verknüpfe Hotspots direkt mit Artikeln aus deinem Shop – Daten wie Name und Link werden automatisch gezogen.
  • Individuelle Anpassung: Überschreibe Standard-Produktdaten mit eigenen Titeln und Beschreibungen, falls gewünscht.
  • Design-Kontrolle: Passe Größe, Farbe und Transparenz der Hotspots sowie das Design der Popups an deinen Shop an.

​
Settings:

Image
Banner Bild: Lade hier das Hauptbild hoch, auf dem die Hotspots platziert werden sollen. Alt-Text des Bildes: Hinterlege einen alternativen Text für Screenreader und SEO. Spotlight Bereiche: Hier siehst du die Vorschau deines Bildes. Klicke auf Neue Zone, um einen Hotspot zu erstellen, und ziehe ihn an die gewünschte Position im Bild. In der rechten unteren Ecke der Zone kannst du die Größe anpassen, indem du diese gedrückt hältst und ziehst. Einstellungen für die gewählte Zone:
  • Titel: Der Name des Hotspots.
  • URL: Ein manueller Link (optional).
  • CSS-Klasse: Für spezielle Styles.
  • Artikel: Suche hier nach einem Produkt in deinem Shop, um es direkt zu verknüpfen.
  • Link in neuem Tab öffnen: Entscheide, ob sich der Link in einem neuen Fenster öffnet.
  • Beschreibung: Ein optionaler Text, der im Popup angezeigt wird.
Hinweis: Wenn du die Felder Titel, URL oder Beschreibung leer lässt, aber einen Artikel verknüpft hast, werden automatisch die Daten des Artikels verwendet. Eigene Einträge überschreiben die Artikeldaten.

​
Hotspot

Hier definierst du das Aussehen der anklickbaren Punkte (Hotspots) auf dem Bild.
Image
Hotspot Größe: Wähle die Größe des Kreises (z. B. MD (30px)). Hotspot Transparenz: Lege fest, ob der Hotspot solide oder leicht durchsichtig sein soll. Hotspot Farbe: Bestimme die Hintergrundfarbe des Kreises (z. B. deine Primärfarbe). Icon Farbe: Bestimme die Farbe des Symbols (meist ein Plus-Zeichen) innerhalb des Hotspots.
Hier gestaltest du das Fenster, das sich öffnet, wenn ein Hotspot angeklickt wird.
Image
Popup Border Radius: Lege die Abrundung der Ecken des Popups in Pixeln fest (z. B. 8). Popup Inhalt: Entscheide, was im Popup angezeigt werden soll (z. B. “Nur Text” oder Artikelinformationen). Beschreibung: Steuere, ob und wie die Beschreibungstexte im Popup dargestellt werden sollen.