Liquify AI Storefront

AI-powered shopping assistant that embeds directly into any Shopify store — giving merchants a conversational search, product discovery, and checkout experience without leaving their theme.

The Problem

Shopify merchants rely on keyword search and static collection pages to help customers find products. For stores with large or complex catalogues, customers bounce before they find what they need — especially on mobile.

The problem compounds at the support layer. Customers ask the same questions repeatedly — sizing, compatibility, availability, shipping — despite the answers sitting in plain sight on the product page. That means support tickets for questions the store’s own data could answer instantly, at scale, for free.

Existing “AI search” apps address neither problem well. They bolt on generic chatbots that feel disconnected from the store’s brand, can’t access real-time inventory or cart state, and hand the maintenance burden back to the merchant. There was no solution that felt native to the storefront, was genuinely intelligent about the catalogue, and could deflect support load by letting customers interrogate the product directly.

How It Works

Liquify AI runs as a Shopify theme app extension — merchants install it from the Shopify App Store and drop blocks into their theme editor like any other section. No code changes to their store.

Under the hood, each block renders an iframe pointing to our hosted React app. The iframe communicates with the parent Shopify page via postMessage — this is how we bridge the Shopify sandbox. When a customer asks a question, the query routes through Shopify’s MCP (Model Context Protocol) endpoint — a JSON-RPC interface exposed at each store’s /api/mcp. This gives the AI direct access to the merchant’s product catalog and store policies without needing to sync or duplicate data. The MCP layer handles two primary operations: search_products (semantic product search with relevance scoring) and search_policies (store policies, FAQs, returns info). Before queries hit MCP, we preprocess them — translating between the customer’s language and the store’s catalog language, expanding synonyms for better recall, and filtering results by relevance score. When the Shopify Admin API is also available, we enrich MCP results with additional product data and convert prices to the customer’s presentment currency. If MCP isn’t available (headless or non-standard setups), the system falls back to local database tools — so it degrades gracefully.

The cart integration is bidirectional: the iframe requests cart state from the parent page (which has access to Shopify’s /cart.json), and can add items directly via /cart/add.js — so a customer can say “add the blue one in medium” and it happens without a page reload. For the quickview modal (where customers inspect a product in detail), the iframe is lifted into a full-screen overlay appended to document.body, escaping all ancestor stacking contexts that Shopify themes create. A placeholder div preserves layout so the page doesn’t collapse underneath.

There are multiple embed modes: a collection search widget (filters within a specific collection), a full-page chat section, a floating chat button modal, and an SDK mode for headless/custom themes.

Tech Stack

Frontend

• React 18 + TypeScript
• Tailwind CSS
• Vite (build tooling)
• Framer Motion (animations)
• Radix UI primitives

Backend

• Node.js
• Shopify App Bridge + Polaris (admin UI)
• Prisma ORM

AI/ML

• LLM-powered conversational search (RAG pipeline)
• Shopify MCP (Model Context Protocol) — JSON-RPC client for real-time catalog and policy search
• Query preprocessing: language translation, synonym expansion, relevance filtering
• Product catalog embeddings for semantic search
• Real-time inventory-aware responses

Infrastructure

• Shopify Theme App Extension (iframe-based embed)
• PostMessage API (cross-origin iframe ↔ storefront communication)
• Shopify CLI for extension development and deployment

Integrations

• Shopify MCP endpoint (/api/mcp) — product search and store policy retrieval
• Shopify Admin API (products, collections, inventory, price enrichment)
• Shopify Storefront Ajax API (/cart.json, /cart/add.js, /cart/update.js)
• Multi-currency and multi-language support via Shopify locale and currency APIs

Outcomes

• Ships as a single install — zero merchant configuration required to get a working AI search on any Shopify theme
• Bidirectional cart integration means customers can discover, evaluate, and purchase without leaving the conversation
• MCP integration eliminates the need to sync or cache product data — queries always hit the live catalog
• Modal system works across all tested Shopify themes (Dawn, Debut, custom themes) without ancestor stacking context issues — a problem that broke every previous implementation approach
• Handles multi-currency storefronts and localized content out of the box
• Currently in beta with live merchant stores

Lessons Learned

Shopify themes are adversarial CSS environments. Every theme wraps content in different stacking contexts — transform, filter, will-change, contain — any of which silently break position: fixed on child elements. Our first modal approach tried to force z-index: 99999 on every ancestor element. It worked on Dawn, broke on everything else, and caused visible layout shifts. The solution was simpler: move the iframe out of the DOM entirely into an overlay on document.body, and leave a placeholder behind. Zero ancestor manipulation, works everywhere.

MCP as the primary data layer was the right call. Early versions synced product data to our own database and ran search locally. This created a stale data problem — prices, inventory, and variants would drift. Switching to Shopify’s MCP endpoint meant every query hits the live catalog. The tradeoff is latency (network round-trip per search), but the preprocessing layer (synonym expansion, language translation, relevance filtering) makes the results good enough that we rarely need multiple round-trips.

PostMessage is a better contract than you’d expect. We initially resisted the iframe architecture because it felt limiting. In practice, the message-passing boundary forced clean separation between “storefront concerns” (cart, currency, navigation) and “app concerns” (AI, UI, state). It also means the app works identically on Online Store 2.0, headless builds, and custom themes — the contract doesn’t change.

Don’t fight the platform’s deployment model. Early prototypes tried to inject scripts directly into the theme. The theme app extension approach (where Shopify manages the block lifecycle) was more constrained but eliminated an entire class of installation and update bugs. Shipping as blocks that merchants drag-and-drop was worth the iframe complexity.