Skip to main content

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

Written by Mikaela Lasig

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 traditional keyword search. This helps merchants surface more relevant products, guide discovery, and turn search intent into conversations with the shopper assistant. Search Bar is a paid AI Shopper entry point, so merchants need a paid Shopper plan to publish it live.

How to Set Up

  1. Go to Customer Agent → Features → Search Bar.

  2. Use the Test Agent tab to check how the assistant responds before you publish.

  3. In Style → Design, customize the widget:

    • Placeholder text

    • Custom icon

    • Floating or Inline mode

    • Mobile behavior

    • Colors

    • Position

    • Border and font styling

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

  5. Review the live preview and save your changes.

How to Publish

Shopify

The publish path depends on the Search Bar mode you choose.

Floating mode

  1. Click Publish.

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

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

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. Verify that the Search Bar appears and works on the storefront.

Non-Shopify

  1. Open the publish flow.

  2. Copy the Search Bar embed code.

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

  4. Publish the widget.

  5. Test it on the live site.

Best Practices

  • Use a clear placeholder such as "Ask me what you're looking for" so shoppers understand this is AI-powered.

  • Choose Inline mode when you want the experience embedded directly into product discovery flows.

  • Turn on the mobile Chat Bubble fallback if chat is easier to use than a full search bar on smaller screens.

  • Test a few real shopper-style queries before publishing, especially broad intent queries like "summer dresses under $100."

Troubleshooting / FAQs

Why can't I publish Search Bar?
Search Bar requires a paid Shopper plan to go live.

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 properly.

Why is the status stuck on Needs placement?
If you are using Inline mode on Shopify, the Search Bar block still needs to be added to the product page template.

Why is the widget not showing on mobile?
Check whether mobile-specific settings are enabled or whether the widget is configured to show the Chat Bubble instead of the Search Bar on mobile devices.

What's the difference between Floating and Inline?
Floating displays the Search Bar over the page. Inline embeds it directly into the page template.

Did this answer your question?