Hivebee Logo

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-root eingebunden.
  • Geladene Assets:
    • constants.js
    • smart-search.iife.js
    • product-tracker.js (zur Verfolgung von Benutzeranalysen)
    • tracker-config.js

Aktivierungsschritte

  1. Navigieren Sie im Shopify-Admin zu Onlineshop -> Themes.
  2. Klicken Sie neben dem aktiven Theme auf Anpassen, um den Theme-Editor zu öffnen.
Shopify Theme Editor
  1. Klicken Sie in der linken Seitenleiste auf die Registerkarte App-Einbettungen (App Embeds) (das dritte Symbol von oben).
  2. Suchen Sie den Einbettungsblock mit dem Namen Hivebee Widget.
  3. Schalten Sie den Schalter auf Aktiv (Ein).
App Embeds toggle for Hivebee Widget
  1. Klicken Sie in der oberen rechten Ecke auf Speichern.
Floating Widget active state preview

Anpassen 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:

  1. Suchen Sie in den Einstellungen für das Hivebee Widget die Abschnitte Trigger button — Desktop und Trigger button — Mobile.
  2. Passen Sie die Button-Größe (Button size) mit dem Schieberegler an (z. B. 64px für Desktop, 60px für Mobilgeräte).
  3. Wählen Sie den gewünschten Animations-Stil (Animation) aus dem Dropdown-Menü (z. B. Aufmerksamkeitsstark (Attention-grabbing), Subtil (Subtle) oder Keine (None)).
  4. 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.
  5. Klicken Sie oben rechts auf Speichern, um die Änderungen auf Ihre Storefront anzuwenden.
Floating Widget button customization settings

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-family und Schriftgrößen direkt im Styling-Block der Liquid-Vorlagen anpassen oder sie über das Haupt-Stylesheet des Themes (z. B. theme.css) überschreiben.