Skip to main content

​
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.
  • Hotspots im OPC-Editor: Die Hotspots sind bereits im OPC-Editor sichtbar, sodass du ihre Position direkt beim Bearbeiten prüfen kannst.
  • 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:

Banner
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. Title-Tag des Bildes: Hinterlege einen Titel für das Bild. Er erscheint als Tooltip, wenn man mit der Maus über das Bild fährt. 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.
Hotspot
Hotspot Größe: Wähle die Größe des Kreises (z. B. MD (30px)). Hotspot Transparenz: Lege fest, wie durchsichtig der Hotspot sein soll. Zur Auswahl stehen Vollständig sichtbar, Leicht durchsichtig und Sehr durchsichtig. 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.
Popup
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. Zur Auswahl stehen Nur Text und Produktbild und Text. Beschreibung: Steuere, ob und wie die Beschreibungstexte im Popup dargestellt werden sollen, z. B. Keine Beschreibung oder Kurzbeschreibung (max. 200 Zeichen).
Popup Nur Text mit Kurzbeschreibung

​
Animation

Hier legst du fest, ob und wie der Banner beim Scrollen eingeblendet wird.
Animation
Animationstyp: Wähle die Animation, mit der der Banner erscheint. Bei none wird keine Animation abgespielt. Dauer: Dauer der Animation, z. B. 2 s. Verzögerung: Wartezeit, bis die Animation beginnt. Abstand (Pixel): Die Animation beginnt erst, wenn zwischen der Oberkante des Banners und der Unterkante des Browserfensters der angegebene Scroll-Abstand in Pixeln erreicht ist. So startet die Animation nicht schon, obwohl der Banner noch nicht ganz sichtbar ist. Wiederholung: Anzahl der Wiederholungen.