Integration & Setup Guide

Floating Widget Setup

Overview

The Floating Widget is an interactive AI-powered conversational search assistant that floats at the corner of the storefront. When clicked, it opens a chat-style overlay allowing customers to query products using natural language.

• Mount Point: Mounts automatically to the DOM element #smart-search-floating-root.
• Assets Loaded:
  • constants.js
  • smart-search.iife.js
  • product-tracker.js (for tracking user analytics)
  • tracker-config.js

Activation Steps

1. In the Shopify Admin, navigate to Online Store -> Themes.
2. Click Customize next to the active theme to open the Theme Editor.

3. In the left-hand sidebar, click the App Embeds tab (the third icon down).
4. Locate the embed block named Hivebee Widget.
5. Toggle the switch to Active (On).

6. Click Save in the top-right corner.

Customizing Appearance & the Trigger Button (Desktop & Mobile)

You can customize the appearance, placement, and animations of the floating search widget directly from the Hivebee Widget settings inside the Shopify Theme Editor:

1. Under the Hivebee Widget app embed settings, locate the Appearance section. Choose a Theme preset (e.g., Default Blue, Forest Green, Royal Purple) for a matching primary and text color, or select Custom to set your own Primary color and Text color.
2. Locate the Placement section and choose the Position of the trigger button on your storefront (Bottom Right or Bottom Left).
3. Under the Hivebee Widget app embed settings, locate the Trigger button - Desktop and Trigger button - Mobile sections.
4. Adjust the Button size using the slider (e.g., 64px for Desktop, 60px for Mobile).
5. Select the desired Animation style from the dropdown (e.g., Attention-grabbing, Subtle, or None).
6. Fine-tune the placement by adjusting Distance from bottom and Distance from side sliders to avoid overlapping with other elements (e.g., chat buttons or 'back to top' links).
7. Click Save in the top-right corner to apply the changes to your storefront.

Troubleshooting

Issue 1: Widget styles look unaligned or fonts are mismatched

• Cause: Theme stylesheet rules are conflicting with the CSS custom variables of the widget.
• Solution: User can customize variables like --primary-color, --font-family, and font sizes directly in the styling block of the Liquid templates or overwrite them via the theme's main stylesheet (e.g., theme.css).