How to Enable AI Search for Non-Shopify Stores
Set up Zipchat's AI-powered search on any website — WooCommerce, Magento, custom builds, and more.
What is AI Search?
AI Search is Zipchat's smart search feature that replaces or enhances your website's existing search bar. It uses semantic search to surface the most relevant products and pages — even when visitors don't type the exact right keywords.
For Shopify stores, AI Search works out of the box because products sync automatically. For non-Shopify stores, you need to provide a product feed so Zipchat knows about your catalog. Here's how.
Step 1: Install the Zipchat Widget on Your Website
If you haven't already, add the Zipchat script to your website. This is the same script that powers the chat widget — AI Search is included with it.
Copy the script tag from your Zipchat dashboard and paste it into the <head> or before the closing </body> tag on every page of your site:
<script src="https://widget.zipchat.ai/widget/zipchat.js?id=YOUR_WIDGET_TOKEN" data-no-optimize="1" defer></script>
You can find your unique widget token in your chat settings in the Zipchat dashboard.
Step 2: Add Your Product Feed
Since Zipchat can't pull products directly from your store (like it does with Shopify), you need to provide a Google Merchant Feed — a standard XML or CSV file that lists all your products.
How to add it:
Go to your chat settings in the Zipchat dashboard.
Navigate to the AI Training section (Sources / Pages area).
Click "Add new source."
Select "Product Feed" as the source type.
Paste your Google Merchant Feed URL (e.g. https://yourstore.com/product-feed.xml).
Click Add.
What is a Google Merchant Feed?
It's a standardized file (XML or CSV) containing your product data — titles, descriptions, prices, images, availability, and links. Most e-commerce platforms (WooCommerce, Magento, PrestaShop, BigCommerce, etc.) can generate one automatically, often through a plugin or built-in export. If you already use Google Shopping, you likely already have one.
Once added, Zipchat will automatically parse your feed and index all your products. This runs periodically to keep your catalog up to date.
Out-of-stock handling
Zipchat automatically detects out-of-stock products from your feed. For extra control, you can set an "out-of-stock keyphrase" in your chat configuration — a text snippet that appears only on out-of-stock product pages, helping Zipchat identify them during crawling.
Step 3: Enable AI Search Visibility
Once your products are indexed, turn on AI Search:
Go to your chat settings in the Zipchat dashboard.
Find the AI Search channel card (it appears in the Channels section alongside your chat widget).
Click on it and toggle visibility for Mobile, Desktop, or both.
Important: AI Search requires at least one CSS selector to be configured so it knows where to attach on your page. Zipchat automatically detects your site's search bar during setup, but if it didn't find one, you'll need to add it manually (see next step).
Step 4: Configure the Search Trigger (CSS Selectors)
AI Search works by replacing or enhancing your existing search bar. It uses CSS selectors to identify which element(s) on your website should trigger the AI Search overlay when clicked.
How to configure:
Go to AI Search → Edit in your chat settings.
In the "Search trigger" card, add the CSS selectors for your site's search element(s).
Examples of CSS selectors:
input[type="search"]— targets any search input.search-bar— targets an element with the class "search-bar"#site-search— targets an element with the ID "site-search"[class*="search-form"]— targets any element with "search-form" in its class name
How to find your search selector:
Right-click on your website's search bar, select "Inspect" in your browser, and look at the HTML element. Note its class, id, or other identifying attributes to build your CSS selector.
Zipchat tries to auto-detect these selectors when your chat is first created. If auto-detection worked, you'll already see selectors filled in. You can adjust them anytime.
Step 5: Customize the Look & Feel
From the Edit AI Search page, you can customize:
Search placeholder — the hint text in the search bar. Use {{ai-agent}} to insert your assistant's name.
Ask AI button colors — background color, gradient, and label color for the mobile "Ask AI" button.
Button label — the text on the mobile AI button (e.g. "Ask {{ai-agent}}").
Z-index — controls the layering of the search overlay. Increase if it appears behind other elements (default is 999).
No results message — what visitors see when their search returns nothing.
The preview panel on the right shows you how it will look on both desktop and mobile.
Step 6: Test It
Visit your website and click on your search bar. You should see the Zipchat AI Search overlay with:
A search input at the top.
Relevant results from your product feed and crawled pages as you type.
An "Ask AI" panel where visitors can ask natural language questions to your AI assistant.
How Non-Shopify Search Differs from Shopify
Shopify stores:
Products sync automatically via the Shopify API.
Search results show product images, titles, and prices in separate sections ("Products" / "Pages").
Search visibility is auto-enabled when selectors are detected.
Includes a "See all results" link.
Non-Shopify stores:
Products come from your Google Merchant Feed (XML or CSV).
Search results show pages in a unified list (powered by semantic/RAG search).
You need to manually enable search visibility.
You may need to set an out-of-stock keyphrase for stock filtering.
Under the hood: Shopify stores use a "shopify" search type that queries Shopify's Predictive Search API alongside Zipchat's semantic search. Non-Shopify stores use a pure RAG (Retrieval-Augmented Generation) search that combines dense vector search with sparse keyword search for the best results.
Troubleshooting
AI Search doesn't appear: Make sure visibility is toggled ON (for mobile and/or desktop) and that you have at least one CSS selector configured.
No results showing: Check that your product feed URL is accessible and valid. Zipchat needs to successfully parse it before products appear.
Search overlay appears behind other elements: Increase the Z-index value in AI Search settings.
Wrong element being targeted: Adjust your CSS selectors. Use browser DevTools to inspect the correct element.
Products not updating: Zipchat periodically re-parses your feed. For an immediate refresh, remove and re-add the product feed, or contact support.
Last updated