Integrations- & Einrichtungsleitfaden
Dieses Dokument enthält detaillierte Anweisungen zur Einrichtung, Konfiguration und Fehlerbehebung der Hivebee Smart Search-Komponenten in einem Shopify-Shop. Die App wird über Shopify Theme App Extensions (App Embed Blocks) integriert, was bedeutet, dass für Standardeinrichtungen keine direkte Codebearbeitung erforderlich ist.
Voraussetzungen
Um diese Suchoberflächen zu installieren und zu aktivieren:
- Stellen Sie sicher, dass der Shop ein mit Shopify Online Store 2.0 kompatibles Theme verwendet (z. B. Dawn, Sense, Prestige, Impulse).
- Die Hivebee-App muss erfolgreich im Shopify-Händler-Admin-Panel installiert sein.
- Zugriff auf den Shopify Theme Editor (Onlineshop -> Themes -> Anpassen).
Einrichtung des Floating Widget
Überblick
Das Floating Widget ist ein interaktiver, KI-gesteuerter konversationeller Suchassistent, der in der Ecke des Shops schwebt. Wenn darauf geklickt wird, öffnet sich ein Chat-ähnliches Overlay, das es Kunden ermöglicht, Produkte mit natürlicher Sprache abzufragen.
- Mount-Punkt: Wird automatisch am DOM-Element
#smart-search-floating-rooteingebunden. - Geladene Assets:
constants.jssmart-search.iife.jsproduct-tracker.js(zur Verfolgung von Benutzeranalysen)tracker-config.js
Aktivierungsschritte
- Navigieren Sie im Shopify-Admin zu Onlineshop -> Themes.
- Klicken Sie neben dem aktiven Theme auf Anpassen, um den Theme-Editor zu öffnen.
- Klicken Sie in der linken Seitenleiste auf die Registerkarte App-Einbettungen (App Embeds) (das dritte Symbol von oben).
- Suchen Sie den Einbettungsblock mit dem Namen Hivebee Widget.
- Schalten Sie den Schalter auf Aktiv (Ein).
- Klicken Sie in der oberen rechten Ecke auf Speichern.
Anpassen des Erscheinungsbilds & des Trigger-Buttons (Desktop & Mobil)
Sie können das Erscheinungsbild, die Platzierung und die Animationen des schwebenden Such-Widgets direkt in den Einstellungen des Hivebee Widgets im Shopify-Theme-Editor anpassen:
- Suchen Sie in den Einstellungen für das Hivebee Widget den Abschnitt Erscheinungsbild (Appearance). Wählen Sie ein Theme (Theme)-Preset (z. B. Standardblau (Default Blue), Waldgrün (Forest Green), Königslila (Royal Purple)) für passende Primär- und Textfarben, oder wählen Sie Benutzerdefiniert (Custom), um Ihre eigene Primärfarbe (Primary color) und Textfarbe (Text color) festzulegen.
- Suchen Sie den Abschnitt Platzierung (Placement) und wählen Sie die Position (Position) des Trigger-Buttons auf Ihrer Storefront (Unten rechts (Bottom Right) oder Unten links (Bottom Left)).
- Suchen Sie in den Einstellungen für das Hivebee Widget die Abschnitte Trigger button - Desktop und Trigger button - Mobile.
- Passen Sie die Button-Größe (Button size) mit dem Schieberegler an (z. B. 64px für Desktop, 60px für Mobilgeräte).
- Wählen Sie den gewünschten Animations-Stil (Animation) aus dem Dropdown-Menü (z. B. Aufmerksamkeitsstark (Attention-grabbing), Subtil (Subtle) oder Keine (None)).
- Passen Sie die Platzierung an, indem Sie die Schieberegler für den Abstand von unten (Distance from bottom) und den Abstand von der Seite (Distance from side) einstellen, um Überlappungen mit anderen Elementen (z. B. Chat-Buttons oder 'Zurück nach oben'-Links) zu vermeiden.
- Klicken Sie oben rechts auf Speichern, um die Änderungen auf Ihre Storefront anzuwenden.
Fehlerbehebung
Problem 1: Widget-Stile sehen unpassend aus oder Schriftarten stimmen nicht überein
- Ursache: Theme-Stylesheet-Regeln kollidieren mit den CSS-Benutzervariablen des Widgets.
- Lösung: Der Benutzer kann Variablen wie
--primary-color,--font-familyund Schriftgrößen direkt im Styling-Block der Liquid-Vorlagen anpassen oder sie über das Haupt-Stylesheet des Themes (z. B.theme.css) überschreiben.