How To Implement & Configure The Search Button

The KX AI Search & Discovery app ships two theme components you can enable independently or together:

• KX Agent (app embed) — the floating bubble and the full chat/search modal.
• KX Inline Search Button (section block) — a magnifier icon you drop into any section, usually the header.

Most merchants enable the KX Agent for the conversational experience, and optionally add the KX Inline Search Button so shoppers have a familiar search icon in the header.

1. Activate the extension

After installing, open the app from Apps in Shopify admin. On the welcome screen, click Activate Extension.

The theme editor opens with the KX Agent app embed pre-selected and switched on. Click Save to apply it to your storefront.

That's it — the agent is live. The rest of this guide is for customizing and extending it.

2. Configure the KX Agent

Expand the KX Agent embed in the theme editor to see all its settings. From here you can:

• Choose the floating button style — icon, colors, and corner position, or hide it entirely.
• Match the agent's accent color to your brand.
• Write a welcome message and a set of suggested starter prompts.

• Control product card click behavior and how out-of-stock products are shown.
• Set the site direction for RTL themes, or add advanced overrides via Custom CSS.

If you turn off both the Floating button and the Floating prompt bar, the agent has no visible entry point on the storefront. You can still test it by appending #kx-agent to any storefront URL.

Click Save when you're done.

3. (Optional) Add the KX Inline Search Button to your header

If you want a magnifier icon in your header — either alongside or in place of your theme's built-in search — add the KX Inline Search Button block.

1. In the theme editor, click the Header section in the left sidebar.
2. Click Add block and choose KX Inline Search Button.

1. Drag the block to the position you want (typically next to your theme's existing icons).

Open the block's settings to style the magnifier icon, size the clickable area, and choose whether the in-agent search input should appear when shoppers launch from this button.

Click Save.

4. (Optional) Hide your theme's default search

If you've added the KX Inline Search Button, your header may end up with two magnifier icons — yours and the theme's built-in one. To hide the theme's default:

1. Click the Header section in the left sidebar.
2. Scroll its settings down to Custom CSS.
3. Paste the CSS below and click Save.

details-modal.header__search { display: none; }

Note: this snippet is just an example — it targets the search modal used by Shopify's Dawn theme and themes based on it. Every theme structures its header differently, so the selector you need may be different on yours.

For a detailed walkthrough, including how to find the right selector for your theme, see How to hide the original Shopify search icon.