How to Enable Zipchat AI Search for Your Shopify Store
Replace your standard search bar with an AI-powered search experience that combines product results with conversational AI assistance.
What Is Zipchat AI Search?
Zipchat AI Search is an intelligent search overlay that takes over your store's existing search bar. When a visitor clicks the search icon or search field on your Shopify store, instead of the default Shopify search, they get a powerful AI-enhanced search experience.
The search overlay combines two things:
Smart search results — instantly displays matching products and pages from your catalog as the visitor types, with images, titles, and prices.
An AI chat panel — your Zipchat AI assistant, ready to answer questions, recommend products, and guide shoppers in a conversational way.
On desktop, visitors see both panels side by side. On mobile, they see search results first with a prominent "Ask AI" button to switch to the conversational assistant.
Everything is fully customizable — colors, labels, placeholder text, and button styling — all from the Zipchat dashboard.
Setup Guide
Step 1: Open Your Chat Settings
Log in to your Zipchat dashboard. Navigate to your chat (your AI agent), and look for the AI Search section under the channels area on your chat settings page.
You'll see the AI Search card with options to Edit and Add to site.
Step 2: Configure the Search Trigger (CSS Selectors)
This is the most important step. You need to tell Zipchat which element on your store should trigger the AI search overlay.
Click Edit (or Add to site if it's your first time). In the Search trigger section, enter the CSS selectors of your store's search elements.
CSS selectors identify the search bar or search icon on your Shopify theme. Common examples include:
.search-modal__toggle — a search icon button
[data-action="search"] — a data attribute on the search element
#search-input — a search input field
.header__search — search area in the header
You can add multiple selectors — just type each one and press Enter. Zipchat will intercept clicks on any of those elements and open the AI search overlay instead of the default search.
To find your search selectors: right-click on your store's search icon or search bar, select "Inspect", and look at the HTML element. Copy the class name (prefixed with a dot) or the ID (prefixed with a hash). If you're unsure, contact Zipchat support — we can help you identify the right selectors for your theme.
Step 3: Customize the Look and Feel
On the same edit page, you can personalize how the AI search looks:
Search placeholder — the text visitors see in the search input (e.g., "Search products or ask a question..."). Use {{ai-agent}} to dynamically insert your assistant's name.
"Ask AI" button colors (mobile) — set the background color, gradient color, and label color for the mobile "Ask AI" button.
Button label (mobile) — customize the text on the "Ask AI" button. Use {{ai-agent}} for your assistant's name.
Step 4: Customize Search Result Labels
For Shopify stores, the search results panel shows separate sections for products and pages. You can customize:
Products label — the heading above product results (e.g., "Products")
Pages label — the heading above page results (e.g., "Pages")
See all results label — the link text at the bottom (e.g., "See all results for {{search-query}}")
No results message — what to show when no results are found
Step 5: Adjust Positioning (Optional)
If the search overlay appears behind other elements on your page, you can adjust the Z-index value. A higher number means the overlay will appear on top of other page elements. The default value works for most themes.
Step 6: Go Live
Once you've configured the search trigger and customized the design, head back to the chat settings page and click "Add to site" (or "Update visibility" if it's already been enabled before).
A modal will appear where you can choose where the AI search should be active:
on Mobile — enable for mobile visitors
on Desktop and Tablet — enable for desktop and tablet visitors
Check the options you want and click Save. Your AI search is now live!
How It Works for Your Visitors
On Desktop
When a visitor clicks your store's search icon or search bar, the Zipchat AI Search overlay opens. They see a split view: on the left, real-time search results with product images, titles, and prices, plus matching pages below. On the right, your AI assistant, ready to answer questions, recommend products, and guide the shopper.
Visitors can search and chat at the same time — it's like having a personal shopping assistant built right into the search bar.
On Mobile
On mobile devices, visitors first see the search results. At the bottom of the screen, a prominent "Ask AI" button invites them to start a conversation with your AI assistant. Tapping it switches to the chat view.
Tips for Best Results
Make sure your product data is complete. AI Search pulls from your synced product catalog. Products with good titles, descriptions, and images will show up better in results.
Test on both mobile and desktop. Use the preview tabs in the editor to see how your search looks on each device before going live.
Set up suggestion messages in your chat. The AI panel shows suggestion chips (quick questions visitors can click). Configure these in your chat settings for a more engaging experience.
Need help finding your CSS selectors? Every Shopify theme uses different HTML structure. If you're not sure which selectors to use, reach out to the Zipchat support team — we'll identify the right ones for your specific theme.
Summary
Go to your chat settings and find the AI Search section
Click Edit and add the CSS selectors of your store's search elements
Customize colors, labels, and placeholder text to match your brand
Click "Add to site" and enable it for mobile and/or desktop
That's it — your visitors now have an AI-powered search experience
Last updated