Skip to main content

How to Set Up and Publish Search Bar (AI Shopper)

Create Search Bar from Widgets → Features → Try now, customize Style and Content, then publish Floating or Inline on Shopify or with an embed elsewhere.

Written by David T

Search Bar adds an AI-powered search experience to your storefront so shoppers can ask for products in natural language instead of relying only on keyword search.

How to Set Up

  1. In Tolstoy, open Widgets.

    Widgets page

  2. In the Customer Agent menu, open Features.

    Features page with Search Bar and Try now

  3. On Search Bar, click Try now. This creates your Search Bar if you do not have one yet, and opens the editor.

    Search Bar editor after Try now

  4. Use the Test control to check how the assistant responds before you publish.

    Test your agent for Search Bar

  5. In Style, customize placeholder text, icon, Floating or Inline mode, Show Chat Bubble when on Mobile, colors, position, border, and font.

    Search Bar Style settings

  6. In Content, choose visibility rules such as which collections to block and which templates should include the widget.

    Search Bar Content tab and live preview

  7. Review the live preview and save your changes.

How to Publish

Shopify — Floating mode

  1. Click Publish.

  2. If prompted, enable the Tolstoy app embed in Shopify.

  3. Confirm the floating Search Bar appears on your storefront and opens correctly.

Shopify — Inline mode

  1. Click Publish.

  2. If prompted, enable the Tolstoy app embed in Shopify.

  3. In the publish flow, click Add block to open the Shopify theme editor.

  4. Add the Search Bar block to your product page template.

  5. Click Save in Shopify.

  6. Confirm the Search Bar appears and works on the storefront.

Non-Shopify

  1. Open the publish flow and copy the Search Bar embed code.

  2. Paste it where you want the Search Bar to appear.

  3. Publish the widget, then test it on the live site.

Best Practices

  • Use a clear placeholder such as "Ask me what you are looking for".

  • Choose Inline mode when you want search embedded in the page layout.

  • Turn on Show Chat Bubble when on Mobile if chat is easier than a full search bar on small screens.

  • Test a few real shopper-style queries before publishing.

Troubleshooting and FAQs

I already see AI Search Bar under Widgets

Open it from the Widgets list to edit Style, Content, and publish. Use Features → Search Bar → Try now the first time you create one.

Why do I see an Enable Tolstoy step before publishing?

On Shopify, the Tolstoy app embed needs to be enabled before the Search Bar can appear.

Why is the status stuck on Needs placement?

In Inline mode on Shopify, add the Search Bar block to the product page template.

Why is the widget not showing on mobile?

Check mobile settings, or whether the widget is set to show the Chat Bubble instead of the Search Bar on mobile.

What is the difference between Floating and Inline?

Floating displays the Search Bar over the page. Inline embeds it in the page template.

Did this answer your question?