How To Implement & Configure The Inline Button

The KX AI Sales Assistant & Search 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 Button (section block) — a button you drop into any section (usually the header), with your choice of icon: magnifier, sparks, chat, or robot.

Most merchants enable the KX Agent for the conversational experience, and optionally add the KX Inline Button so shoppers have a quick way to launch the agent from 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 agent

All the agent's appearance and behavior settings live in the app's Settings page (not the theme editor). Open the Kimonix app in Shopify admin and click Settings.

A live preview on the right side of the page reflects every change as you edit, before you save. Settings are grouped into sections:

• Floating prompt bar — pinned to the bottom of every page. Toggle Show on or off and pick its accent color.
• Floating button — the circular launcher in a corner of the page. Toggle Show, choose the icon, color, size, roundness, and position.
• Mobile layout — when the prompt bar and floating button are both enabled, decide which one shoppers see on small viewports (default: prompt bar only). Desktop always shows both.
• In-agent search — the search bar inside the open chat. Hide it when shoppers open the agent from a floating element to take them straight to chat. Choose how out-of-stock products appear in results.
• Agent interface — main color, text direction, product card click action and shortcut icons, product image ratio, welcome message.
• Initial prompts — up to 8 suggestion chips shown when the chat first opens.
• Advanced — custom CSS for developer-level overrides.

If both Show toggles are off (Floating prompt bar and Floating button), 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. The save bar appears automatically as soon as you change any setting.

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

If you want a button in your header that launches the agent — either alongside or in place of your theme's built-in search — add the KX Inline Button block.

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

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

Open the block's settings to pick an icon (magnifier, sparks, chat, or robot), style it, size the clickable area, and choose whether the in-agent search step should be skipped when shoppers launch from this button.

Click Save.

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

If you added the KX Inline Button with the magnifier icon, 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.